Follow us on Facebook Instagram

How to Add Popular Posts Widget in Blogger

Here you know three different ways of How to add Popular Posts widget in Blogger. We've shown Unique, Stylish, Clean and Elegant Popular Posts Widget.
How to Add Popular Posts Widget in Blogger

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.

Now, here is a wonderful tips and tricks for displaying popular post section on your Blog. With this amazing and eye-catching tips, the reader will remain on your website for a long period when they get their interesting post on your Popular post section/widget.

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 widgetHow to remove ?m=1 from blogger url, how to generate Contact us pageDisclaimer pageAbout 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 &#39;Oswald&#39;, 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:&quot;&quot;;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 &#39;Oswald&#39;, 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 &quot;Times New Roman&quot;,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;}
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.

Post a Comment

Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.
Blogging Zero Welcome to WhatsApp chat
Howdy! How can we help you today?
Type here...