Create your own Popular Posts and Recent Posts Widget

        As you already know, Blogger Popular Posts and Blogger Recent Posts Widgets will show Posts based on options selected in widget. Further you do not have any control as to what Posts will be shown.

       Here I'll explain you how to create your own custom Popular Posts/Recent Posts widget using CSS and decide which Posts in which order it should be shown.

1) Log into www.blogger.com
2) Select your blog from dashboard.
3) Goto Layout -> click Add a Gadget.
4) Select HTML/JavaScript from add a Gadget options.
5) Leave Title part empty.
6) Copy and Paste following code in Content part and Save:

<style>

#recent_posts

{float:left;

width:200px;

border:4px double #4169E1;

background:#fff;

box-shadow: 5px 5px 5px #888888;

}

.post_title

{float:left;

width:200px;

height:20px;

padding-top:4px;

line-height:normal;

background:#4169E1;

}

.post_title a

{font:bold 12px Verdana;

color:#fff}

.recent_posts_topic

{float:left;

width:190px;

height:60px;

background:#F0F8FF;

border:2px double #FFFFFF;

margin:0px 0px 0px 2px;

}

.recent_posts_topic a

{font:12px Verdana;

color:#000;

text-decoration:none;}

.recent_posts_topic a:hover

{font:12px Verdana;

color:#1E90FF;

text-decoration:none;}

.recent_posts_topic img

{ border:0px solid #F0F0F0;

width:80px;

height:50px;

float:left;

margin:5px 0px 0px 2px;

}

</style>

<div id="recent_posts"> 

<div class="post_title"> 

<a>Popular Posts</a>

</div>

<div class="recent_posts_topic"> 

<img src="Your_Post_Image"/>

<a href="Your_Post_URL">Your Post Title</a>

</div>

</div>

If you want to add Post then copy and paste code highlighted in red after </div>.