Blogunuza renkli popüler post gadget/widget'i ekleyin

Popüler post blogger tarafından sağlanan,son bir hafta,ay veya tüm zamanlarda en çok okunan veya tıklanan yazılarınızı gösteren bir gadget(kenar çubuğu)dir.Sadece başlıkları veya başlıkları resimlerle gösterebilirsiniz.


               



Popüler post gadgetini özelleştirmek için bazı CSS kodlarını blogumuzun şablonuna eklemeliyiz.Haydi başalayalım:

Adım 1: Blogger hesabınıza giriş yapın ve sırasıyla şablon>HTML'yi düzenle'ye tıklayın.
Adım 2:Şablonu genişlet
Adım 3:bu tag için arama yapın:

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

Not:eğer bunu bulamazsanız yazar bilgelerinin(author information) olduğu yere genellikle bu kodun <b:skin><![CDATA[/* ve bu sembolle ----------------------------------------------- */ biter.

Adım 4:Aşağıdaki kodu tagın hemen altına yapıştırın:

<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"/></Group>

Adım 5:Aşağıdaki kod için arama yapın (CTRL+F kombinasyonunu kullanırsanız daha rahat bulursunuz.)

]]></b:skin>

Adım 6: Üstteki kodtan ]]></b:skin> hemen önce aşağıdaki kodu yapıştırın:

#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: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{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}

Adım 7:şimdi aşağıdaki kodu bulun:

<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>

Adım 8:Onu bu koda bu kod da dahil </b:widget> silin.

Not:Silerken çok dikkatli olun sileceğiniz kod aşağıdaki koda benzer:

<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'><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;'> <!-- (1) No snippet/thumbnail --> <a expr:href='data:post.href'><data:post.title/></a> <b:else/> <!-- (2) Show only snippets --> <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div> <div class='item-snippet'><data:post.snippet/></div> </b:if> <b:else/> <b:if cond='data:showSnippets == &quot;false&quot;'> <!-- (3) Show only thumbnails --> <div class='item-thumbnail-only'> <b:if cond='data:post.thumbnail'> <div class='item-thumbnail'> <a expr:href='data:post.href' target='_blank'> <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/> </a> </div> </b:if> <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div> </div> <div style='clear: both;'/> <b:else/> <!-- (4) Show snippets and thumbnails --> <div class='item-content'> <b:if cond='data:post.thumbnail'> <div class='item-thumbnail'> <a expr:href='data:post.href' target='_blank'> <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/> </a> </div> </b:if> <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div> <div class='item-snippet'><data:post.snippet/></div> </div> <div style='clear: both;'/> </b:if> </b:if> </li> </b:loop> </ul> <b:include name='quickedit'/> </div></b:includable></b:widget>

Adım 9:Yukarıdaki kodu sildikten sonra yerine aşağıdaki kodu ekleyin:

<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'><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/AVvXsEivuKFDjFtURul2tZw1WhXIGJ4zhqdbvg2Vdvy21DtuElvmM9_8qp-4ur7V9CSY_mYvxA65JjIgj841NxzoEsvN5WT_44EE4DP8dWvXbl5V5nqvtPLe28xxEOJtV2Eyb7vy9duy5j54YLg/s1600/default.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/AVvXsEivuKFDjFtURul2tZw1WhXIGJ4zhqdbvg2Vdvy21DtuElvmM9_8qp-4ur7V9CSY_mYvxA65JjIgj841NxzoEsvN5WT_44EE4DP8dWvXbl5V5nqvtPLe28xxEOJtV2Eyb7vy9duy5j54YLg/s1600/default.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></b:widget>

Adım 10: şablonu kaydettin.