• HTML'e Paylaşım Butonu Ekleme
    18.09.2024 - 0 Comments
     HTML'e paylaşım butonu eklemek, içeriğinizi sosyal medyada yaymak ve sitenizin görünürlüğünü artırmak…
Home » » Blogger Özel Popüler Yayın Eklentisi

Blogger Özel Popüler Yayın Eklentisi

Written By Yazarlife on 10 Temmuz 2019 Çarşamba | Temmuz 10, 2019

Sponsor Siteler* Güncel Blog Yazıları ( Blog Radikal )
* Geniş Kod Arşivi ( Sitene Kod Ekle )
* Şarkı Sözleri ( Sitene Yazılar )
* Deneme Yazıları ( Yazar Edebiyat )
* Sağlık, Moda, Kadın Yazıları ( Yazar Haberi )

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.

Fjords


* İ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...


* Sayfa Yazarı: Murat Marti 
* Diğer Kaynaklar: GEMİNİ - Google Yapay Zeka. CHATGPT - Copilot
* Fotoğraflar: Pixabay ve Pexels Ücretsiz Fotoraflardan Alınmıştır...

NOT: Sitede çalışmayan kodları, o yazının altında ki yorum kutusundan bize yazınız.



0 Comments:

Yorum Gönder

Toplam Konu
128
Toplam Yorum
0
  • Yeni iPhone 16 Serisi: İnovasyonun Zirvesi
    22.09.2024 - 0 Comments
    Yeni iPhone 16 SerisiYeni iPhone 16 Serisi: İnovasyonun ZirvesiApple'ın en yeni amiral gemisi serisi olan…
  • Blogger Özel Popüler Yayın Eklentisi
    10.07.2019 - 0 Comments
    Blogger blogspottan kurmuş olduğunuz sitenizin popüler yayınlar kısmı hoşunuza gitmeyebilir ve bunu nasıl…
  • Sitene Kaydırma Çubuğu Scrollbar Ekleme
    07.11.2016 - Comments Disabled
    Sitene Kaydırma Çubuğu Scrollbar Ekleme. Yazılarınızı yayınladığınız sayfalarda fazla yer kaplamaması için…
  • Blogger renkli son yazılar kodu
    26.06.2020 - 0 Comments
    Blogger sitenizle uyumlu renkli son yazılar kodunu paylaşacağım. Bu kodu istediğiniz bir gadget kısmına…
  • Link verme kodu html
    16.06.2019 - 0 Comments
    Bu yazımda size yazınıza nasıl link verirsiniz? onu kısa ve kolay bir HTML koduyla anlatacağım. Bir bağlantı…
  • Sonic vs Aslan Kral: Gişenin gerçek kralı kim olacak?
    29.12.2024 - 0 Comments
     Sonic ve Aslan Kral gibi farklı türlerde ve hedef kitlelere hitap eden iki filmin gişe başarısını…