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 how to u
Read more

How To Change Blogger (Blogspot) Template?

Image
When I started Blogging, I do not have much knowledge about the blog design and layout. At that time, I use default blogger templates on my blog which is not that much attractive. When I learn how to do modifications in default blogger templates and also how you can apply a third party blogspot/blogger template or theme to your blog. This is a quite simple task and require just few mouse clicks. No matter whether you want to change a bakery website design template  or any other kind of templates, it’s easy to do so. So let's start how you can change your blogger theme/template easily. Changing Blogger (Blogspot) Template : To get any third party template, simply search on google @Blogger Templates and you will find various free sites for it. Download any template of your choice.  Now to change your template follow the given steps : First of all, Log in to your Blogger account. Click on the drop down sajian and choose   Template . Press   Backup/Restore   button
Read more

How To Insert Emoji, Special Characters And Symbols In Blogger?

Image
Nowadays its a isu terkini going to use emojis to share feelings. People use to add emojis in every particular message to express their feelings while typing that message. Sometimes, a blogger also realizes to express his/her feelings through emojis while writing a blog post. Blogger platform provides such a great option by default in Post-Editor. You can use special characters, emojis, and symbols directly from your Blogger Post-Editor. Not only that, you can also draw special symbols through your mouse and get the perfect match of that specific character. You can use the Blogger "Insert special character" tool to insert arrows (↑→), mathematical symbols (⺟∫), accented (éü) or non-Latin characters (禁𓁗) and even emoji (🐦✋). So, let's start learning how you can insert emojis and special characters in blogger.  Also Check:   Blogger Released Free SSL (HTTPS) for Custom Domains Why Use Emoji in Blog Posts? : Advantages You must be aware that emoji were used over
Read more