New Popular Posts With Thumbnail For Blogger

Posted by Unknown On 2 comments
In this Tutorial i will show, how to create Popular Posts with thumbnail and snipped. Related to this topic i posted a tutorial on How to create Popular Posts with carousel slider. This previous widget can be use at bottom of the posts and on header. But in this tutorial i will show you how to create Popular Posts with thumbnail and snipped on Sidebar. This is common widget but this widget has some features which other widgets doesn't have. These Features include:

  • SEO friendly (not javascript)
  • Dynamic result based on real statistic
  • Easy to custumized
Without wating time, lets start th work to in install this widget.

Steps:

1: Login to Blogger Dashboard and navigate to Design –> Page Elements
2: Click “Add Gadget” and Choose “Popular Posts” and Customize the gadget with more than 4 popular post will show–> “Display Up to” … Posts.
Note: (If you already have this gadget skip this step).


 *If you have Popular Post Gadget then :
3: Click on "Add a Gadget" again and Select a HTML/JavaScript Widget just under the header and paste the following code inside it,


<style type="text/css" media="screen">

#PopularPosts1 {
 overflow:hidden;
margin-top:5px;
padding:0px 0px;
height:400px;
    
}

#PopularPosts1 ul {
width:220px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}




#PopularPosts1 li {
 width:208px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:80px;
overflow: hidden;
background:#fff url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/post.jpg) repeat-x;
border:1px solid #ddd;
}

#PopularPosts1 li .item-title {
    color:#A5A9AB;
    font-size:1em;
    margin-bottom:0.5em;
}

#PopularPosts1 li .item-title a {
 text-decoration:none;
color:#4B545B;
font-size:11px;
height:18px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 2px 0px;
}

#PopularPosts1 li img {
 float:left;
margin-right:5px;
background:#EFEFEF;
border:0;
}

#PopularPosts1 li .item-snippet {
  overflow:hidden;
font-family:Tahoma,Arial,verdana, sans-serif;
font-size:10px;
color:#262B2F;
padding:0px 0px;
margin:0px 0px;
}

#PopularPosts1 .item-snippet a,
#PopularPosts1 .item-snippet a:visited {
    color:#3E4548;
    text-decoration: none;
}

#PopularPosts1 .spyWrapper {
    height: 100%;
    overflow: hidden;
    position: relative;    
}

#PopularPosts1 {
 -webkit-border-radius: 5px;
 -moz-border-radius: 5px;
}

.tags span,
.tags a {
 -webkit-border-radius: 8px;
 -moz-border-radius: 8px;
}

a img {
    border: 0;
}

-->
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
$(function () {
    $('.popular-posts ul').simpleSpy();
});
</script>
<script src="http://accordion-for-blogger.googlecode.com/svn/trunk/simplespy.js" type="text/javascript"></script>
4: Save it. You're done.

Labels: , , , , ,

2 comments:

Joseph said...

Hi,
Thanks for the post. I've a doubt (not related with this).. How did you changed the URL of static pages? I mean, the Privacy Policy, Sitemap, About us...? Your help will be appreciated..

April 24, 2014 at 6:35 AM
Ana Sriwahyuni said...

what? no javascript?
what accordion-for-blogger.googlecode.com/svn/trunk/simplespy.js is??

August 7, 2014 at 4:23 AM

Post a Comment