Blogger Sidebar Siyah Sekme Başlık Eklentisi

Blogger , Ana sayfa’da bulunanan sidebar tüm gadgetlerin başlık sekmesini Siyah renk , sidebar içerik bağlantı Url’sini vurgulayan sol ta...

...

Blogger, Ana sayfa’da bulunanan sidebar tüm gadgetlerin başlık sekmesini Siyah renk, sidebar içerik bağlantı Url’sini vurgulayan sol tarafa konumlandırılmış küçük mavi ok icon’u ile gösterilmesini anlatan öğreticiler. Blogger’un kendi temasında, CSS kodlarını kullanarak özel tasarlanmış şablonlarda gördüğünüz renk’li gadget sekme başlıklarını kullanabiliriz. Blog yazılarımda daha önce de belirtiğim gibi blogger’un bizlere sunduğu hazır kendi şablonları ile Tema tasarımı’nın nasıl yapılacağını açıklamış, ayrıca menü başlık kısmına Temalar ve Tema tasarım ismi ile kategori oluşturmuştum.

Blogger’un kendi şablonunu kullanarak hiçbir özel tasarıma gerek duymadan tamamen size ait kişisel yapılandırılmış temanızı kullanmak için blog’umun başlık çubuğunda bulunan Tema tasarım ismine tıklayarak blogger tema'nızı yapılandırın.

Blogger, Tema tasarımı ile ilgili yazılarımda anlaşılmayan yerleri yorumlar bölümünden sorarak yardım alabilirsiniz. Blogger gadget başlık sekmelerini siyah, belirleyici vurgulama ok icon’unu mavi nasıl yapacağız ve hangi CSS kodlarını kullanacağız aşağıda adım adım inceleyelim.

Canlı DEMO

Not: Yazılarda anlatılan konu resim ve renkler, test blogunda denenerek yayınlandığından  zaman zaman değişim göstererek sizlere sunulmaktadır.

1. Blog’unuzu her ihtimale karşı yedeğini alın.

2. Blog kodlarımızın bulunduğu Şablon→ Html’yi düzenle’i açın.

3. Ctrl+F arama özelliği ile aşağıdaki kodu bulun.

]]></b:skin>

4. Yukarıda bulduğunuz kodun hemen üstüne aşağıdaki kodları ekleyin.

/* Sidebar Content----------------------------------------------- */
.sidebar{margin:0 0 10px 0;font-size:13px;color:#000000;}
.sidebar a{text-decoration:none;color:#000000;}
.sidebar a:hover{text-decoration:none;color:#4FC4F6;}
.sidebar h2, h3.widgettitle{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgD9bHkXC5ilCCprXSPqOuvpopgwsBWV1lBov29j4F9FiZANPyxJ0xgFNrml9EC8DT449IKsZ3lBMdJfHxX5JJnfxqdDUn8WWAbna7-ygrgHL-YXaLFPzQFzs-V2EVhEPReqxVAjgdUmCT_/s1600/widgettitle-bg.png) left top repeat-x;border-bottom:2px solid #4FC4F6;color:#FFF;font-size:16px;line-height:16px;font-family:Oswald, sans-serif;font-weight:normal;text-decoration:none;text-transform:none;margin:0 0 10px;padding:10px 10px 9px;}
.sidebar ul{list-style-type:none;list-style:none;margin:0px;padding:0px;}
.sidebar ul li{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcK93b1H8AdI6M8ekiZVSKdw1t-h-BppCxK0GPIx53uvZXryHDQ-0QXxqxyuehNuWuUvuDxOgOgqkfD97Au9sFqZ_Mn15YzsOFQ4rqDMHCK7rfQju4LWVzns8_4eAbt0LBk8axOIpNIaFf/s1600/widget-list.png) left 3px no-repeat;margin:0 0 8px;padding:0 0 9px 12px;}
.sidebar .widget{margin:0 0 15px 0;padding:0;color:#000000;font-size:13px;}
.main .widget{margin:0 0 5px;padding:0 0 2px}
.main .Blog{border-bottom-width:0}
.widget-container{list-style-type:none;list-style:none;margin:0 0 15px 0;padding:0;color:#000000;font-size:13px}

Özelleştirme :

1. Yukarıda 4. .sidebar h2 yazan yan kısımda bulunan linkimiz sekme başlık rengini değiştirir.

2. Yukarıda 6. .sidebar ul li yazan yan kısımda bulunan linkimiz sidebar sol tarafa küçük bir ok işareti ekler. Bu ok linkini değiştirip istediğinizi kullanabilirsiniz. 1. madde 4. .sidebar h2 kısmındaki linki değiştirseniz eklentiniz çalışmaz.

3. Sidebar da görülen ok işaretini istemiyor iseniz, bağlantı linkini silebilirsiniz.(Parantezler dahil silinecek. “()”) Ok işaretini halen görülüyor ise CRTL+Üstkarakter+R klavye tuşlarına basarak ön belleği yenilediğinizde ok işaratleri görülmeyecektir.

Ayrıca bakınız ⇒ Blogger Resim Linkleri Nasıl Alınır

                            → Blogger Sidebar Mavi Sekmeli Gadget Eklentisi

                            → Blogger Özel Oval Popüler Yayın Eklentisi

→ Yazı resmini sola otomatik yaslayan sağda devamını oku eklentisi