How To Add Large thumbnails with small post titles Popular Posts Widgets


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 Large thumbnails with small post titles underneath 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.

READ ALSO  Where to Buy Best and Cheapest Domain

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{counter-reset:popularcount;margin:0;padding:0;}.sidebar .PopularPosts ul li{width:100%;list-style:none !important;padding:0 !important;margin-bottom:20px;position:relative;border:0;text-align:center;}.sidebar .PopularPosts .item-thumbnail a{clip: auto;display:block;height:auto;height:120px;}.sidebar .PopularPosts .item-thumbnail{width:100%;height:120px;overflow:hidden;position:relative;margin-bottom:15px;}.sidebar .PopularPosts .item-thumbnail::before{background:rgba(0, 0, 0, 0);border-bottom:29px solid #fff;border-left:29px solid transparent;border-right:29px solid transparent;bottom:0px;content:&quot;&quot;;height:0;width:0px;left:0px;right:0px;margin-left:auto;margin-right:auto;position:absolute;z-index:3;}.sidebar .PopularPosts .item-thumbnail:after{color:#000;content:counter(popularcount, decimal);counter-increment:popularcount;font:13px &quot;Times New Roman&quot;,Times,FreeSerif,serif;list-style-type:none;position:absolute;bottom:0;margin:0px auto;left:0px;right:0px;z-index:4;}.sidebar .PopularPosts .item-thumbnail img{position:relative;width:100%;height:auto;padding:0;}.sidebar .PopularPosts .item-title{font:15px &#39;Oswald&#39;, sans-serif;text-transform:uppercase;margin:0px auto;padding-bottom:10px;border-bottom:1px solid #000;}.sidebar .PopularPosts .item-title a{color:#000;text-decoration:none;}.sidebar .PopularPosts .item-snippet{padding:10px 15px;font:13px &quot;Times New Roman&quot;,Times,FreeSerif,serif;}

Note: If your blog has Popular Posts widget is the footer section, remove the .sidebar class in the above CSS code, in order to make it work. most of the styles are using the ‘Oswald’ font, you need to add to your template’s code.

search for this tag:


and add the below code just below the above code:

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

the widget also requires a script in order to trim the post title and snippet and resize the image or thumbnail of the post

To add the JavaScript code,

search for the </body> tag and paste the following 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).
Note 2:
if your blog template has already the jQuery library, in above code just remove the line in red. and After that added all the remaining codes in before the following tag,

and just click the “Save theme” button to save the changes. That’s it!

READ ALSO  How To Easily Increase WordPress Score in GTMetrix


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   :


Please enter your comment!
Please enter your name here