Adblock Algılandı

Lütfen reklam engelleyicileri devre dışı bırakarak bizi destekleyebilirsiniz.

Reklam engelleyicinizin pasif olduğundan emin olun. Daha fazla bilgi


Blogger sayfalarınızda eklediğiniz popüler yayın widgetini değiştirmek yada eklediğiniz popüler yayın widgetlerini renklendirmek için aşağıdaki adımları uygulamanız gerekmektedir. 
Öncelikle temanızın yedeğini almayı unutmayın.

Yapılması Gereken Adımlar:

1. Blogger yönetim paneline giriş yapın.
2. Tema > HTML'yi düzenle kısmına giriş yapın.
3. HTML kodlarına ulaştıktan sonra Ctrl+F ile CSS Popular kodunu arayın.
4. Eğer bu kodu bulamadıysanız şu PopularPosts kodu aratın.
5. Kodu </head> kodundan önce (kodun üstüne) yapıştırın.
5. Aşağıda örnek kaynak kodda gösterdiğim gibi kodu bulduysanız css kodunu istediğiniz css kodu ile değiştirin. 

Kodun doğru çalışması için temada önceden var olan popular post css
kodlarını kaldırarak uygulayın.

6. Daha sonra kodu isteğiniz seçenek ile değiştirin ve kaydet ile kaydedin.
7. HTML yönetim panelinden çıkarak ilgili sayfaya gidin ve popüler yayınlar widgetini kontrol edin. 
8. Yapmanız gereken bu kadar gerekli adımlarda sorun yaşıyorsanız yorum kısmında mutlaka belirtin.


1. Popüler Yayın Kodu:

 /* Popular Posts */
