» HTML Şablon Düzenleme


 

Blogcu şablonlarımızı html olarak nasıl düzenleyebiliriz? Detaylar yazımızda..

 

Eğer "standart görünüm" değil de "Şablonlar > Şablon Seç" menüsü aracılığıyla seçtiğiniz hazır blogcu şablonunu, ya da bizim gibi geliştiriciler tarafından yapılmış "özel yapım blogcu şablonu"nu kullanıyorsanız elbette blogunuzun görünümünde değiştirmek isteyeceğiniz yerler ya da blogunuza eklemeniz gereken kodlar bulunabilir. HTML şablon düzenleme "standart görünüm" dışında kalan bu diğer iki şablon türü için blog saiplerine bloglarının tasarımlarında özgürlük sağlayan bir özelliktir. Yazımızda bilmeyenler için oldukça basit bir anlatımla html şablon düzenlemeyi nasıl yapabileceğinizden bahsedip konuyla ilgili önemli notlara-ipuçlarına da yer vereceğiz.

 

Not: Eğer daha önce hiç şablon değişikliğinde bulunmadıysanız muhtemelen sistem tarafından varsayılan olarak atanmış "Standart Görünüm"ü kullanıyorsunuzdur.

Standart Görünüm'e kod ekleme vb. işlemler için yapılacaklar oldukça farklıdır, yazımızın konusu olan "HTML Şablon Düzenleme" ile yapılamaz.  Bunun için Standart Görünüm Düzenleme yazımıza bakabilirsiniz. Ancak bu "standart görünüm" tasarımın da kendine göre bazı kısıtlamaları vardır. Eğer bu kurallardan rahatsız oldunuz, yaptığınız eklemelerden verim alamadıysanız "Özel Yapım Şablon Kurulumu" yapabilirsiniz. Bunun nasıl yapacağınızı öğrenmek için "Özel Yapım Şablon Kurulumu" yazımıza bakabilirsiniz.

Eğer okuduğunuz bu yazıya "Özel Yapım Şablon Kurulumu" yazımızdan geldiyseniz yazıların bir kısmı sizin için tekrar olacak ancak doğrudan bu yazımızı okuyacak kullanıcılarımız için bu hususlardan bahsetmemiz gerektiğinden dolayı hiçbir şeyi atlamadık. Hadi başlayalım:

 

 

Ön Hazırlık: Uygun Tarayıcı Seçimi

En çok kullanılan internet tarayıcıları: Internet Explorer, Mozilla Firefox ve Google Chrome. Siz de muhtemelen bunlardan birini kullanıyorsunuz. Şablon düzenleme sırasında seçilmiş bir kodu yapıştırırken kodu farklı bir yere ve önceki kodların üzerine yapıştırması hatasından dolayı sizlere şablonlarınızı düzenlerken (mavi e logolu olan) Internet Explorer'ı  kullanmamanızı öneriyoruz. Bunun yerine diğer iki tarayıcıdan birini kullanabilirsiniz. Ya da düzenleme işlemlerinizi bir not defteri üzerinde yapıp kodların son halini bu tarayıcıda yapıştırınız. Bu arada biz firefox kullanıyoruz, kullanmıyorsanız size de tavsiye ederiz.

 

1. Adım: Yedekleme

Yapacağınız değişiklikten memnun olmazsanız ya da değişiklik sırasında bir şeyler ters giderse kolayca başa dönebilmemiz için ne olursa olsun yedeklemeye ihtiyacımız var. Eğer blogcu.com tarafından yapılmış bir şablon seçtiyseniz ve bu şablonda hiçbir değişiklik yapmadıysanız bunun hangi şablon olduğuna göz atmanızda fayda var, terslik durumunda ilgili şablon grubuna gidip istediğiniz renk formatını seçip uygula diyerek herşeyi ilk haline almanız mümkün. Eğer blogcu.com'un sunduğu şablonlardan hazır bir şablon seçmiş, daha sonra da bu şablon için "şablon düzenle" diyerek kodlarda değişiklikler yaptıysanız ya da bizim "özel yapım blogcu şablonu"muzu kullanıyorsanız çalışmalarınızın kaybolmaması için şablon kodlarımızı yedekleyelim. Eskiden blogcu içerisinde kodlarımızı yedeklememiz mümkündü fakat bu özellik kaldırıldır, bu yüzden bunu kendi imkanlarımızla yapacağız.

