Blog’unuza bir menü ve arama kutusu ekleyin

Bundan önce 4 bölüm halinde Blogger şablonunu özelleştirmek 1 2 3 4 diye şablonumuzun kaynak kodları üzerinde yaptığımız değişikliklerle blog’uğunuzun tasarımını kendinize göre nasıl özelletirebileceğinizi görmüştük . Bu yazımızda ise sırasıyla blog’umuza bir menü eklemeyi ve arama kutusu yerleştirmeyi göreceğiz.

Blog tasarımınız her ne kadar görsel olarak sizin zevkinizi ve beğeninizi yansıtsa da kullanım açısından ziyaretçilerinizin kolayca yolunu bulabilmesi ve yazılarınız arasında rahatça gezine bilmelerini yada yeni sayfa oluştur özelliğini kullanarak oluşturduğunuz sayfalara bağlantı oluşturmak için blog’unuza bir menü ekleyebilirsiniz.

Blog’unuza menü eklemek için sıfırdan kod yazmanıza da gerek yok bunun için hazır kodlardan da yararlanabilirsiniz.

Bu konuda hazırlanmış birçok örneği www.dynamicdrive.com/style/ adresinde bulabilirsiniz.

Blog’unuza menü ekleyin.

İlk kodumuz HTML kodu bu kodu blog’umuzun ve etiketleri içerisinde görünmesini istediğiniz bölüme yerleştirmemiz gerekiyor. İkinci kodumuz ise CSS kodu onu da hemen anlaşılacağı gibi blog’umuzun CSS kodları arasına yerleştireceğiz.

Bunu yapabilmek için de sırası ile aşağıdaki adımları takip edin.

Blogger Kumanda Paneli ➜ Yerleşim ➜ HTML’yi Düzenle yolunu takip ederek blog’umuzun kodlarına doğrudan müdahale edilebileceğimiz modüle ulaşıyoruz.

Bilgisayarınızın klavyesinde bulunan Ctrl ve F tuşuna aynı anda bastıktan sonra açılan arama formunda ]]> terimlerini aratın.

Daha sonra altta bulunan kodlarının tümünü kopyalayıp hemen üstüne gelecek şekilde yapıştırın.

CSS Kodu.

#navigation{ width:850px; background: #F9f9f9 url() repeat-x scroll 0 0; color: #333; float: left; height: 40px; padding:0px 0px 0px 0px; margin:5px 0; }

#navigation ul li{ display: block; float:left; height: 52px; margin-left: 0px; }

#navigation ul{ margin: 0px 0px 0px -40px; }

#navigation ul li a{ font: normal 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif; background-color: transparent; color: #444; display: inline-block; font-size: 15px; height: 27px; padding: 10px 0 0; text-align: center; text-transform: capitalize; width: 118px; }

#navigation ul li a:hover,#navigation ul li.current_page_item a,#navigation ul li.current-cat a{ background: #7C691A; color: #fff; text-decoration: none; -moz-border-radius: 5px; -khtml-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; border: 0px solid #5C2D58; }

#navigation ul li.active a{ background: #68C4F4; color: #fff; text-decoration: none; -moz-border-radius: 5px; -khtml-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; border: 0px solid #5C2D58; }

CSS kodlarını şablonunuza eklediğinizde böyle görünecek.

HTML Kodu.

Menümün hemen blog başlığı altında yer alması için blog’uğunuzun kaynak kodları arasında

etiketini bulun ve altta bulunan HTML kodlarını kopyalayıp bu etiketin hemen üstüne gelecek şekilde yapıştırın.

• Ana Sayfa
• Yazılar RSS
• Yorum RSS
• Sizin Linkiniz

HTML kodlarınıda şablonunuza eklediğinizde böyle görünecek.

Kodu ekledikten sonra blog ziyaretçilerimizin ana sayfadan bağlantı oluşturduğunuz diğer sayfalara oradan da tekrar ana sayfaya geri dönebilmeleri için linkleri düzenlemeniz gerekiyor.

Bunu da bir örnekle anlatacak olursam sanırım yeterince anlaşılacaktır.

http://interaktifblog.blogspot.com/> Ana Sayfa

Kırmızı ile renklendirilmiş kısma sayfamın adı olan Ana Sayfa yazıyorum ve Mavi ile renklendirdiğim kısmada sayfamın bağlantısını ekliyorum.

Sırası ile diğer linkleri ve gitmesini istediğiniz bağlantıları da bu şekilde oluşturabilirsiniz.

Blog’unuza bir arama kutusu ekleyin.

İçeriğimiz zenginleşip, yazılarımız çoğaldıkça blog ziyaretçilerinizin aradıklarını daha kolay bir şekilde bulabilmelerini sağlayabilirsiniz.

Blogger’ın bir arama kutusu ekleyebileceğiniz gadget’ı bulunsa da çok fazla özelleştirme imkanı bulunmadığı için ben kendi arama formumu kullanmayı tercih ediyorum.

Bunu yapmak içinde sırası ile aşağıdaki adımları takip edebilirsiniz.

Bilgisayarınızın klavyesinde bulunan Ctrl ve F tuşuna aynı anda bastıktan sonra açılan arama formunda ]]> terimlerini aratın.

CSS Kodu.

Daha sonra altta bulunan kodlarının tümünü kopyalayıp hemen üstüne gelecek şekilde yapıştırın.

#search-box {width:288px;height:100px;border-left:1px solid #e9e9e9;border-right: 1px solid#e9e9e9;float:right;margin:0;padding :0px;background: #f9f9f9;}

#s {height:20px;border:1px solid #F1F1F1;background:#FFF;width:216px;float:left;

padding-top:6px;padding-left:8px;margin: 5px 0 0 7px;}

#searchsubmit {float:left;margin-top:5px;padding:0;}

HTML Kodu.

Arama formumuzu kenar çubuğuna en üste eklemek için blog’uğunuzun kaynak kodları arasında

etiketini bulun ve altta bulunan HTML kodlarını kopyalayıp bu etiketin hemen altına gelecek şekilde yapıştırın.

Blog'ta Ara

file:///C:/Documents%20and%20Settings/Aceer/Desktop/Test/Gon.png" type="image" value="">