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.
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.
Not:Ne olur ne olmaz temanızın yedeğini almayı unutmayınız.
Blogger Popüler Yayınlar CSS Kodları

/* 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ı

/* 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.
Renk Kodlarına SEO Mektebi Renk Kodları sayfasından ulaşabilirsiniz.

Sonraki Yazılar
« Prev Post
« Prev Post
Önceki Yazılar
Next Post »
Next Post »
Henüz Yorum Yapılmamış " Blogger Renkli Etiketler ve Popüler Yayınları Düzenleme "