Blogger Özel Oval Popüler Yayın Eklentisi

Blogger, keskin köşeli kare resimli Popüler Yayın görüntüsünü, oval köşe, yuvarlak resim ve sol tarafında ok veya gif icon eklentisi ...

...

Blogger, keskin köşeli kare resimli Popüler Yayın görüntüsünü, oval köşe, yuvarlak resim ve sol tarafında ok veya gif icon eklentisi ile değiştirebilirsiniz. Blogger’un en önemli gadgetler serisinden biri popüler yayınlar eklentisidir. Ancak zaman zaman gadgetlerimizde değişiklik yapmak isteriz. Bu yazımızda Blogger’un Popüler yayınlar gadget eklentisine küçük bir CSS kodu ekleyerek, yazı linkinizi işaret eden yanıp sönen gif resmi veya düz bir ok ekleyip, diktörgen görünümünü oval köşeli, yazı resimlerimizi de yuvarlak bir daire içine alacağız. Tüm yapacağımız işlem blogunuza yük getirmeyecek küçük bir CSS kodunun eklenmesinden ibararettir.

CSS kodu eklemek bu kadar zormudur ?

CSS kodu eklemek çok kolaydır. Yeni blog kuran arkadaşların, Html kodlarından çekinmemeleri için iki tür CSS kodu ekleme konusunda biraz bilgi verelim.

1. Blogger, Şablon kodlarına eklenen kodlar

2. Blogger, kumanda panelinden eklenen kodlar.

Blogger Popüler yayınlarımızın görünümünü değiştirecek olan CSS kodlarımızı 2. madde seçimimizle hiç çekinmeden şablon kullanmadan blogunuzun yedeğini almadan nasıl ekleyeceğiz aşağıda adım adım takip edelim.

1. Blogger kumanda paneline giriş yapıyoruz.

2. Şablon → Özelleştir → Gelişmiş ayarlar, tıklıyoruz.

3. Dikey kaydırma çubuğu aşağı indirin CSS ekle ismine tıklayın.

4. Daha önceden eklenen kodlarınız varsa en alt kısma aşağıdaki kodu ekleyin ve enter çekin. Önizlemenin değiştiğini göreceksiniz.

Not: CSS kodlar özel olarak sizin için sıkıştırılmıştır.Tekrar sıkıştırma ile uğraşmayın.

.popular-posts ul{padding-left:0}
.popular-posts ul li{background:#FFF url(http://1.bp.blogspot.com/-8_7zPyuaiiU/Ut_gcjxMXlI/AAAAAAAAKbM/y5RmJ2eBfGc/s1600/widget-list.png) no-repeat scroll 5px 10px;list-style-type:none;border:1px solid #ddd;border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px;margin:0 0 5px;padding:5px 5px 5px 20px !important}
.popular-posts ul
li:hover{border:1px solid #6BB5FF}
.popular-posts ul
li a:hover{text-decoration:none}
.popular-posts .item-thumbnail img{webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;-webkit-box-shadow:0 1px 3px rgba(0,0,0,.4);-moz-box-shadow:0 1px 3px rgba(0,0,0,.4);box-shadow:0 1px 3px rgba(0,0,0,.4)}

Özelleştirme :
→ Yukarıda verilen kod içinde, turuncu ok linki bulunmaktadır. →
→ Aşağıda verilen link mavi renkli gif iconuna aittir.
→ Yukarıda sarı ile işaretlenen yerdeki resim linkini değiştirerek arzu ettiğiniz gibi kullanabilirsiniz.
Tavsiye : Resim linklerini kendi picasa dosyanıza kaydedip kullanmanız en doğru çalışma şeklidir.
Mavi renkli yanıp sönen gif ok resim linki : 

https://lh6.googleusercontent.com/-Y5fzV3U_DNU/UImeh5JJUqI/AAAAAAAAKtU/lQ0f0w1caKw/s10/yol.gif

Turuncu ok renkli görsel

Blogger popüler yayınlarınıza hareketli gif gadget görüntüsünü bozmadan yazı linklerinin soluna hareketli mavi ok simgeli gif resmini eklemek için bağlantı linkini inceleyin.