Blogger Özel Oval Popüler Yayın Eklentisi

Blogger Popüler Yayın Eklentisine ok resmi ekle
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
Turuncu ok resimli popüler yayınlar eklentisi
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.

Bu blogdaki popüler yayınlar

Paint Net ile Resim arka plan Görüntüyü Şeffaf Yapma

Windows 10 Denetim Masası Komutlarına Kısa Yoldan Ulaşma

Windows İşletim Sistemi 32 Bit ve 64 Bit Arasındaki Fark

Blogger Açılır Menü Oluşturma

Facebook Candy Crush Saga Oyunu Çalışmıyor Çözüm

Paint ile Resim Boyutlandırma Seo

Windows 10 ve 8.1’de Oturum Parolasını Kaldırma

Aynur Nur - Acı Kaybımız

Windows Update 80240016 Hatasını Düzeltme

D-Smart Web İnternet Bağlantı Sorun ve Çözüm Ayarları