How To Add Grid layout Popular Posts Widgets For Blogger


If your business or personal blog running through Blogger as a platform, and you’re planned to personalize it and make it with your own ideas. means This is a way to do it, you’ll make your blog pages are highlighted in unique and eye-catching from the other blogs on the internet. You’ll also get the attention of your target audiences, encourage them to browse more through your blog posts and make them become your daily readers and also your followers. by adding the popular post widget.

there are many ways to customize your free blog in Blogger, and one of the methods is to personalize your Popular Posts widget. if you’re not added this yet? Don’t worry it easy to add in your do that follow the below steps or if you already added to your blog means skip the below step.

How To Add Grid layout Popular Posts Widgets For Blogger

Step 1.

First to do that go to the Blogger website, after login to your Blogger Dashboard, then click the “Template” section refer to the image below and then hit the “Edit HTML” button.

Step 2. Click Back Up and restore button to back up your current blogger template before the changes you make. it is only for the safety purpose it is most recommended.

Step 3. After loading the HTML section of the blogger Click anywhere on the HTML code area and the, press the CTRL + F keyboard keys to Open the search box. Inside the HTML code.

Step 4. Copy the following text and past it into the search box and hit enter to find the text.


Step 5. Copy the following text and past it in Just above the </head> tag.

<style type='text/css'>
.sidebar .PopularPosts ul{padding:0;}.sidebar .PopularPosts ul li:first-child{width:100%;max-height:100%;opacity:0.9;}.sidebar .PopularPosts ul li:nth-child(even){margin-right:2%;}.sidebar .PopularPosts ul li{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;position:relative;padding:0px !important;width:49%;max-height:120px;opacity:0.4;overflow:hidden;float:left;margin-bottom:2%;-webkit-transition: all 0.5s ease 0s;-moz-transition:all 0.5s ease 0s;-ms-transition:all 0.5s ease 0s;-o-transition:all 0.5s ease 0s;transition:all 0.5s ease 0s;}.sidebar .PopularPosts ul li:hover{opacity:1;}.sidebar .PopularPosts .item-thumbnail{margin:0;width:100%;line-height:0;}.sidebar .PopularPosts ul li img {-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing: border-box;width:100%;height:auto;padding:0;}.sidebar .PopularPosts .item-content:hover .item-title a,.sidebar .PopularPosts .item-thumbnail-only:hover .item-title a{visibility:visible;opacity:1;}.sidebar .PopularPosts .item-title a{color:#fff;background:rgba(0, 0, 0, 0) linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.93) 100%, rgba(0, 0, 0, 0.85) 100%);text-decoration:none;position:absolute;text-align:center;font:13px &#39;Oswald&#39;, sans-serif;left:0;right:0;bottom:0%;padding:100px 10px 10px;opacity:0;visibility:hidden;}.sidebar .PopularPosts .item-snippet{display:none;}

If your blog has Popular Posts is in a footer menu, In the above CSS code removing a sidebar class, then only the code is work. many of the codes have used the ‘Oswald’ font style, you will need to add a template’s code.

READ ALSO  How to create a blog at | Easy Steps For Beginners 2018

then, copy the following tag and paste it in the search box of HTML window  :


next, add the below code just below the above code:

<link href=',700' 
rel='stylesheet' type='text/css'/>
next, Adding of JavaScript

the widget also requires a script, due to reduce the post title and snippet and resize the image or thumbnail of the post.

then, search for the following tag:


and then paste the below code just above the </body> tag

<script src='//'/>
<script type='text/javascript'>
$(".popular-posts img").attr("src",function(t,s){return s.replace("/w72-h72-p-k-no-nu/","/s350-c/")}),$(".popular-posts ul li .item-snippet").each(function(){var t=$
(this).text().substr(0,60),s=t.lastIndexOf(" ");s>10&&$(this).text(t.substr(0,s).replace(/[?,!\.-:;]*$/,"..."))}),$(".popular-posts ul li .item-content a").each
(function(){var t=$(this).text().substr(0,60),s=t.lastIndexOf(" ");s>=6&&$(this).
if your blog template has already used the jQuery, in above code just remove the red colored line. and After that added the all remaining codes in before the following tag,

and then click “Save theme” option to save you current changesin blogger template what you made. That’s it!


Please read the above guide thoroughly to get the good result. If you have any queries feel free to contact us or comment below. We hope the above article is very much helpful to you if you like this article the share with your friends. Please fill out the email subscription to our new articles direct to your email inbox, and follow us on social media to get instant post updates to you.

Facebook    :       Twitter        :                                          Google +     :                      YouTube      : Pinterest     :                                          Instagram   :

READ ALSO  How To Add a Multi Coloured Popular Post Widget


Please enter your comment!
Please enter your name here