Go Widget - Popular posts widget default blogger has a standard display which can still be modified further by making it more attractive CSS3. If previously we have tried to add marquee effect on the widget popular posts, so this time we will add spinning and zooming effects in post thumbnails popular widgets
Spinning and zooming hover
effect on the widget thumbnail popular posts are rotating image animation
effects and enlarged when we direct mouse pointer over the thumbnail / image
widget.
Well if you are interested
to try to add widget popular posts with effect hover spinning and zooming on
your blog, please follow the stages instalansinya:
First Stages
Adding popular posts with hover effect or animation spinning and zooming and rotating images enlarged
1. Log in to your Blogger
account
2. Go to the menu >>
Edit HTML Template (No need taskbar Expand Widget Templates)
3. Then find the code ]]> </ b:
skin> and place the following CSS code above
CSS - Go Widget
.popular-posts .item-thumbnail {
float:left;
}
.popular-posts ul {
padding-left:30px;
}
.popular-posts ul li {
list-style-image: none;
list-style-type: none;
display:inline;
}
.popular-posts ul li img {
padding:0px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
transition: all 0.3s ease;
border: 2px solid #CCC;
}
.popular-posts ul li img:hover {
border:2px solid #ccc;
-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);
}
4. Further search code
Thus tutorial add spinning and zooming effects on the thumbnails widget popular posts, if you want to try to add marquee effect on popular posts please click the title link these posts! Hope it is useful.
If you liked the article on this blog, Please feel free to subscribe via email, so you will get an article submission every article published in Go Widget
Go Widget
<b:widget
id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'/>
5. Replace all that code
with the following code:
HTML - Go Widget
<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 == "false"'>
<b:if cond='data:showSnippets == "false"'> <!-- (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 == "false"'> <!-- (3) Show only thumbnails -->
<div class='item-thumbnail-only'>
<div class='item-thumbnail'> <a expr:href='data:post.href' expr:title='data:post.title'>
<b:if cond='data:post.thumbnail'>
<img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/> <b:else/>
<img alt='' border='0' expr:height='data:thumbnailSize' expr:width='data:thumbnailSize' src='http://www.freetradeireland.ie/site/images/no-image.gif'/> </b:if> </a> </div> </div> <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:if>
<div class='widget-content popular-posts'> <ul>
<b:loop values='data:posts' var='post'> <li> <b:if cond='data:showThumbnails == "false"'>
<b:if cond='data:showSnippets == "false"'> <!-- (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 == "false"'> <!-- (3) Show only thumbnails -->
<div class='item-thumbnail-only'>
<div class='item-thumbnail'> <a expr:href='data:post.href' expr:title='data:post.title'>
<b:if cond='data:post.thumbnail'>
<img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/> <b:else/>
<img alt='' border='0' expr:height='data:thumbnailSize' expr:width='data:thumbnailSize' src='http://www.freetradeireland.ie/site/images/no-image.gif'/> </b:if> </a> </div> </div> <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>
6. Save your template and
see the results!
Thus tutorial add spinning and zooming effects on the thumbnails widget popular posts, if you want to try to add marquee effect on popular posts please click the title link these posts! Hope it is useful.
If you liked the article on this blog, Please feel free to subscribe via email, so you will get an article submission every article published in Go Widget