Popular Post Widget with Thumbnails and Hover Effect for Blogger.

Popular Post Widget displays most visited posts from a blog in descending order.

It along with a combination of random post widget, recent post widget and related post widget makes a very good platform for maximum exposure of content of a blog to the audience.

It is damn easy to Install this widget in blogger template.


This popular post widget looks like as in figure given below (the heading design of this widget is the default heading design for widgets in sidebar in your blogger template)
This is matching design for bloggers who installed our recent post widget. We always releases matching designs for both widgets to keep looks of your blog consistent and uniform. So you are advised to subscribe us to get new theme for the widgets which then require minimum efforts for implementations.

Here is procedure to install popular post widget…

How to Install Random Post Widget in Sidebar?

Step1. Login to Blogger Dashboard, Go to “Layout” and then click “Add a Gadget” in sidebar area.


Step 2. Select “Popular Post” for the given widgets:


Step 3. Configure the widget. Check the box against “image thumbnail”. Keep the checkbox against “snippet” empty. Snippet provide post summary below post titles.


Step 4.  Save the widget. Now go to “Template”>>”Edit Template”. Click anywhere in template area and press “Ctrl+F” to open search box. Search for the following code:

]]></b:skin>

Step 5. Paste the following code just above the previous code:

.widget-content {
    margin-top:10px;
}
.PopularPosts .widget-content ul {
    padding: 0 0 0 0em;
    margin: 0;
    line-height: 1.2;
    list-style: none;
    font-size: 13px;
}
.PopularPosts .item-thumbnail {
    float: left;
    margin: 0 12px 2px 0;
    border: 1px solid #8ABB8A;
    width: 72px;
    height: 72px;
    border-radius: 5px;
}
.PopularPosts .item-thumbnail a:hover {
    opacity: 0.6;
}

Customization:

• Change the thumbnail dimensions by changing width and height in the yellow highlighted code.

Hoping that this post have helped you to implement this widget in your blog. Subscribe us to get more themes for the same widget.

For any inquiry, please use comment box.