Adding Beautiful Stylistic Cascading Popular Post Widget

Today, we will style your popular post widget that is different from the others, for you can design it like a terrace in your sidebar. We will just add a css code from your blogger HTML editor. So let's jump ahead with the process.
customizing popular post widget

Adding Beautiful Stylistic Cascading Popular Post Widget


Note: Before editing your template, it is advisable to have back-up for it.

Step 1. Go to Blogger Dashboard >> Template >> Edit HTML

customizing popular post widget

Step 2. Look for ]]></skin> and just before this tag, paste the code below,

customizing popular post widget

#PopularPosts1 ul{margin:0px;padding:5px 0;list-style-type:none}
#PopularPosts1 ul li{position:relative;margin:5px 0;padding:3px}
#PopularPosts1 ul li:first-child{background:#EFF5FB;width:95%}
#PopularPosts1 ul li:first-child:after{content:"1"}
#PopularPosts1 ul li:first-child + li{background:#E0ECF8;width:90%}
#PopularPosts1 ul li:first-child + li:after{content:"2"}
#PopularPosts1 ul li:first-child + li + li{background:#CEE3F6;width:85%}
#PopularPosts1 ul li:first-child + li + li:after{content:"3"}
#PopularPosts1 ul li:first-child + li + li + li{background:#A9D0F5;width:80%}
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
#PopularPosts1 ul li:first-child + li + li + li + li{background:#81BEF7;width:75%}
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
#PopularPosts1 ul li:first-child:after,#PopularPosts1 ul li:first-child + li:after,#PopularPosts1 ul li:first-child + li + li:after,#PopularPosts1 ul li:first-child + li + li + li:after,#PopularPosts1 ul li:first-child + li + li + li + li:after{position:absolute;top:20px;right:-15px;border-radius:50%;background:#fff; border: 1px dotted #353535; width:20px;height:20px;line-height:1em;text-align:center;font-size:17px;color:black;}
#PopularPosts1 ul li a{font-size:12px;color:#444;text-decoration:none}
#PopularPosts1 ul li a:hover{color:#222;text-decoration:none}
#PopularPosts1 {
margin-left: 20px;
}
.PopularPosts img {
padding-right:.4em; height: 38px; width: 38px;
}
#PopularPosts1 ul li .item-thumbnail {
float: left; border: 0; margin-right: 10px; background: transparent; padding: 0;
}
Step 3. Click Preview then save your template  and see if it blend with your  blog's environment.

Customization (Optional):

You can choose a variety of hexadecimal color here
A. First part (the color of each popular post box).
    --- Box no.1-5 the hexadecimal colors are  EFF5FBE0ECF8, CEE3F6, A9D0F5, 81BEF7 respectively. Change these hexadecimal colors with your own likeness.

B. Second part (the with or distance of the box container).
   --- Box no.1-5 the width are 95%, 90%, 85%, 80%, and 75% respectively. Increasing the value will increase the width and decreasing the value will also decrease the width.

C. Third part (the circular  number tag in each box).You can find the code that control this part at 15th- 17th line of the codes.
  --- Change the position (y-axis or vertical ) of the circle that bears the tag by replacing 20px. (Less than 20px, will place it higher and more than 20px will place it in the lower position).
----Change the placement of the circle (x-axis or horizontal) by replacing right to left,
----Change the color of the number inside the circle by replacing black with your own,

D.  Fourth part (the Size of the thumbnail)
---- Change the height and width of the thumbnail by replacing 38px,

E. Fifth part (the position or placement  of the thumbnail)
----You can place the thumbnail by changing the yellow bold text ( you can replace it with writing right)

Thank you for your PATIENCE and Smile!
The credits goes to the author if this article and to helplogger







About the Author:
tilt  hover effect
Hello folks! This is GOLDEN WORKS TV, the admin of this blog. No words could described my grateful appreciations to all newbie and professional bloggers around the world and most especially to Almighty God who gave me the wisdom...Read More
Follow him @ Twitter |Facebook

No comments :

Post A Comment!

Post A Comment!
We love to hear your feedbacks and suggestions. We will try our best to reply to your queries as soon as time allows. Please keep in mind that all comments are moderated manually by our editors team to minimize spamming, and all the links are nofollow.

Note:
1. To add HTML code in the box, please use our HTML editor generator.
2. Please do not spam. Those type of comments will be deleted upon our review.
3. We should appreciate an individual and suggestive discussion.

Best Regards,

GOLDEN WORKS TV

Related Posts Plugin for WordPress, Blogger...