Menu

Blogger Renkli Etiketler ve Popüler Yayınları Düzenleme

Blogger Renkli Etiketler ve Popüler Yayınları Düzenleme
Blogger için hazırlanmış iki adet kaliteli eklenti olan Renkli Etiketler ve Popüler Yayınları sitenizin görüntü kalitesine oldukça canlılık katacaktır.

Blogger Popüler Yayınlar CSS eklentisi klasik solda olan resim ve yazıları değiştirerek sağ tarafa alınarak değiştirilecektir.

Blogger Etiketler için çok kaliteli renkli Etiket listesine dayalı kategoriler oluşturmanız ve sidebar ve footer alanınıza canlılık katmanız için CSS kodlarına sahip bu eklenti sitenize kaliteli canlı bir görüntü sağlayacaktır.

Blogger kumanda panelinize giriş yaptıktan sonra kodlarınız içindeki css kodların bulunduğu yer aşağıdaki Popüler yayınlar kodunu ekliyoruz.Tema şablonunda bu kodu
bulduktan sonra üstüne aşağıdaki css kodlarını ekliyorsunuz.
Daha önce yüklenmiş olan CSS popüler yayınlar kodunuzu sildikten sonra bu kodu ekleyiniz.Kod çakışmasından dolayı kod çalışmaya bilir.

Not:Ne olur ne olmaz temanızın yedeğini almayı unutmayınız.

Blogger Popüler Yayınlar CSS Kodları


Blogger Renkli Etiketler ve Popüler Yayınları Düzenleme


