HTML Notlarım

Blogger blogspottan kurmuş olduğunuz sitenizin popüler yayınlar kısmı hoşunuza gitmeyebilir ve bunu nasıl değiştiririm? gibi bir düşünceye kapılabilirsiniz, işte bu yazımda size iki adet popüler yazılar eklentisi kodu vereceğim. Kod bilginiz olmasa bile bu CSS kodlarını kolayca sitenize ekleyebilirsiniz. Adım adım nasıl yaparım? konusunu anlatayım.

* İlk önce Blogger kumanda paneline giriş yapın,
* Sitenizde popüler yayınlar widgeti kurulu değilse, onu Yerleşim yazan yere gelip bir gadget kısmına tıklayıp popüler yayınlar kısmını aktif hale getirin,
* Daha sonra Tema kımına tıklayıp,
* Açılan sayfada Özelleştir butonuna tıklayın,
* Gelişmiş kısmına gelip, kaydırma çubuğunu en alta kadar sürükleyip CSS yazan yere tıklayın,
* Açılan sayfaya verdiğim kodlardan birini kopyalayıp yapıştırın,
* Yukarıda sağda bulunan Bloğa Uygulayın butonuna tıklayıp işlemi bitirin,
* Blog sayfanızı yenilediğinizde popüler yayınlar widgetinin değiştiğini göreceksiniz. Kolay gelsin...

1. Kod:

.popular-posts ul{padding-left:0}
.popular-posts ul li{background:#FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDR2WHVEq7r6N-F5cO9CSFH59B3j1druvQ0vIuTR20cFWdQBdbPAPh_5CCXLC06CCv8QkixPbGT4seD55fp7gb1XT_3G976gfdRBuvZUPzdbTO7iV3-qd3wtEmwA9CiAzd8_p6pvQFMcE/s1600/widget-list.png) no-repeat scroll 5px 10px;list-style-type:none;border:1px solid #ddd;border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px;margin:0 0 5px;padding:5px 5px 5px 20px !important}
.popular-posts ul
li:hover{border:1px solid #6BB5FF}
.popular-posts ul
li a:hover{text-decoration:none}
.popular-posts .item-thumbnail img{webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;-webkit-box-shadow:0 1px 3px rgba(0,0,0,.4);-moz-box-shadow:0 1px 3px rgba(0,0,0,.4);box-shadow:0 1px 3px rgba(0,0,0,.4)}

2. Kod:

#PopularPosts1{width:100%;margin:auto;border:1px solid #eee;padding:20px}
#PopularPosts1 h2{font-size:18px;margin:0;padding:0 0 10px 0}
#PopularPosts1 ul{counter-reset:popularcount;margin:0;padding:0}
#PopularPosts1 .widget-content ul li{border-top:1px solid #ddd;overflow:hidden;padding:10px 0;position:relative;list-style:none}
#PopularPosts1 li:last-child>.item-content{padding:0 0}
#PopularPosts1 .item-thumbnail::after{background:#ff3c37;border:3px solid #eee;border-radius:50%;color:#fff;content:counter(popularcount,decimal);counter-increment:popularcount;height:30px;left:80px;font-weight:bold;list-style-type:none;position:absolute;text-align:center;top:-5px;width:30px;z-index:4}
#PopularPosts1 .item-thumbnail{background:#222;border-radius:3px;float:left;width:100px;height:100px;margin:0 15px 0 0;position:relative}
#PopularPosts1 .item-thumbnail a{clip:auto;display:block;height:auto;overflow:hidden}
#PopularPosts1 .item-thumbnail img{border-radius:3px;height:100px;padding-right:0;object-fit:cover;opacity:0.9;position:relative;width:100%;object-fit:cover}
#PopularPosts1 .item-thumbnail img:hover{opacity:1;transition:all 0.25s ease 0s}
#PopularPosts1 .item-title{font-weight:bold;padding:5px 0}
#PopularPosts1 .item-title a{color:#222;text-decoration:none}
#PopularPosts1 .item-title a:hover{color:#ff3c37}
#PopularPosts1 .item-snippet{display:none}

Örnek Resimler: 1. Resim ilk Kodun görseli, 2. Resim diğer kodun görselidir...