CUSTOMIZE POPULAR POSTS WIDGET BLOGGER
CUSTOMIZE POPULAR POSTS WIDGET BLOGGER – How to customize the popular posts widget for blogger. In this tutorial you will be able to customize the popular posts widget by using an advance css design. I think this customazing has been famous among blogger user. This costumizing is using a default widget popular post, and by customizing this popular post widget you can attract more visitor and increase pageviews.
 |
| customize popular posts widget |
To customize popular post widget, we need a css transition code, specificly a hover effect to this widget thumbnail. Effect rotation and fade out will be added by using css transition code. Please follow this tutorial below for more explanation.
1. Go to dashboard blogger > Layout > Add a Gadget > and choose Popular Post
2. Choose the settings as shown below, then klik save
 |
| customize popular post widget |
3. Go to Template > Edit HTML > Proceed > Tick Show Expand Widget Template
4. Copy css code below then paste it above ]]></b:skin> find by using ctrl+f
.popular-posts .item-thumbnail{float:left}
.popular-posts ul{padding-left:8px;padding-top:4px}
.popular-posts ul li{list-style-image:none;list-style-type:none;display:inline}
.popular-posts ul li img{-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;-webkit-transition:all .3s ease;-moz-transition:all .3s ease;transition:all .3s ease;border:2px solid #fff;padding:0}
.popular-posts ul li img:hover{border:2px solid #fff;-moz-transform:scale(1.3) rotate(-360deg);-webkit-transform:scale(1.3) rotate(-360deg);-o-transform:scale(1.3) rotate(-360deg);-ms-transform:scale(1.2) rotate(-360deg);transform:scale(1.3) rotate(-360deg)}
5. Find code <!– (3) Show only thumbnails –> , remove the red script, add the code that is blue on the widget code below.
<!-- (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:title='data:post.title' 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/>
6. Klik Save Template, the result will be as shown below with animations rotate and fade out thumbnail. blog demo
 |
| popular post animations |
Thank’s for reading CUSTOMIZE POPULAR POSTS WIDGET BLOGGER , I hope this article can be useful for you. Please read CARA MEMBUAT POPULAR POST BERGERAK for indonesian language.
