![]() |
* İ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...
0 Comments:
Yorum Gönder