Styling Most Popular Articles Widget on your Blog

Most Popular is the important gadget of the blog component. As a gadget blog that is generally placed on the sidebar. Most popular allows you to see and analyze which ones are most preferred articles on your blog. As the picture above you will make the Most Popular Blog so it looks more elegant appearance and make your blog more impressive.

Let's get started Immediately, first we must find a gadget of most popular from the basic gadget of blog that has available. Login to your blog dashboard and then click Layout, on the layout, add gadgets by pressing add a gadget button in the position to be placed as shown as the above. After pressing add a gadget button, will display a new window all of the gadgets of blog. Find a Popular Post gadget on basic gadget, then press the gadget as shown as the picture below!

After that you will go to Configure Popular Post as in the picture right above. Fill the Title as Most Popular or anything you wish | Most viewed: All time | Show : tick at image thumbnail and snipset, Display up until 4 posts or the number that want. If you already finished then click save button. Now you can see the default of popular post gadget display on your blog, as the following picture below.

This is the Most Popular Articles display but still using the default of template base style. In order to make it look more good, we will insert additional css script to the end of the skins of your blog template. As usual to find the the end position of the template skin. Still on your dashboard, click template> edit HTML. In the script code of your templates press Ctrl + F and type ]]></b:skin>. Put the most popular additional css script before this code ]]></b:skin>.

Now you can create the css script for most popular that you have made. I will give you the example of css script to give the style of most popular blog that you have, to make your blog display more attractive. The css script below you can change as well as possible you wish. I know especially for the colour it is depending on your template as the overall of the template that you use.

#PopularPosts1 {max-width: 350px}
#PopularPosts1 dd {float: left; border-bottom: none; margin: 8px 8px 0 8px; background: none; display: block; padding: 0;}
#PopularPosts1 img {-webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; transition: all 0.5s ease; padding: 4px; background: #eee; background: -webkit-gradient(linear, left top, left bottom, from(#eee), color-stop(0.5, #ddd), color-stop(0.5, #c0c0c0), to(#aaa)); background: -moz-linear-gradient(top, #eee, #ddd 50%, #c0c0c0 50%, #aaa); -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: 0 0 3px rgba(0,0,0,.7); -moz-box-shadow: 0 0 3px rgba(0,0,0,.7); box-shadow: 0 0 3px rgba(0,0,0,.7);}
#PopularPosts1 img:hover { -moz-transform: scale(1.2); -webkit-transform: scale(1.2); -o-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); -webkit-box-shadow: 0 0 20px rgba(238,132,84,.8), inset 0 0 20px rgba(255,255,255,1); -moz-box-shadow: 0 0 20px rgba(238,132,84,.8), inset 0 0 20px rgba(255,255,255,1); box-shadow: 0 0 20px rgba(238,132,84,.8), inset 0 0 20px rgba(255,255,255,1);}
.popular-posts ul{padding-left:0px;}
.popular-posts ul li {
background: #FFF no-repeat scroll 5px 10px;
list-style-type: none;
margin:0 0 5px 0px;
padding:5px 5px 5px 20px !important;
border: 1px solid #ddd;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
.popular-posts ul
li:hover {
border:1px solid #d2ac67;
}
.popular-posts ul
li a:hover {
text-decoration:none;
}

This CSS script give the style of your popular post with thumbnail effect hover, and the border line that will change of the color when the cursor through on each article on most popular article. If you like this style, use it or you can adjust the css script above just little bit more. Good Luck!