How To Add Customize Popular Post Widget In Blogger
If you want to add some beautiful style to your Blogger’s Popular Posts Widget to make it more prominent and attractive for your visitors, then this post will be of help to you. Having a Popular Posts Widget in the sidebar has numberless advantages. Having a Popular Posts Widget in the sidebar helps new visitors to pick those articles that are most trending on a website.
However, Blogger’s Built-in Popular posts widget is not that much attention-grabbing in terms of designing and displaying. To transform your Popular Posts widget into a masterpiece then, you have to rely on CSS Style sheets. In today’s article, you will learn the CSS Style sheet.
Step 1: 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.
Step 2: 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 within the Template use CTRL+F Shortcut to Search for ]]></b:skin> and just above it paste the following CSS Coding.
/*--- Emmyworldwide --- */
.popular-posts ul{padding-left:0px;}
.popular-posts ul li {background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrNUtVrAF9X3PXu2aLGTNMShhphfMWwQAVKnF0_6kcknhvMXuZGbCTZ4KW2t4VZrQz4Wm23FxHp_YgYxWfDz70_xmxyiRhsM8H19uaoQKCj5zeJz_VBBFDmfkOgfwvRhv4ceOm_Bm-kI0/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);
}
.popular-posts ul{padding-left:0px;}
.popular-posts ul li {background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrNUtVrAF9X3PXu2aLGTNMShhphfMWwQAVKnF0_6kcknhvMXuZGbCTZ4KW2t4VZrQz4Wm23FxHp_YgYxWfDz70_xmxyiRhsM8H19uaoQKCj5zeJz_VBBFDmfkOgfwvRhv4ceOm_Bm-kI0/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);
}
==> 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.
Congratulations: You have successfully added Customized Popular Post Widget in your Blog.
I hope this tutorial have helped you in learning how to add Customize Popular Post Widget In Blogger . If anyone find any difficulty then don't be shy to make use of the comment box below.
If you liked this guide, please share it with your friends and family.
Post a Comment