12 Haziran 2016 Pazar

Blogger Sidebar Çift Renkli Gadget Başlık İsmi Eklentisi

Blogger Sidebar gadget başlık ismi arka plan rengini çift renkler ile değiştirerek okuyucu dikkatini çekebileceğiniz Sidebar Çift Renkli Gadget Başlık Eklentisi.
Blogger Sidebar gadget başlık ismi arka plan rengini çift renkler ile değiştirerek okuyucu dikkatini çekebileceğiniz Sidebar Çift Renkli Gadget Başlık Eklentisi. Blogger’un varsayılan gadget serilerinden olan, “Popüler yayınlar, Etiketler, Google + Followers, veya özel eklediğiniz eklentiler için yazdığınız başlık ismini diktörtgen içinde renkli ve otomatik değiştiren CSS kod eklentisi ile istediğiniz renkleri değiştirerek kullanabilirsiniz.

Sidebar Renkli Gadget Başlık eklentisi, sadece CSS kodlarından ibaret olup, blogger şablon stil kodlarına ekleyerek kullanmak çok kolaydır. Blog temasına özen gösteren tüm blogger kullanıcılarının bu yeni eklentiyi seveceklerine eminim.

Eklenti iki ayrı renklerden oluşmaktadır. Gadget başlık ismini sararak diktörtgen bir çerçeve ve hemen alt kısımda daha ince ve okuyucu dikkatini çekebilecek farklı bir renkden oluşmaktadır.

Eklentinin canlı örneğine, Sidebar da Gadget başlık ismine bakarak Guney59 Paylaşım blogum da canlı olarak görebilirsiniz.

Eklentinin, ikinci rengini abartılı göstermek için CSS kodlarında oynama yaptım. Aşağıda verilen resimde abartılı ve normal görünüm resimleri inceleyin.

Normal görünümlü Sidebar Çift Renkli Gadget Başlık Eklenti resmi : 


Abartılı görünümlü Sidebar Çift Renkli Gadget Başlık Eklenti resmi : 

Sidebar Çift Renkli Gadget Başlık İsmi Eklenti Kurulumu :

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

2. Blog kodlarınızın bulunduğu, Şablon → Html’yi düzenle, yolunu izlyerek şablon kodlarınızı açın. 


3. Ctrl + F arama özelliğini kullanarak aşağıdaki etiketi bulun.
]]></b:skin> 
4. Yukarıda verilen stil yapılandırıcı etiketi bulduğunuz da hemen üst kısmına aşağıda verilen CSS kodlarını ekleyin. Blogunuzu kaydedin.
/* --- Sidebar Content Çift Renkli Gadget Başlık İsmi Eklentisi adnanguney.com --- */
.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: #2E2E2E ;border-bottom:2px solid #FFA800;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() 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}

Sidebar Çift Renkli Gadget Başlık Eklentin Özelleştirilmesi :

1. Eklenti özelleştirmesi için çok fazla yapmanız gereken bir işlem yoktur. Öncelikle gadget başlık ismi arka plan rengini temanızın renk özelliklerine göre değiştirebilirsiniz.

background: #2E2E2E : Mavi ile belirtilen satırdaki “#2E2E2E” onaltılık renk kodunu temanızın arka plan renginin farklı olmasını istiyorsanız değiştirin. Renk değişimleri ile ilgili aşağıdaki bağlantı linklerinden yararlanabilirsiniz.

Hex Color Renk Bulucu

Hex Renk Bulucu Kullanımı HCF

2. bottom:2px : Kırmızı ile renklendirilmiş satır, başlık ismi arka plan resminin altında çıkan ince ikinci rengin kalınlığını ayarlamanıza yardımcı olacaktır. 2px. değerini 3px. yaparak daha dikkat çekici yapabilirsiniz. Zevkinize göre deneme yaparak uygun kalınlığı belirleyin.

3. solid #FFA800 : Mavi ile renklendirilmiş satır, başlık ismi arka plan resminin altında çıkan ince ikinci rengi oluşturmaktadır. Zevkinize göre deneme yaparak bu rengi temanızın renk özelliğine göre değiştirin.

Yukarıda anlatılan eklentiler gibi daha fazla uygulamaları yukarıda açılır menü çubuğunu inceleyerek blog temanızın tasarımını düzenleyebileceğiniz yazılara da göz atabilirsiniz.
Disqus Yorumları Yükle

0 yorum