Blogger Renkli Popüler Yayınlar Eklentisi

Merhaba Arkdaşlar Size Bügün Yeni Kullanmaya Başladığım Renkli Popüler Eklentisini Anlatıcağım Başlıyalım.

Not: İsterseniz Renkli Popüler Eklentisinin Arka Planını Değiştirebilirsiniz Renk kodlarına burdanulaşabilirsiniz.

İlkbaş Şablon Sonra HTML Düzenle Sonra Aşağıdaki Kodu buluyoruz.

]]></b:skin>

Kodunu bulalım hemen üstüne aşağıdaki kodu ekleyelim ve kaydedelim.

 #PopularPosts1 ul{margin:0;padding:0;list-style-type:none} #PopularPosts1 ul li{position:relative;margin:5px 0;border:0;padding:10px} #PopularPosts1 ul li:first-child{background:#33c9f7;} #PopularPosts1 ul li:first-child:after{content:""} #PopularPosts1 ul li:first-child + li{background:#33c9f7;} #PopularPosts1 ul li:first-child + li:after{content:""} #PopularPosts1 ul li:first-child + li + li{background:#33c9f7;} #PopularPosts1 ul li:first-child + li + li:after{content:""} #PopularPosts1 ul li:first-child + li + li + li{background:#33c9f7;} #PopularPosts1 ul li:first-child + li + li + li:after{content:""} #PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;} #PopularPosts1 ul li:first-child + li + li + li + li:after{content:""} #PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;} #PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:""} #PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;} #PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:""} #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{position:absolute;top:20px;right:-15px;border-radius:50%;background:#fff;width:0px;height:0px;line-height:1em;text-align:center;font-size:28px;color:#fff} #PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:40px;height:40px} #PopularPosts1 ul li a{font-size:12px;color:#808080;text-decoration:none} #PopularPosts1 ul li a:hover{color:#656565;text-decoration:none} #PopularPosts1 img { width:42px; height:42px; border: 1px solid #ddd; padding:0; } #PopularPosts1 li{ list-style-image:none; list-style:none; }