Nasıl yapılabilir?

  • "Şablonlar" > "Şablon Düzenle" sayfasına gidip sağdaki kodların olduğu alanda boş bir yere önce farenizin sol tuşuyla tıklayıp fare imlecini bu alanın içine getirerek aktifleştirmiş olalım.
  • Oradaki kodların tümünü seçelim. (CTRL + A  ya da  'sağ tık' > 'Tümünü Seç' diyerek)
  • Seçtiğimiz kodları kopyalayalım. (CTRL + C  ya da  'sağ tık' > 'Tümünü Kopyala' diyerek)
  • Kodları yapıştırmak için "Not Defteri" gibi bir program açalım. (Bilmiyorsanız şunu yapınız: Masaüstünde boş yere gelip 'sağ tık' > 'yeni' > 'metin belgesi' ne tıklayalım. İsim yazmamızı isteyecek, 'şablon yedeği' gibi bir isim verip 'enter'a basalım.)
  • Oluşturduğumuz bu dosyanın içine girip kodları yapıştıralım. (CTRL + V  ya da  'sağ tık' > 'Yapıştır' diyerek.)
  • Dosyamızı kaydedelim. (CTRL + S  ya da  üst menüden 'Dosya' > 'Kaydet' diyerek.)

 

2. Adım: Düzenleme

Düzenleme sırasında eğer tarafımızdan yayınlanmış "Özel Yapım Blogcu Şablonu"nu kullanıyorsanız işiniz oldukça kolay. Yayınladığımız şablonlarda kodlar hem düzenli bir şekilde yazıldı, hem de içlerine açıklamalar koyuldu ve böylelikle ilgili talimatlar eşliğinde düzenleme işleminiz oldukça basitleştirildi. Fakat blogcu.com tarafından sağlanan hazır şablonlarda düzenleme yapacaksanız ya da bizim "özel yapım şablonlarımızda" açıklama eklenmeyen bir alanda düzenleme yapacaksanız bu konuda birkaç not aktaralım.

Normal şartlarda html kodlama diline çok az da olsa hakim olmanız oldukça faydalı olacaktır ancak şablon düzenlemek için bu olması gereken bir gereklilik değildir. Bu durumda yapacağınız işlemlerde daha tedbirli davranmanız, bol bol yedek almanız ile bir sorun yaşamayacaksınızdır.

Html kodlama dilinin çalışma mantığına bir örnek üzerinde kısaca bakalım isterseniz. Örneğimizde şablonumuzda yer alan "Son içerikler" kutusunu inceleyelim:

 

Blogcu html Şablon Formatı detayları

Evet, işte görüldüğü üzere bu kutu "Son İçerikler" alanını vermektedir. "Son İçerikler" şeklindeki yazı bizim kutuya verdiğimiz başlıktır ve istersek bunu "Son Yazılar" olarak da değiştirebiliriz. Bunun hemen ardından yazı türüne göre küçük bir kare resim ya da yazı başlığı ile listelenen 30 tane kadar son içerikleri ise yazdığımız "şablon etiketi" vermektedir. Anlayacağınız üzere bizim burada o listelemeye müdahele şansımız yoktur, biz sadece burada yazı başlığını değiştirebiliriz.

 

En çok yapılan işlemleri dikkate aldığımızda şablonda muhtemelen bir yeri değiştirecek ya da şablona bir kod ekleyeceksinizdir. Bu iki durumda da "Şablon Düzenle" sayfasında yer alan şablon kodlarımızda düzenleme yapmamız gerekmektedir. Eğer bir yeri değiştirecekseniz bunun en kolay yolunun ilgili bir kelimeyi blogda tespit ettikten sonra bunu kodlarda aramaktır. yukarıdaki örnek üzerinden gidersek yan kolondaki "Son İçerikler" başlığını "Son Yazılar" olarak değiştirecekseniz kod sayfasında arama yapıp ilgili yeri bulabilirsiniz. Daha sonra yapacağınız iş buradaki yazıyı değiştirmektir. Aynı şekilde eğer "Son İçerikler"in hemen altına bir "mesaj kutusu" eklemek istiyorsanız bu kodları sitemizdeki ilgili yazı aracılığıyla alıp şablonda ilgili yere yapıştırabilirsiniz.

 

