Stylify your popular post widget in blogger

popular post widgetHi readers !! In our previous article, we have shared and awesome "Related post widget for blogger" and now we bring's you another cool  Blogger widget which will help you to reduce your blog's bounce rate. As we know that the "Popular post widget" is the most common but compulsory widget to have in your blog. It display's some of the most viewed articles of your blog. The default popular post widget provided by blogger, works perfect but it looks little old fashioned and dull. So in today's tutorial, we will learn how could you give a professional touch into the widget by adding some simple CSS coding in your template. if you want to see the demo, then take a look on our popular post widget.

How to install popular post widget in blogger:-

These  steps are so simple and easy that any new blogger will not face any kind of problem to install it in their blog.

  • Go To Blogger.com >> Your Blog >> Layout
  • Then select >> Edit (Popular Widget)
  • Make the changes as shown in the picture and hit the save button.

stylish popular post widget layout setting

  • Go To Blogger.com >> Your Blog >> Template
  • Now Backup your template.
  • Then select Edit HTML >> Proceed
  • Search for ]]></b:skin> and just before/above it paste the following code.

.popular-posts ul li {
margin-top:0;
border-bottom:1px dashed #d2d2d2;
}
.PopularPosts .item-title {
font-weight:700;
font-style:italic;
font-size:14px;
text-align:justify;
}
.PopularPosts .widget-content ul li {
background:#fff;
padding:0;
}
.PopularPosts img {
width:110px;
padding:.4em;
}

All Done : Now everything is completed just  Save your Template by pressing Save template button.

From Editors Desk:-

Hope you have enjoyed the cool and interesting session about Popular Post Widget For Blogger. We are trying to create more widgets that benefits to you and your users. If you would face any problem to add this Popular Post Widget feel free to ask till then, Blessings and Happy Popularizing.

Comments

  1. Prince Asfi

    That's really a great Style. I really like it, I'm going to use it on my blogger blog too. Hope it will work for me ;)

  2. Ghost Rider

    Great post. I was checking constantly this blog and I’m inspired! Extremely
    useful info specifically the ultimate phase I deal with such information a
    lot. I was looking for this particular information for a long time. Thank you and best
    of
    luck.

        • For your blog apply this css :)

          .item-thumbnail-only {
          margin-top: 20px;
          }
          .popular-posts ul li {
          margin-top: 0px;
          border-bottom: 1px dashed #d2d2d2;
          }
          .PopularPosts .item-title {
          font-weight: bold;
          font-style: italic;
          font-family: 'Lora', serif;
          font-size: 14px;
          text-align: justify;
          }
          .PopularPosts .widget-content ul li {
          padding: 0;
          background: #ffffff;
          }
          .PopularPosts img {
          padding: .4em;
          box-shadow: 0 0 5px #D56540;
          width: 200px;
          -webkit-transition: all 0.5s ease;
          -moz-transition: all 0.5s ease;
          transition: all 0.5s ease;
          }
          .PopularPosts img:hover {
          padding: .4em;
          box-shadow: 0 0 5px #000000;
          opacity: 0.2;
          -webkit-transition: all 0.5s ease;
          -moz-transition: all 0.5s ease;
          transition: all 0.5s ease;
          }

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

CommentLuv badge

Looking for More Awesomeness?