Easy to Customize Blogger Popular Posts widget

In this article one of the ways to customize the blogger’s official popular post widget. Later post we discuss another way of customization of Popular post widget for blogger. By customizing popular post widget can attract more visitor and increase pageviews at the same time. Wonderful colors, image, border and stylish fonts shape you blogger post widget more attractive. This widget code is based on CSS style webmasters don’t need to work hard for customizing popular post widget. Lets’ begin the tutorials.

How to Customize Popular Post widget for blogger?

Sign into your blogger account
If you’ve already added Popular post widget then follow the below procedure other wise add Popular posts widget from “Add a Gadget” and select Popular post widget.

Then tick “all time” and un tick “image thumbnail and snippet” box, now select 10posts to display on your blog and “Save the Widget”. (As shown in the image above)
Click on “EDIT HTML” link tab
Now search for code

]]></b:skin>

After finding the code copy the below code and paste above to it

/*--- Popular Post Style www.Blogtariff.com Start --- */
.popular-posts ul{padding:0px; 0px; 0px; 0px;}
.popular-posts ul li {
background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdPJC3OGIk2fGt7wbaK9SSpq01IeGQAToIPPFS3pc-N9KVxEwU6KSe124oqwbRpCpUjXeNSc17L3WNCCC-Jc-3r67gQux2F8AVT4samirfQHWJfht4TP7UTsncxg5ceujnGDALEcXSesHH/s769/blogtariff.com-rd1.jpg) no-repeat 2px;
margin:0px 0px 5px 0px;
padding:5px 5px 5px 30px !important;
border: 1px solid #C2C0C0;
border-radius:8px;
-moz-border-radius:8px;
-webkit-border-radius:8px;
list-style-type: none;
}
.popular-posts ul li:hover {
background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilZZkn764tMcqzOL39oLoSxYO0kkiZHeF5QwcW-n9O9utlESCNY6nhEbmt0M64-a967hJgQ9HysoUEw63KELcqIsUPHOWExgL1UtzcO8fs52A7vzKQecUaRXvlkia4ljijNhQrB5SnTYQq/s769/blogtariff.com-rd2.jpg) no-repeat 2px;
border:1px solid #FE0B0B;
}

.popular-posts ul li a:hover {
text-decoration:none;
color:#0419F7;
}
/*--- Popular Post Style www.Blogtariff.com End--- */

Customization

Replace color code as highlilghted above with your choice colors by using our Color chart

Appreciation

If you enjoyed the above article comment your views and suggestions. We always appreciate on Subscribing to us and join with us on Facebook – Twitter.