/* CSS Popular Post seomektebi.com*/
.item-snippet {display:none;}
.PopularPosts .item-thumbnail {float:right;margin:0;}
#PopularPosts1 h2,#PopularPosts2 h2 {margin:0;}
.PopularPosts .popular-posts ul li{list-style:none;overflow:hidden;padding:0;margin:10px 0;}
#PopularPosts1 .popular-posts,#PopularPosts2 .popular-posts {position:relative;}
.PopularPosts ul {counter-reset:trackit;}
.PopularPosts .popular-posts ul li a {color:#444;transition:all .3s}
.PopularPosts .popular-posts ul li a:hover {color:#e1a66c}
.PopularPosts .item-title{display:table-cell;line-height:normal;text-overflow:ellipsis;padding:0 10px 0 0}
.PopularPosts .item-thumbnail img {display:block;float:left;width:80px;height:auto;padding:0;}
.popular-posts ul {padding-left: 0;}
#footer-wrapper .popular-posts ul li:nth-child(n+4) {display:none;}
#footer-wrapper .popular-posts ul li {border-bottom-color:#4f4f4f;background:#262525;}
#footer-wrapper .popular-posts ul li:nth-child(3) {border-bottom:0;}


Blogger Renkli Etiket Yayınlar CSS Kodları


Blogger Renkli Etiketler ve Popüler Yayınları Düzenleme

Tema kodlarınız arasında daha önce yüklenmiş olan CSS label kodlarını siliniz.Label etiket demektir pek çok yerde çıkabilir deneme yanılma yolu ile sadece etiket gadged label kodlarınızı siliniz veya hiç silmeden aşağıdaki kodu
kodunun üstüne ekleyebilirsiniz.Aşağıdaki blogger css kodları sidebar ve footer aynı anda kullanılmaktadır,ben footerde kullanmak istemiyorum derseniz footer-wrapper ile başlayan kodları siliniz.
/* CSS label seomektebi.com */
.widget-content.cloud-label-widget-content {display:inline-block;width:100%;}
.label-size-1,.label-size-2,.label-size-3,.label-size-4,.label-size-5 {font-size:100%;opacity:1}
.cloud-label-widget-content{text-align:left;padding:10px;}
.label-count {white-space:nowrap;display:inline-block;}
#sidebar-wrapper .widget-content.list-label-widget-content {padding:0;}
#sidebar-wrapper .Label li{position:relative;background:#fff;color:#444;padding:0;margin:0;text-align:left;width:100%;border:1px solid #eaeaea;border-bottom:0;transition:all .3s ease-out}
#sidebar-wrapper .Label li:first-child{border-top:0;}
#sidebar-wrapper .Label li:last-child{border-bottom:0;}
#sidebar-wrapper .Label li:hover {background:#fff;color:#e1a66c;}
#sidebar-wrapper .Label li:before {content:"";position:absolute;width:0;height:100%;background:#4fafe9;transition:all .2s ease-in-out;}
#sidebar-wrapper .Label li:hover:before {width:100%;}
#sidebar-wrapper .Label li a{padding:0 0 0 20px;display:block;position:relative;line-height:42px;color:#787878;text-decoration:none;transition:all .3s ease-out}
#sidebar-wrapper .Label li a:hover {color:#fff;}
#sidebar-wrapper .Label li span{float:right;height:42px;line-height:42px;width:42px;text-align:center;display:inline-block;background:#4fafe9;color:#FFF;position:absolute;top:0;right:0;z-index:2}
#sidebar-wrapper .Label li:nth-child(1) span,#sidebar-wrapper .Label li:nth-child(1):before,#sidebar-wrapper .Label li:nth-child(7) span,#sidebar-wrapper .Label li:nth-child(7):before {background:#ca85ca;}
#sidebar-wrapper .Label li:nth-child(2) span,#sidebar-wrapper .Label li:nth-child(2):before,#sidebar-wrapper .Label li:nth-child(8) span,#sidebar-wrapper .Label li:nth-child(8):before {background:#e54e7e;}
#sidebar-wrapper .Label li:nth-child(3) span,#sidebar-wrapper .Label li:nth-child(3):before,#sidebar-wrapper .Label li:nth-child(9) span,#sidebar-wrapper .Label li:nth-child(9):before {background:#61c436;}
#sidebar-wrapper .Label li:nth-child(4) span,#sidebar-wrapper .Label li:nth-child(4):before,#sidebar-wrapper .Label li:nth-child(10) span,#sidebar-wrapper .Label li:nth-child(10):before {background:#f4b23f;}
#sidebar-wrapper .Label li:nth-child(5) span,#sidebar-wrapper .Label li:nth-child(5):before,#sidebar-wrapper .Label li:nth-child(11) span,#sidebar-wrapper .Label li:nth-child(11):before {background:#46c49c;}
#sidebar-wrapper .Label li:nth-child(6) span,#sidebar-wrapper .Label li:nth-child(6):before,#sidebar-wrapper .Label li:nth-child(12) span,#sidebar-wrapper .Label li:nth-child(12):before {background:#607ec7;}
#sidebar-wrapper .label-size{position:relative;display:block;float:left;margin:0 4px 4px 0;font-size:13px;transition:all 0.3s;}
#sidebar-wrapper .label-size a{background:#fff;background-image:linear-gradient(to bottom,rgba(255,255,255,1)0,rgba(250,250,250,1)70%,rgba(246,246,246,1)99%,rgba(246,246,246,1)100%);display:inline-block;color:#444;padding:5px 8px;font-weight:400;border:1px solid #e3e3e3;background-repeat:repeat-y;background-size:100% 90px;background-position:0 -30px;transition:all .3s}
#sidebar-wrapper .label-count{opacity:0;visibility:hidden;font-size:85%;display:inline-block;position:absolute;top:-10px;right:-10px;background:#4fafe9;color:#fff;white-space:nowrap;padding:0;width:22px;height:22px;line-height:22px;border-radius:100%;text-align:center;z-index:1;transition:all .3s}
#sidebar-wrapper .label-size:hover .label-count{opacity:1;visibility:visible;top:-5px}
#sidebar-wrapper .label-size a:hover{color:#444;background-image:linear-gradient(to bottom,rgba(255,255,255,1)0,rgba(250,250,250,1)18%,rgba(255,255,255,1)99%,rgba(255,255,255,1)100%);background-position:0 0}
#footer-wrapper .Label li {background:transparent;float:left;padding:5px;margin:0;text-align:left;width:45%;transition:all .3s ease-out;}
#footer-wrapper .Label li:hover {color:#e1a66c;}
#footer-wrapper .Label li a {color:#aaa;transition:all .3s ease-out;}
#footer-wrapper .Label li a:hover {color:#e1a66c;}
#footer-wrapper .Label li span{float:right;color:#aaa;margin:0;padding:4px 6px;text-align:center;font-size:14px;font-weight:400;border-radius:2px;}
#footer-wrapper .Label li span:hover{color:#e1a66c}
#footer-wrapper .label-size{position:relative;background:#3f414a;color:#fff;display:block;float:left;margin:0 1px 1px 0;font-size:14px;transition:all 0.4s;}
#footer-wrapper .label-size a {display:inline-block;color:#fff;padding:6px 8px;font-weight:400;}
#footer-wrapper .label-size a:hover {background:#23242a;color:#fff;transition:all 0.2s;}
font-style:normal;font-weight:normal;text-decoration:none;color:#fff;transition:initial;}
#footer-wrapper .label-size:hover, #footer-wrapper-inner .label-size:hover{background:#e1a66c;color:#fff;}
#footer-wrapper .label-count{opacity:0;visibility:hidden;font-size:85%;display:inline-block;position:absolute;top:-10px;right:-10px;background:#fb4646;color:#fff;white-space:nowrap;padding:0;width:22px;height:22px;line-height:22px;border-radius:100%;text-align:center;z-index:1;transition:all .3s}
#footer-wrapper .label-size:hover .label-count{opacity:1;visibility:visible;top:-5px}


Kodların içinde bulunan örnek:#e1a66c şeklindeki renk kodları ile uğraşarak istediğiniz renk değişimlerini yapabilirsiniz.

Renk Kodlarına SEO Mektebi Renk Kodları sayfasından ulaşabilirsiniz.



Sonraki Yazılar
« Prev Post
Önceki Yazılar
Next Post »

Henüz Yorum Yapılmamış " Blogger Renkli Etiketler ve Popüler Yayınları Düzenleme "

Önerilen Yazı
×