Blogger Renkli Popüler Yayinlar Eklentisi

Can sıkıntısından ne yapacağımı bilemedim. Bloglar üzerinde gezintiye çıktım farklı farklı kodlar ve eklentiler buldum ve onları sizinle paylaşmak istedim onlardan biride buydu. Blogunuza popüler yayınların derecesini gösterecek bir eklenti. Renkli ve janjanlı bir eklenti ama.

Hemen anlatımına geçeyim.

Kumanda Paneli > Şablon > HTML'yi Düzenle > Widget Şablonlarını Genişlet Yolunu takip edin.
CTRL+F yardımıyla aşadağıdaki kodu bulun.

/* Variable definitions
   ====================

Bulduğumuz kodun altına hemen aşağıdaki kodu ekliyoruz

<Group description="PopularPosts Backgrounds" selector="#PopularPosts1">
<Variable name="PopularPosts.background.color1" description="background color1" type="color" default="#fa4242" value="#ff4c54"/>
<Variable name="PopularPosts.background.color2" description="background color2" type="color" default="#ee6107" value="#ff764c"/>
<Variable name="PopularPosts.background.color3" description="background color3" type="color" default="#f0f" value="#ffde4c"/>
<Variable name="PopularPosts.background.color4" description="background color4" type="color" default="#ff0" value="#c7f25f"/>
<Variable name="PopularPosts.background.color5" description="background color5" type="color" default="#0ff" value="#33c9f7"/>
<Variable name="PopularPosts.background.color6" description="background color6" type="color" default="#ff0" value="#7ee3c7"/>
<Variable name="PopularPosts.background.color7" description="background color7" type="color" default="#ff0" value="#f6993d"/>
</Group>

Şimdi de aşağıdaki kodu bulalım;

]]></b:skin>

Yukarıda bulduğumuz kodun üstüne hemen aşağıdaki kodu ekliyoruz

#PopularPosts1 ul{margin:0;padding:5px 0;list-style-type:none}
#PopularPosts1 ul li{position:relative;margin:5px 0;border:0;padding:10px}
#PopularPosts1 ul li:first-child{background:$(PopularPosts.background.color1);width:90%}
#PopularPosts1 ul li:first-child:after{content:"1"}
#PopularPosts1 ul li:first-child + li{background:$(PopularPosts.background.color2);width:85%}
#PopularPosts1 ul li:first-child + li:after{content:"2"}
#PopularPosts1 ul li:first-child + li + li{background:$(PopularPosts.background.color3);width:80%}
#PopularPosts1 ul li:first-child + li + li:after{content:"3"}
#PopularPosts1 ul li:first-child + li + li + li{background:$(PopularPosts.background.color4);width:75%}
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
#PopularPosts1 ul li:first-child + li + li + li + li{background:$(PopularPosts.background.color5);width:70%}
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
#PopularPosts1 ul li:first-child + li + li + li + li +li{background:$(PopularPosts.background.color6);width:65%}
#PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"}
#PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:$(PopularPosts.background.color7);width:60%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}
#PopularPosts1 ul li:first-child:after,
#PopularPosts1 ul li:first-child + li:after,
#PopularPosts1 ul li:first-child + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{position:absolute;top:20px;right:-15px;border-radius:50%;background:#353535;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff}
#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:40px;height:40px}
#PopularPosts1 ul li a{font-size:12px;color:#444;text-decoration:none}
#PopularPosts1 ul li a:hover{color:#222;text-decoration:none}

Eğer resimli popüler yazılar eklentisini kullanmıyorsanız yukarıdaki anlattıklarım yeterli. 

Ama Resimli kullanıyorsanız birkaç kod daha eklemelisiniz. İşte o kodlar;

Öncelikle Popüler Yazılar eklentisinin kullanıldığından emin olun.

HTML şablonun içinde Popüler Yazılar'ı arayacağız. İsminin doğru yazıldığından emin olun

<b:widget id='PopularPosts1' locked='false' title='Popüler Yayınlar' type='PopularPosts'>
x
X
X
X
X
X
X
X
X
X
X
X
X
X
X
X
X
</b:widget>

Yukarıdaki kodlar , popüler yayınların bulunduğu kodlar , burada yapmamız gereken ilk kod ile son kodarasını silip , aşağıdaki kodlarımızı sildiğiniz yere eklemek , yukarda silmeniz gereken yerleri kırmızı x ile gösterdim( sizde x yerine kodlar olacak) diğer ilk ve son koda dokunmayın...aralarını silip aşağıdaki kodlarımı ekleyin..

<b:includable id='main'>
   <b:if cond='data:title'>
    <h2><data:title/></h2>
   </b:if>
   <div class='widget-content popular-posts'>
    <ul>
     <b:loop values='data:posts' var='post'>
      <li>
       <b:if cond='data:showThumbnails == &quot;false&quot;'>
        <b:if cond='data:showSnippets == &quot;false&quot;'>
         <a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><data:post.title/></a>
        <b:else/>
         <a expr:href='data:post.href' expr:title='data:post.snippet' rel='bookmark'><data:post.title/></a>
        </b:if>
       <b:else/>
        <b:if cond='data:showSnippets == &quot;false&quot;'>
         <b:if cond='data:post.thumbnail'>
          <img class='item-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnail'/>
         <b:else/>
          <img alt='no image' class='item-thumbnail' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGlOmYtBJAHafbvB4EZSJU8ik6zLfhTVieEsVXFJpTuV4UkUBFBMuTHfsiLOjkrMVvsNACllOeQcuChDtUz5_g5ERhRbzjiTGa6gESypzHayg4I1QmzhkgApNUuYXfCtDaB4KWwMiJaWE/s1600/defaultimage.jpg'/>
         </b:if>
         <a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><data:post.title/></a>
         <div class='clear'/>
        <b:else/>
         <b:if cond='data:post.thumbnail'>
          <img class='item-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnail'/>
         <b:else/>
          <img alt='no image' class='item-thumbnail' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGlOmYtBJAHafbvB4EZSJU8ik6zLfhTVieEsVXFJpTuV4UkUBFBMuTHfsiLOjkrMVvsNACllOeQcuChDtUz5_g5ERhRbzjiTGa6gESypzHayg4I1QmzhkgApNUuYXfCtDaB4KWwMiJaWE/s1600/defaultimage.jpg'/>
         </b:if>
         <a expr:href='data:post.href' expr:title='data:post.snippet' rel='bookmark'><data:post.title/></a>
         <div class='clear'/>
        </b:if>
       </b:if>
      </li>
     </b:loop>
    </ul>
   </div>
  </b:includable>

Yukarıdaki kodlarıda eklediyseniz , Blogger Renkli Popüler Yayınlar Eklentisine artık sahipsiniz, güle güle kullanın.



Blogger Renkli Popüler Yayinlar Eklentisi, Blogger, Blogger Eklentisi, Blogger Eklentileri, Blogger Widget, Popüler, Renkli, Yayınlar, Blogger Renkli Popüler Yayınlar Eklentisi , Blogger Renkli Popüler Yayınlar Gösterme , Renkli Popüler Yayınlar eklentisi , Popüler Yayınlar , Popüler Yayınlar eklentisi , Blogger Popüler Yayınlar Eklentisi