How To Add Rounded Corner To The Popular Post

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?

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 .
5. Search for following string in BT.

]]></b:skin>

6. Paste the following code just above it.

Widget By Durai Sankar on http://moreforblogger.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).

And if you liked this post, please consider sharing it. Thanks

Read More

Recent Posts Widget with Thumbnails for Blogger

  Today we will learn how to add a recent posts widget which comes along with posts thumbnails and snippets too.

Here is how you can add a Recent Posts widget/gadget with thumbnails to your Blogger (blogspot or custom domain) blog. It's pretty simple. Follow the steps below:

1. Go To Blogger > Design > Page Elements
2. Click on "Add a Gadget" link
3. From the pop-up window, choose HTML/JavaScript
4. Paste the following code:

<div class="eggTray">
<script src="http://helplogger.googlecode.com/svn/trunk/listbadge.js">{"pipe_id":"1a6640e2a78b2c6e736f2220529daae5","_btype":"list",
"pipe_params":{"URL":"YOUR-BLOG/SITE-URL/feeds/posts/default"},
"hideHeader":"false","height":"500","count": 8 }</script>
<div style="font-family: arial, sans-serif; font-size: 9px;" class="ycdr"><a href="http://helplogger.blogspot.com/2012/05/recent-posts-widget-with-thumbnails-for.html" target="_blank" title="Grab this widget">Recent Posts Thumbnails</a> <a href="http://helplogger.blogspot.com/" target="_blank">Blogger Widget</a></div><noscript>Your browser does not support JavaScript!</noscript></div>
<style type=text/css>
.eggTray {margin:10px 0px;padding:0px;}
.ybr li  {border-bottom:0px #cccccc dotted; padding:0px 0px 10px 0px!important;}
.pipesTitle {padding-top:0px;}
.pipesDescription {display:true;}
.ycdr {background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7KDtWUeT8TlDIFRBafdI0t5NpItxJ8VLblk3QYn1vPaN4XLt_U_QN2iune3ecPgEhXQjsa0bLE0HuDPAuEwxNKLLvm_DacW7x8A_8mCU6Fq7pJKNFsuTfRDdRfiFMz4_OLfnmie7JrBs/s1600/logo.png) 0px 0px no-repeat; padding: 1px 0px 0px 19px; height:14px; margin: 4px 0px 0px 0px;line-height:14px;}
.ycdr, .ycdr a {color:#999999;}
.widget .popular-posts ul {padding-left:0;}
</style>

Change YOUR-BLOG/SITE-URL with the url address of your site/blog (ex: http://moreaboutblogger.blogspot.com) and be careful to have no forward slash symbol "/" at the end of your url

Settings

• To disable the scroll bar, remove the number 500
• By default, this widget is set to display a maximum of 8 recent posts. To change this number, replace the number 8 with the number of posts desired
• if you want only the posts titles to appear, change true to none and "0" from padding-top:0px with 10

5. Save your widget. And that's it!

If you need more help, leave your comment below.

Source:Internet

Read More