Don't Miss

Add 2 Stylish Custom Popular Posts Widget To Blogger

By Zohaib Liaqat - 16 Comments
Popular posts is most commonly used widget in every blog.Blogger has its own popular posts widget but it is not much attraction and effect your whole template.But the good thing about that widget is that it can be easily customized using CSS.So, in this post we will discuss 2 styles for customizing popular posts in blogger.
Follow these steps to customize popular posts widget:-

Adding Popular Posts Widget To Blogger

Step 1. Add the default popular posts widget by blogger to your blog :-
Step 2. Go to Blogger Dashboard >> Layout >>Add A Gadget >> Select Popular Posts Widget From The List >> And hit the Save button.
Now to customize the popular post widget Follow the following steps :
  • Select Template Option
  • Click on Edit HTML
  • Search (Ctrl + F) for  ]]></b:skin
  • Just Above It Paste One Of The Following Popular Posts Widget

Style 1 :

 

 .popular-posts ul{padding-left:0px;}
    .popular-posts ul li {
    list-style-type: none;
    margin:0 0 5px 0px;
    padding:5px 5px 5px 20px !important;
    border: 1px solid #dddddd;
           -moz-box-shadow:1px 1px 2px #dcdcdc;
-web-kit-box-shadow: 1px 1px 2px #dcdcdc;
-goog-ms-box-shadow:1px 1px 2px #dcdcdc;
box-shadow:1px 1px 2px #dcdcdc;
border-radius:5px;
background: rgb(44,83,158); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(44,83,158,1) 0%, rgba(44,83,158,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(44,83,158,1)), color-stop(100%,rgba(44,83,158,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(44,83,158,1) 0%,rgba(44,83,158,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(44,83,158,1) 0%,rgba(44,83,158,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(44,83,158,1) 0%,rgba(44,83,158,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(44,83,158,1) 0%,rgba(44,83,158,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2c539e', endColorstr='#2c539e',GradientType=0 ); /* IE6-9 */
    }

    .popular-posts ul li:hover {
      -moz-box-shadow:1px 1px 2px #dcdcdc;
-web-kit-box-shadow: 1px 1px 2px #dcdcdc;
-goog-ms-box-shadow:1px 1px 2px #dcdcdc;
box-shadow:2px 2px 4px #333333;
    border:1px solid #333333;
color:#fff;
    }

.popular-posts ul li a
{
text-decoration:none;
font:16px Georgia, verdana;
color:#ffffff;
}
    .popular-posts ul li a:hover {
    text-decoration:none;
  
    }

Style 2 :

.popular-posts ul{padding-left:0px;}
    .popular-posts ul li {background: #ffffff  no-repeat scroll 5px 10px;
    list-style-type: none;
    margin:0 0 5px 0px;
    padding:5px 5px 5px 20px !important;
    border: 1px solid #dddddd;
    border-radius:7px;
    -moz-border-radius:7px;
    -webkit-border-radius:7px;
    }
    .popular-posts ul li:hover {
        border:1px solid #555555;
    }

.popular-posts ul li a
{
text-decoration:none;
font:16px Georgia, verdana;
color:#333333;
}
    .popular-posts ul li a:hover {
    text-decoration:none;
    color:#555555;
    }
  • And Click On Save Template.
And that's it !

Tags:

16 comments to ''Add 2 Stylish Custom Popular Posts Widget To Blogger"

ADD COMMENT
  1. Arizona has turned into the latest state to assume responsibility against the payday advance industry. With yearly rate rates on credits coming to more than 400%, many wanted to venture in.
    Cash Advance

    ReplyDelete
  2. Any individual would first take a gander at the most straightforward alternatives accessible to him, when searching for quick budgetary help. Cash Advance

    ReplyDelete
  3. webroot geek squad experts do deliver reliable home-based services for any pre-installed devices and gadgets Initiate a discussion session with the Trend micro geek squad team to quickly resolve your accessory related queries Professional tech executives on board to help in resolving issues related to account management, payment and other types of information up gradation Get the privilege to check with the current status of the troubleshooting process that is handled by the Geek Support experts. Geek squad appointment Highly convenient repair returns guaranteed with the tech support Looking for online multi-device support?

    ReplyDelete
  4. geek squad tech support is one of the leading company for each office and enterprise shoppers. geek squad chat offer you services from the expertise and experienced professionals. Our specialists promise you to deliver fast, economical and efficient facilities for all of your digital and technology-based issues. geek squad chat with agent See sample of current Geek Squad Protection Terms and Conditions for specific coverage and exclusions. Power surges can happen at any time, causing damage to your equipment. geek squad chat Most manufacturers’ warranties don’t cover power surges, but with Geek Squad Protection, you don’t have to worry. geek squad tech support

    ReplyDelete
  5. Slotxo บริการ สล็อตออนไลน์ สล็อตxo แจกเครดิตฟรี พร้อม ทางเข้า slotxo เกมส์ใหม่กว่า 100 เกมส์ สมัคร slotxo ได้เลยตอนนี้ บริการ 24 ชั่วโมง.
    Slotxo
    สล็อตxo
    สล็อตxo บนมือถือ
    สมัคร slotxo
    สมัคร slotxo รับโบนัสฟรี

    ReplyDelete
  6. kaspersky geek squad download Website Protect your devices, data & your family with the growth of the digital world, online protection is energetic. It is extremely significant to protect your PCs, Mac, as well as mobile devices & tablets with kaspersky geek squad install This can be complete with the help of Kaspersky Internet security & anti-virus products from kaspersky geek squad download that protects all devices used on digital platforms.
    Kaspersky Geek Squad Download |
    Kaspersky Geek Squad Renewal |
    Kaspersky Geek Squad Install |
    Kaspersky Geek Squad Activate |
    Kaspersky Geek Squad Uninstall |

    ReplyDelete