How to Add Popular Posts Widget in Blogger? - A beautiful and elegant Popular Post widget with Thumbnails is a must have widget for Blogger to show Popular Posts or articles to your readers. First thing first, Popular posts gadget/widget in Blogger increase your Pages view of your website. Unique and Stylish Popular posts widget have too many advantages - firstly, It will change your website looks a Awesome, and secondly it will help you to increase traffics i.e, pages view of your blog/site with it's eye catching looks. It is said that it also helps in SEO and Ranking.
Also Read - How to add Related Posts widget.
Popular Posts widget or section in a website is very essential in Blogger Post. Eventually, the popular post widget was previously comes inbuild in Blogger Templates, but you have the template which you like the most and it doesn't have Popular Posts section then it is different thing.
So, let us know - How to add Popular post widget in blogger? But before we begin, Blogging Zero have already shared a lots of tips and tricks regarding Blogger. so if your interested in it you may read our post on How to add related posts widget, How to remove ?m=1 from blogger url, how to generate Contact us page, Disclaimer page, About us page in blogger, feature post widget, etc, basic SEO and Rankings and many more.
This is the Best and impressive widget of popular posts. BloggingZero will show you three different Methods of Popular Posts Widget with stylish Thumbnails in Blogger/Blogspot. Follow the following given steps to add stylish Popular posts section.
How to Add Popular Posts Widget in Blogger -
(1) Style 1 -
Step 1- Go to the Blogger Dashboard.
Step 2- then click on Theme from left side.
Step 3- After that click on the Edit HTML option.
Step 4- using CRTL+F search for </head> tag.
Step 5- then Paste the given code above this tag.
<style type='text/css'>
.sidebar .PopularPosts ul{counter-reset:popularcount;margin:0;padding:0;}.sidebar .PopularPosts ul li{float:left;max-height:130px;min-width:250px;position:relative;}.sidebar .PopularPosts .item-thumbnail::after{color:rgba(255,255,255, 0.63);content:counter(popularcount, decimal);counter-increment: popularcount;font:70px 'Oswald', sans-serif;list-style-type:none;position:absolute;left:5px;top:-5px;z-index:4;}.sidebar .PopularPosts .item-thumbnail::before{background:rgba(0, 0, 0, 0.3);bottom:0px;content:"";height:100px;width:100px;left:0px;right:0px;margin:0px auto;position:absolute;z-index:3;}.sidebar .PopularPosts .item-thumbnail a{clip:auto;display:block;height:auto;overflow:hidden;}.sidebar .PopularPosts .item-thumbnail{width:100px;height:100px;margin:0px 10px 0px 0px !important;position:relative;}.sidebar .PopularPosts .item-thumbnail:hover:before{display:none;}.sidebar .PopularPosts .item-thumbnail img{position:relative;padding-right:0px !important;height:auto;width:100%;}.sidebar .PopularPosts .item-title{font:13px 'Oswald', sans-serif;text-transform:uppercase;padding:0px 5px 10px;}.sidebar .PopularPosts .item-title a{color:#000;text-decoration:none;}.sidebar .PopularPosts .item-snippet{font:13px "Times New Roman",Times,FreeSerif,serif;}.sidebar .PopularPosts .widget-content ul li{padding:0px 5px 0px 0px !important;}.sidebar .PopularPosts .item-content{padding:5px 0px;border-bottom:1px dotted #dedede;overflow:hidden;height:100px;position:relative;}
</style>
Step 6- lastly, click on the Save option. You are done !!
(2) Style 2 -
Step 1- Go to the Blogger Dashboard.
Step 2- then click on Theme from left side.
Step 3- After that click on the Edit HTML option.
Step 4- using CRTL+F search for the ending ]]></b:skin> tag.
Step 5- then Paste the given code above this tag.
.PopularPosts .item-thumbnail{margin:0 15px 0 0 !important;width:90px;height:65px;float:left;overflow:hidden; position: relative} .PopularPosts .item-thumbnail a{position:relative;display:block;overflow:hidden;line-height:0} .PopularPosts ul li img{width:90px;height:65px;object-fit:cover;padding:0;transition:all .3s ease} .PopularPosts .widget-content ul li{overflow:hidden;padding:10px 0;border-top:1px solid #f2f2f2} .sidebar .PopularPosts .widget-content ul li:first-child,.sidebar .custom-widget li:first-child,.tab-widget .PopularPosts .widget-content ul li:first-child,.tab-widget .custom-widget li:first-child{padding-top:0;border-top:0} .sidebar .PopularPosts .widget-content ul li:last-child,.sidebar .custom-widget li:last-child,.tab-widget .PopularPosts .widget-content ul li:last-child,.tab-widget .custom-widget li:last-child{padding-bottom:0} .PopularPosts ul li a{color:#333333;font-weight:400;font-size:14px;line-height:1.4em;transition:color .3s} .PopularPosts ul li a:hover{color:#FF4400} .PopularPosts .item-title{margin:0 0 4px;padding:0;line-height:0} .item-snippet{display:none;font-size:0;padding-top:0} .PopularPosts ul { counter-reset: popularcount; margin: 0; padding: 0; } .PopularPosts .item-thumbnail::before { background: rgba(0, 0, 0, 0.3); bottom: 0px; content: ""; height: 100px; width: 100px; left: 0px; right: 0px; margin: 0px auto; position: absolute; z-index: 3; } .PopularPosts .item-thumbnail::after { color: rgba(255,255,255, 0.63); content: counter(popularcount, decimal); counter-increment: popularcount; font-size: 70px; list-style-type: none; position: absolute; left: 5px; top: -5px; z-index: 4; }
Step 6- now using CRTL+F search for </body> tag and just above paste this given below code -
<script type='text/javascript'> //<![CDATA[ function resizeThumbarlina(e,t){for(var s=document.getElementById(e),r=s.getElementsByTagName("img"),c=0;c<r.length;c++)r[c].src=r[c].src.replace(/\/s72\-c/,"/s"+t),r[c].width=t,r[c].height=t}resizeThumbarlina("PopularPosts1",400); $(document).ready(function(){ $('.PopularPosts img').each(function(){ var srcUrl = $(this).attr('src'); $(this).attr('src', srcUrl.replace('default', 'maxresdefault')); }); }); //]]> </script>
Step 7- click on Save option. And You're done!!!
(3) Style 3 -
Step 1- Go to the Blogger Dashboard.
Step 2- then click on Layout from left side.
Step 3- After that click on the Add a Gadget option.
Step 4- Choose Popular posts Widget from the list.
Step 5- After that Go to the Theme section.
Step 6- click on Edit HTML OPTION.
Step 7- using CRTL+F search ]]></b:skin> tag.
Step 8- then paste the given code above this ]]></b:skin> tag.
.PopularPosts h2{ padding-right:.4em; padding-left:1em } .popular-posts ul { padding-left: 0; counter-reset: trackit;/*setting counter-reset*/ } .popular-posts ul li { border-bottom: 1px solid #ffffff; list-style: none outside none !important; margin-left: 0 !important; overflow: hidden; padding: 10px 0 !important; transition: all 0.25s linear 0s; counter-increment: trackit;/*setting counter-increment*/ } .PopularPosts ul li:before{ content: counters(trackit, "."); padding: 0 .1em 0 0; font-size: 20px; font-weight: bold; color: #ffffff; float:left; margin-right:10px; } /* creates counter before lists */ .PopularPosts li:first-child{ border-top:1px solid #000000 } .PopularPosts li:nth-child(even) {background:#0099ff }/*define background color for even number lists*/ .PopularPosts li:nth-child(odd) {background:#000000 }/* define background for odd number lists */ .PopularPosts .item-thumbnail {display: true!important}, .PopularPosts .item-snippet { display: true!important}/* Hides Thumbnail and Snippet */ .PopularPosts a, .PopularPosts a:hover{ color:#ffffff; font-size:.9rem } #PopularPosts1 li{ padding-right: 1em !important; padding-left: 1em !important; } .widget.PopularPosts{padding:1.2em 0em !important}
Step 9- Finally, Save the template and You're Done!! Now see you Blog. Now, You should have a customized Popular posts Widget.