Stylish Popular Posts Widget With Round Thumbnails For Blogger

Popular Posts  blog's template easily. So let's start the tutorial on how you can easily add a stylish popular posts widget to your blogspot blog.

Add Stylish Popular Posts Widget to Blogger Blog:

First of all, you need to add Blogger's default Popular Posts widget to your blog and using some CSS coding, modify it accordingly to your needs. So, follow the below-given steps.
  1. Simply, Go to Blogger > Layout.
  2. Click on Add a gadget link and Choose Popular Posts gadget from the gadgets list.
    3. Now make following settings: 
  • Set most viewed to Last 7 days (preferred) or you can set it according to your needs.
  • Check image thumbnail and snippet to show thumbnail along with post summary. It will make our gadget spicier.
  • Select no. of posts you want to show. In this example, I am selecting 6. You can show at most 10 posts. (Take a look at the picture below.)
  • Save the widget and head on to the steps mentioned below.
  1. Now Go to Blogger > Template.
  2. Backup your template to prevent it from any crash.
  3. Click on Edit HTML Tab and Search </b:skin> tag. (Use Ctrl+F for quick find)
  4. Now Just above the </b:skin>, paste the below given codings.
    5. /*--- BBeginner.Com Popular Posts --- */
    .popular-posts ul{padding-left:0px;}
    .popular-posts ul li {background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRdsFXQS_MWYygPZ7vAI3_VdGIuFeYtbuuSfOqhx7jP4Tp8XD35ASvXwodUEltDFWRZVmdPr9UwI9SPGO1e7Sbd9DnFoDHoq8Cg2ECxohZFrekM2denNblVpoGuKsvQWQ8jzWZTOjx7IM/s1600/bb-bullet.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);
    }
  5. Save your template and You're all done!
Now, take a look at your blog and see this amazing widget in action.
I hope you successfully added this great looking widget to your blog. If you are facing any difficulty then let me know in comments. I will be really happy to help you all :)

Sponsored Links : 

Comments

Post a Comment

Popular posts from this blog

How To Setup Freenom Domains (.Tk, .Ml, .Cf, .Ga, .Gq) As Blogger Custom Domain?

Image
Adding a custom domain to your blog brings more professionality and increase your rankings in search engines . Adding a custom domain to your blogger blog will change your blog address from yourblog.blogspot.com to yourblog.com, yourblog.tk, yourblog.net or whatever domain extension you registered. Today I am going to share a great tutorial on how you can register free .tk, .ga, .gq, .cf, .ml domains for your blog and use it as a custom domain name in blogger. This will surely build a trust toward your visitors and increase your visitors count too as people prefer to visit a custom domain blog instead of a sub-domain. So let's start the tutorial on using freenom free domain names as blogspot blog's custom domain. Also Check : Complete Guide to Setup WordPress Blog How to Register Free Freenom Domain : Just follow the below steps to register your .tk, .ml, .cf, .ga, .gq domain name for 1 year absolutely free of cost. After the completion, we will discuss on ho...
Read more

How To Hide/Remove Blogger Navbar?

Image
Blogger platform has many cool features thats why most blogger like and prefer it. Also, a new blogger blog contains many widgets which some people like but some dislike. They are Attribution widget , favicon and so on . One such widget is Blogspot Navbar (Navigation Bar) as some bloggers like this widget as it allows visitors to Follow, Share and Search your blog while some bloggers dislike it as this is not professional looking so they want to remove it. So today here we will learn the best 3 ways to completely hide/remove blogger navbar widget easily. How to Remove Blogger (Blogspot) Navbar? Method : 1 Go to the Layout section of your Blogger blog. Click on "Edit" link of Navbar widget and you should be in the Navbar Configuration window.​ Blogger navbar configuration window.  Choose "Off" and click on "Save" button. Method 2 : Go to Blogger Template > Edit HTML. Search for </b:skin> and just above it paste the fo...
Read more

How To Add Google Custom Search Engine To Blogger?

Image
blogger navbar provides a search box and there is also a search box widget for blogspot blog . The main drawback of this search engine is that it does not provide the exact matches to some extent. The best solution for this is Google Custom Search Engine. It provides the right content exact to the search, also it has professional looks too. You can easily change it looks according to your needs and your blog design. Moreover, you can monetize your search using Google Adsense too. So lets start the tutorial on how to add custom search engine to your blogger (blogspot) blog . Creating Google Custom Search for Blogger : First of all, click this link to go to Google Custom Search , once you are on the page you will see a blue button with a text on “Create a custom search engine” click on this button. You will be seen a page having a URL and language settings, Fill you site details accurately there. From the language drop down, select the language for your search engine then...
Read more