Adding Popular Post Widget To Your Blogger Blog:
The Steps are extremely straightforward so you can easily customize your widget without facing any problem what so every. Just follow the following instructions.
- Go To Blogger >> Your Blog >> Layout.
- Add a Gadget >> Now within the list of widget look for “Popular Posts” and select it.
- Now match the settings which are shown in the screenshot below.
- Select “Last 7 Days” (Weekly).
- Make sure you check the “Image Thumbnail” and “Snippet” because we need to display Small images along the trendy article, this will add more spice to your site.
- You can display up to 10 trendy articles, but we would recommend you to select 7 from the Drop down list.
- Now go ahead and Save the widget and that’s it we have successfully integrated a Popular Post widget.
Customizing and Stylizing Blogger Popular Post Widget:
- Once again go to Blogger >> Template >> (Create a backup in case anything went wrong).
- Select Edit HTML >> Proceed.
- Now with in the Template Search for ]]></b:skin> (CTRL+F Shortcut to quick search) and just above it paste the following CSS Coding.
/*--- MyBloggerLab --- */
.popular-posts ul{padding-left:0px;}
.popular-posts ul li {background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJiSQWLBym0Ycqbx3YxBbx3UrnGZBrGoqCkGYbPVgB02Y4Ga4YQBLWS7rE8ZBRLGcg1seObyg4P3wVhFPM83cAxrmKVHwgzOfiRR7nlKSkzz33zpSTRFka22NWD5ujmb-oSdkSu8AF7BI/s1600/1.gif) no-repeat scroll 5px 10px;
list-style-type: none;
margin:0 0 5px 0px;
padding:5px 5px 5px 20px !important;
border: 1px solid #ddd;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
.popular-posts ul
li:hover {
border:1px solid #6BB5FF;
}
.popular-posts ul
li a:hover {
text-decoration:none;
}
.popular-posts .item-thumbnail img {
webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}
All Done: Finally, Press the Save Template button and you have successfully customized your y post widget. Now visit your site and enjoy the picture perfect results.
From the Editor’s Desk:
We are pretty sure, that after customizing this widget, you will surly see a fascinating change in your traffic because your new readers will fancy their chances by viewing one of your trendy articles. Moreover, it will also play foremost role in reducing your bounce rate. We are receiving bulks of request from our readers who are asking us to share our custom MBL Theme. However, we have no plans at the moment to share it because it has become the trademark of this blog. We are planning to have a giveaway our First Anniversary you never know we might roll out our Template. Take a lot care of your love ones till then peace, blessings, and happy styling.
How To Customize Popular Post Widget In Blogger
4/
5
By
Editorial Board
Dear Reader! We’re enthusiastic to see your comment but after reading the Content please ask for advice and to provide constructive feedback Please Write Relevant Comment with Polite Language.Your comments inspired me to continue blogging. Your opinion much more valuable to me.
Let’s enjoy a personal and evocative conversation. Thank You!