.PopularPosts .item-title{font-weight:500;font-size:14px;padding-bottom:0.5em}
.PopularPosts .widget-content{font-size:14px;padding:0}
.PopularPosts .widget-content ul li{padding:0;background:none}
.PopularPosts .item-title a{color:#333}
.PopularPosts .item-title a:hover{color:#ffa502}
.PopularPosts .item-snippet{height:40px;overflow:hidden;color:#555;line-height:1.4}
#PopularPosts1{display:block;position:relative;overflow:hidden;font-size:15px}
#PopularPosts1 ul{margin:0;padding:0;list-style-type:none}
#PopularPosts1 ul li{background:#fff;position:relative;padding:15px 15px 10px 15px;color:rgba(0,0,0,.8);border-bottom:1px solid rgba(0,0,0,0.08);transition:all .3s}
#PopularPosts1 ul li:first-child{border-top:0}
#PopularPosts1 ul li:last-child{border-bottom:0}
#PopularPosts1 ul li a{color:#000;display:block}
#PopularPosts1 ul li:hover a{color:#888}
#PopularPosts1 ul li:hover{background:#fafafa}
#PopularPosts1 ul li .item-thumbnail{margin:0 15px 0 0;float:left;border-radius:5px}
#PopularPosts1 ul li .item-thumbnail img{background:rgba(0,0,0,.1);border-radius:5px;opacity:.9;transition:all .3s}
#PopularPosts1 ul li:hover .item-thumbnail img{opacity:1}
2. Popüler Yayın Kodu:
/*Popular Posts*/
.popular-posts ul {padding: 0;border-radius: 2px;border: 0;box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); position: relative; overflow: hidden;}
.popular-posts ul li {box-sizing: border-box;list-style-type: none;margin: 0;padding: 10px 10px 10px 72px !important;min-height: 68px;line-height: 1.5rem;height: inherit; position: relative;}
.popular-posts ul li:nth-child(1) {background-color: #f44336;}
.popular-posts ul li:nth-child(2) {background-color: #e91e63;}
.popular-posts ul li:nth-child(3) {background-color: #9c27b0;}
.popular-posts ul li:nth-child(4) {background-color: #673ab7;}
.popular-posts ul li:nth-child(5) {background-color: #3f51b5;}
.popular-posts ul li:nth-child(6) {background-color: #2196f3;}
.popular-posts ul li:nth-child(7) {background-color: #03a9f4;}
.popular-posts ul li:nth-child(8) {background-color: #00bcd4;}
.popular-posts ul li:nth-child(9) {background-color: #009688;}
.popular-posts ul li:nth-child(10) {background-color: #4caf50;}
.popular-posts ul li:hover {background-color: #757575;}
.popular-posts ul li a {color: #FFF;text-decoration: none;}
.popular-posts ul li a:hover {color: #EEE;}
.popular-posts ul li img {width: 42px;height: 42px;position: absolute;padding: inherit;border-radius: 50%;overflow: hidden;left: 15px;border: 0;display: inline-block;vertical-align: middle;}

Blogger Popüler Yayınların Görünümünü Değiştirme


Blogger sayfalarınızda eklediğiniz popüler yayın widgetini değiştirmek yada eklediğiniz popüler yayın widgetlerini renklendirmek için aşağıdaki adımları uygulamanız gerekmektedir. 
Öncelikle temanızın yedeğini almayı unutmayın.

Yapılması Gereken Adımlar:

1. Blogger yönetim paneline giriş yapın.
2. Tema > HTML'yi düzenle kısmına giriş yapın.
3. HTML kodlarına ulaştıktan sonra Ctrl+F ile CSS Popular kodunu arayın.
4. Eğer bu kodu bulamadıysanız şu PopularPosts kodu aratın.
5. Kodu </head> kodundan önce (kodun üstüne) yapıştırın.
5. Aşağıda örnek kaynak kodda gösterdiğim gibi kodu bulduysanız css kodunu istediğiniz css kodu ile değiştirin. 

Kodun doğru çalışması için temada önceden var olan popular post css
kodlarını kaldırarak uygulayın.

6. Daha sonra kodu isteğiniz seçenek ile değiştirin ve kaydet ile kaydedin.
7. HTML yönetim panelinden çıkarak ilgili sayfaya gidin ve popüler yayınlar widgetini kontrol edin. 
8. Yapmanız gereken bu kadar gerekli adımlarda sorun yaşıyorsanız yorum kısmında mutlaka belirtin.


1. Popüler Yayın Kodu:

 /* Popular Posts */
.PopularPosts .item-title{font-weight:500;font-size:14px;padding-bottom:0.5em}
.PopularPosts .widget-content{font-size:14px;padding:0}
.PopularPosts .widget-content ul li{padding:0;background:none}
.PopularPosts .item-title a{color:#333}
.PopularPosts .item-title a:hover{color:#ffa502}
.PopularPosts .item-snippet{height:40px;overflow:hidden;color:#555;line-height:1.4}
#PopularPosts1{display:block;position:relative;overflow:hidden;font-size:15px}
#PopularPosts1 ul{margin:0;padding:0;list-style-type:none}
#PopularPosts1 ul li{background:#fff;position:relative;padding:15px 15px 10px 15px;color:rgba(0,0,0,.8);border-bottom:1px solid rgba(0,0,0,0.08);transition:all .3s}
#PopularPosts1 ul li:first-child{border-top:0}
#PopularPosts1 ul li:last-child{border-bottom:0}
#PopularPosts1 ul li a{color:#000;display:block}
#PopularPosts1 ul li:hover a{color:#888}
#PopularPosts1 ul li:hover{background:#fafafa}
#PopularPosts1 ul li .item-thumbnail{margin:0 15px 0 0;float:left;border-radius:5px}
#PopularPosts1 ul li .item-thumbnail img{background:rgba(0,0,0,.1);border-radius:5px;opacity:.9;transition:all .3s}
#PopularPosts1 ul li:hover .item-thumbnail img{opacity:1}
2. Popüler Yayın Kodu:
/*Popular Posts*/
.popular-posts ul {padding: 0;border-radius: 2px;border: 0;box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); position: relative; overflow: hidden;}
.popular-posts ul li {box-sizing: border-box;list-style-type: none;margin: 0;padding: 10px 10px 10px 72px !important;min-height: 68px;line-height: 1.5rem;height: inherit; position: relative;}
.popular-posts ul li:nth-child(1) {background-color: #f44336;}
.popular-posts ul li:nth-child(2) {background-color: #e91e63;}
.popular-posts ul li:nth-child(3) {background-color: #9c27b0;}
.popular-posts ul li:nth-child(4) {background-color: #673ab7;}
.popular-posts ul li:nth-child(5) {background-color: #3f51b5;}
.popular-posts ul li:nth-child(6) {background-color: #2196f3;}
.popular-posts ul li:nth-child(7) {background-color: #03a9f4;}
.popular-posts ul li:nth-child(8) {background-color: #00bcd4;}
.popular-posts ul li:nth-child(9) {background-color: #009688;}
.popular-posts ul li:nth-child(10) {background-color: #4caf50;}
.popular-posts ul li:hover {background-color: #757575;}
.popular-posts ul li a {color: #FFF;text-decoration: none;}
.popular-posts ul li a:hover {color: #EEE;}
.popular-posts ul li img {width: 42px;height: 42px;position: absolute;padding: inherit;border-radius: 50%;overflow: hidden;left: 15px;border: 0;display: inline-block;vertical-align: middle;}

Diğer Yayınlar

Bültenimize Abone Ol

Bildirimler

Disqus Logo