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
#PopularPosts1 ul{margin:0px;padding:5px 0;list-style-type:none}Step 3. Click Preview then save your template and see if it blend with your blog's environment.
#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;
}
Customization (Optional):
You can choose a variety of hexadecimal color hereA. First part (the color of each popular post box).
--- Box no.1-5 the hexadecimal colors are EFF5FB, E0ECF8, 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:
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
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