How to Customize Popular Posts in Blogger

Design your own popular posts to make your blog look professional.

Here's a step by step instructions on how to do it.



Step 1. Go to Template >> Edit HTML

Step 2. Proceed on editing your template and find ]]></b:skin>

Step 3. Above the ]]></b:skin> copy and paste the code below:


<style>
/*--- Zakyri's Popular Posts --- */
.popular-posts ul{padding-left:0px;}
.popular-posts ul li {background: #FFF 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:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;

}
.popular-posts ul li:hover {
border:2px solid #ffbf00;
}
.popular-posts ul li a:hover {
text-decoration:none;
}
</style>


Step 4. Set up your popular posts by adding gadget on your layout. Go to Layout >> Add a Gadget.

Step 5. Select the gadget "Popular Posts".

Step 6. Uncheck the image thumbnail and snippet.

Step 7. Save your popular posts and see the result.



Note: If you have any suggestions regarding in what to post or problems you have encountered related in my topics, feel to contact me at my email listed in "Contact us" tab. I will make sure to reply with your concern within 24 hours.