Wednesday 11 September 2013

Filled Under:

Beautiful Popular Posts Widget v.1



Popular posts widget is an effective tool to increase your blog pageviews and engage readers more on your
blog. It fetches and ranks posts based on most visited pages using your Google analytics data.











Add Popular Posts Widget
Go to Blogger > Layout
Click "Add a Gadget"
Choose "Popular Posts" from the list
You will need to configure its settings as shown in the image below: uncheck "image thumbnail" and also "snippet" Its better that you display at most 6-8 posts. Less is good and clean.





5. Save it


Customize Popular Posts Plugin

Now you need to change the default styles and change its look to our desired design using Custom styles.
Go To Blogger > Template
Backup your Template
Click Edit HTML
Search for </b:skin>. Click the black arrow to expand the code.



5. Paste the following Styles just above </b:skin>
/*--- TechnoFusion Popular Posts --- */
.popular-posts ul {
padding-left: 0px;
counter-reset: popcount;
}

.popular-posts ul li:before {
list-style-type: none;
margin-right: 15px;
padding: 0.3em 0.6em;
counter-increment: popcount;
content: counter(popcount);
font-size: 16px;
background: #292D30;
color: #ffffff;
position: relative;
font-weight: bold;
font-family: georgia;
float: left;
border: 2px solid #dddddd;
box-shadow: 1px 2px 9px #666666; }

.popular-posts ul li {
border-bottom: 1px dashed #dddddd;
}

.popular-posts ul li:hover {
border-bottom: 1px dashed #696969;
}

.popular-posts ul li a {
text-decoration:none; color:#5A5F63;
}


.popular-posts ul li a:hover {
text-decoration:none;

}

Customization:
To change the background color of the Square bubble edit #292D30
To change the text color of the bubble edit #ffffff
By default the shape of the bubble is Square. To change it to Circle simply add the following code just after box-shadow: 1px 2px 9px #666666;


border-radius:15px;




6. Save your template and you are all done!

Visit your blog to see it working just perfectly.

Please write comments about this tutorial or tell me any faults which you found while creating and publishing. I will always there to help you....





0 comments:

Post a Comment

  • Home
  • About Us
  • Contact Us
  • Write For Us
  • Sitemap
  • Privacy Policy
  • Back To Top