구글블로그 팁

출처:http://internetricks4u.blogspot.in/2012/05/how-to-add-rounded-corner-to-popular.html#more

Now a days popular post is most useful widget as it shows most viewable posts of the blog in descending order of their priorities means, post which received maximum number of visitors will be on top position while the rest will be on decreasing order. The official look of the widget not gives up any impression to readers. So here you will learn to customize the official look of the widget as seen from above figure. We uses only CSS  to provide rounded corner around all the post. So lets see how this stuff will work?

How To Add Rounded Corner Around Popular Post Widget:-

The changes made by this tutorial can be seen by the above figure or in popular post widget of this blog. To get this changes in your popular post widget also

1. Login to Blogger Dashboard.
2. Go to Design /  Edit HTML.
3. Click "Expand Widget Templates".
4. Download the full template before making any changes in it (Learn More) .
5. Search for following string in BT.

]]></b:skin>

6. Paste the following code just above it.

Widget By Shahbaz Malik on http://internetricks4u.blogspot.com .popular-posts ul li  {border:1px solid #1874CD; margin-bottom:5px; border-radius:10px; padding-left:5px;  }  .popular-posts ul li:hover { text-decoration:none; border:1px solid #BFBFBF; }

Note:-Make Following Modification

• To change the border color of normal position simply change #1874CD to any desired value you want.
• To change the border color in hover state simply change #BFBFBF to any desired value ( The complete list of CSS color code are given here).

• If you don't get satisfactory result after performing all these steps then don't panic, simply drop comment below regarding your problem, I will lauch you shortly.