In this tutorial im gonna explain how to add Round corner popular
post widget for blogger.This works fine with every modern web
browsers. I used CSS3 to provide rounded corner around all the
post.You can follow below step to add it to your blog.Lets see how we
can add this to blogger.
How to add Round Corners Popular Post Widget for Blogger
1. Log in to blogger account and Click drop down.
2. Now select "Template" Like Below.
3. Now you can see Live on blog, Click EDIT HTML Button"
4. Find this tag by using Ctrl+F ]]></b:skin>
5. Paste below code Before ]]></b:skin> tag
/* The CSS Code for the menu starts here bloggertrix.com */ .popular-posts ul{padding-left:0px;} .popular-posts ul li {background: #FFF url() no-repeat scroll 5px 10px; list-style-type: none;padding:5px 5px 5px 20px !important; border: 1px solid #ddd;border-radius:30px; -moz-border-radius:30px; -webkit-border-radius:30px; -moz-border-radius: 30px; -webkit-border-radius: 30px; height: 40px; -moz-box-shadow: 3px 2px 5px #242424; -webkit-box-shadow: 3px 2px 5px #242424; box-shadow: 3px 2px 5px #242424;margin-bottom: 5px;height: 40px; } .popular-posts ul li a { font-style: italic; } .popular-posts ul li:hover { border:1px solid #d10202; -moz-box-shadow: 3px 2px 5px #d10202; -webkit-box-shadow: 3px 2px 5px #d10202; box-shadow: 3px 2px 5px #d10202; } .popular-posts ul li a:hover { text-decoration:none; } .popular-posts .item-thumbnail img { height:40px;width:40px; webkit-border-radius: 100px;-moz-border-radius: 100px;border-radius: 100px; -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);box-shadow: 0 1px 3px rgba(0, 0, 0, .4); } .popular-posts .item-thumbnail img:hover{ -moz-box-shadow: 0px 0px 5px #d10202; -webkit-box-shadow: 0px 0px 5px #d10202; box-shadow: 0px 0px 5px #d10202;}
6. Go to blogger and click Layout >> Add Gadget and select "Popular Posts"
7. Now you need to Configure Popular Posts.
This is designed for popular post without description. So, you have to Uncheck the snippet like above.Change other options as your like.
8. Now save your "Popular Posts"
You are done...
0 comment:
Post a Comment