Eğer yapıştıracağınız kodu siz de bir kutu içerisinde kendi başlığıyla vermek isterseniz bu sefer de kodları dikkatle inceleyip örnekleme yaparaka kendimiz de bir kutu oluşturabiliriz. Blogcu şablonları için verilen html düzenleme özgürlüğü ile görünümde hemen hemen her şeyi yapabiliriz.. Yine bunu da kodlar üzerinde inceleyelim:

 

Blogcu şablonlarında kod örnekleme

Evet, yukarıdaki örnekte de alt alta gelen iki kutunun kodlarına yer verdik. Göreceğiniz üzere birbirine çok benzer kodlar var. Biraz kafa yorunca "div" ile başlayıp "/div"  ile biten kod grubunun bir kutuyu verdiğini anlayabiliriz. Biz de kendi kutumuzu oluşturmak için kodlardaki bir div grubunu komple kopyalayıp hemen olmasını istediğimiz yere yapıştırır, ardından da değiştireceğimiz kodları silip yerlerine kendi kodlarımızı yapıştırabiliriz.

 

 

Şablonları düzenlerken pek çok yerde "blogcu şablon etiketleri"nin kullanıldığını göreceksiniz. Bu etiketlerin ne anlama geldiğini bilmek isterseniz "Blogcu Şablon Etiketleri" yazımıza bakabilirsiniz.

 

 

3. Adım: Kaydetme

Muhtemelen şablon düzenleme ile uzun bir süredir ilgilendik. Tam kaydetme işlemi ile birlikte bir internet kesintisi, blogcu.com'da yaşanabilecek bir sorun vs nedeniyle yaptığımız tüm değişiklikler kaydolmayabilir ve buna karşılık düzenlediğimiz kodlar silinebilir. Tam "Kaydet" butonuna basmadan önce de burada da kodlarımızı 1. madde de anlattığımız şekilde yedeklemenizi, hiç olmazsa (CTRL + C ya da kopyala) diyerek ilgili kodları bilgisayarın hafızasında bekletmenizi öneriyoruz.

 

Eğer eski bir blogcu kullanıcısı iseniz, blogcu tarafından eskiden tanınan birden fazla blog hakkınızı kullanıyor olabilirsiniz. Çoklu blog yönetimi sisteminde ilk aldığınız blog ana blog olarak kabul edilip, diğer bloglar eğer panelde seçerseniz aktifleşmektedir. Fakat işlem yaparken seçip de aktifleştirdiğiniz blog, herhangi bir kaydetme vs işlemi yapmadığınızda zaman aşımına uğramaktadır. Ve sistem otomatik olarak ana blogu seçmişsinizcesine seçiminizi iptal etmektedir. Böylelikle de bazen siz diğer blogunuzun kodlarını değiştiriyor olsanız bile ana blogunuzu değiştiriyor ya da hiçbir yeri değiştiremiyor olabiliyorsunuz. Bu konuya "Yeni Düzenleme Sonrası Blogcu'ya Öneriler" yazımızda da değindik ama sorun düzelene kadar biz tedbirimizi alalım. Bunun için menüdeki "Şablon Düzenleme" sayfasını yeni bir sekmede açalım. Sonra menün altındaki bloglarım alanında doğru blogun seçili olup olmadığını kontorl edelim. Bahsettiğimiz üzere eğer seçimimiz kaybolmuşsa tekrarda seçimimizi yapalım. Ardından tekrar eski "şablon düzenleme" sayfamıza dönüp kaydet diyelim.  Hepsi bu kadar, hayırlı olsun ! :)

 

 

Son bir not: Yeni düzenlemenizden memnun kaldıysanız siz yeni kodları yine de yedekleyin. İlerleyen günlerde unutup da yedek almadan bir düzenleme yapar da bu düzenlemeden memnun kalmazsanız ya da yanlışlıkla görünümün kaybedileceği bir işlemi yaparsanız yaptığınız tüm değişikliklerin kaybolacağını hatırlatmak istiyoruz.

 

Görünümün kaybedileceği işlemler:

  • "Standart Görünüm"ü aktifleştirmek
  • Blogcu.com'un hazır şablonlarından birini seçip "uygula" butonuna basmak
  • "Arkaplanlar" bölümüne gidip de bir arkaplan seçip "uygula" demek
  • "Reklamlar ve Eklentiler" bölümüne gidip orada bir işlem yapmak

 





comments powered by Disqus

Blogcu.com üye yorumları:




Eğer blogcu.com üyesi iseniz yorumunuzu aşağıdaki form ile de yapabilirsiniz:
Yorum Yaz