Renkli Popüler Yayınlar Eklentisi

Amatör seviyede blog tasarımı ile uğraşan biri olarak bloğumun tasarımını kendim yapmaya, fazla aşırıya kaçmadan eklentilerle zenginleştirmeye çalışıyorum. Bu noktada internet bilgi çöplüğüne dönmüş vaziyette. Ortalık yüzlerce çalışmayan kod, kırık link ya da anlatımı yetersiz post ile dolu. Bu sayfalarda sizlere de yardımcı olması amacı ile sadece kendi bloğumda kullandığım eklentilerin kodlarını, html'de minimum anlayan birinin kelimeleri ile anlatmaya çalışacağım.


Bu sayfada yine bloğumda gördüğünüz “Renkli Popüler Yayınlar Eklentisi” nin nasıl kullanılacağını anlatacağım.
İşimiz bittiğinde manzara şuna benzeyecek:


Başlarken Şablon> HTML' yi Düzenle adımlarının ardından Ctrl+F tuşlarına basıp ]]></b:skin>
  kodunu aratıyoruz. Bulduğumuz kodun hemen üzerine alttaki kodu yapıştırıyoruz. 


/http://ucalisan.blogspot.com.tr/renkli yazı eklentisi code start*
#PopularPosts1 ul li a:hover{color:#fff;text-decoration:none}
#PopularPosts1 ul li a {-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; color: #333333; display: block; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18px; margin: 0px 40px 0px 0px; min-height: 30px; orphans: 2; padding: 0px; text-align: -webkit-auto; text-decoration: none !important; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;}
#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:30px;background:transparent;padding:0;width:51px;height:51px}
#PopularPosts1 ul li:first-child:after,
#PopularPosts1 ul li:first-child + li:after,
#PopularPosts1 ul li:first-child + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{position:absolute;top:10px;right:5px;border-radius:50%;border:2px solid #ccc;background:#353535;-webkit-box-shadow:0px 0px 5px #000;-moz-box-shadow: 0px 0px 5px #000;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li {background:#DF01D7;width:89%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#B041FF;width:89%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li +li{background:#F52887;width:89%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{content:"10"}
#PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:89%}
#PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"}
#PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:89%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}
#PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:89%}
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
#PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:89%}
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
#PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:89%}
#PopularPosts1 ul li:first-child + li + li:after{content:"3"}
#PopularPosts1 ul li:first-child + li{background:#ff764c; width:89%}
#PopularPosts1 ul li:first-child + li:after{content:"2"}
#PopularPosts1 ul li:first-child{background:#ff4c54 ;width:89%}
#PopularPosts1 ul li:first-child:after{content:"1"}
#PopularPosts1 ul{margin:0;padding:0px 0;list-style-type:none}
#PopularPosts1 ul li{position:relative;margin:6px 0;border-radius:25px 0px 25px 0px;border:2px solid #f7f7f7;-webkit-box-shadow:3px 3px 3px #000;-moz-box-shadow: 3px 3px 3px #000;padding:10px}
/http://ucalisan.blogspot.com.tr/renkli yazı eklentisi code end*


Dikkat!!! Bu kodun çalışması için daha önceden bloggerin kendi popüler yayınlar eklentisinin eklenmiş olması gerekir. Eğer ekli değilse eklemeyi unutmayınız.  

Renkli Populer Yayınlar Eklentisi , Blogger Renkli Populer Yayınlar Eklentisi , Blogger Renkli Populer Yayınlar , Renkli Populer Yayınlar Eklentisi Nasıl Eklenir , Renkli Populer  Eklentisi , Blogger Populer Yayınlar Eklentisi  BloggerBlogger EklentiBlogger EklentileriBlogger Eklentisi,PopülerRenkliYayınlar 

0 yorum:

Yorum Gönder

 
UA-57355180-1