You can see demo from below link

• Login to Blogger Dashboard and navigate to Design – Page Elements
• Click “Add Gadget” and Choose “Popular Posts”(If you already have this gadget skip this step)
• After you have Popular Post Gadget “Add Gadget” again and select “HTML/Javascript”
• Put all script bellow to the “Content” of HTML/Javascript Gadget
• If you have already jQuery in your Template please delete from my script
• Done- your popular post now with animation

<style>
* {
	margin: 0;
	padding: 0;
}

body { 
    font: 11px Helvetica, Arial, sans-serif;
}

#wrapper {
    width: 800px;
    margin: 60px auto;
}

#intro {
    padding-bottom: 10px;
}

#slider {
    width: 800px;
    margin: 0 auto;
    position: relative;
	border: 10px solid #ccc;
}

.scroll {
	overflow: hidden;
	width: 800px;
    margin: 0 auto;
    position: relative;
}

.scrollContainer {
	position: relative;
}

.scrollContainer div.panel {
    padding: 10px;
    width: 274px;
	height: 318px;
}

#left-shadow {
	position: absolute;
	top: 0;
	left: 0;
	width: 12px;
	bottom: 0;
	background: url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/leftshadow.png) repeat-y;
}

#right-shadow {
	position: absolute;
	top: 0;
	right: 0;
	width: 12px;
	bottom: 0;
	background: url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/rightshadow.png) repeat-y;
}

.inside {
	padding: 10px;
	border: 1px solid #999;
}

.inside img {
	display: block;
	border: 1px solid #666;
	margin: 0 0 10px 0;
	width: 250px;
}

.inside h2 {
	font-weight: normal;
	color: #111;
	font-size: 16px;
	margin: 0 0 8px 0;
}

.inside p {
	font-size: 11px;
	color: #ccc;
}

a {
	color: #999;
	text-decoration: none;
	border-bottom: 1px dotted #ccc;
}

a:hover {
	border-bottom: 1px solid #999;
}

.scrollButtons {
    position: absolute;
    top: 127px;
    cursor: pointer;
}

.scrollButtons.left {
    left: -45px;
}

.scrollButtons.right {
    right: -45px;
}

.hide {
    display: none;
}

</style>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
	<script src="http://accordion-template.googlecode.com/svn/trunk/slidermovingbox.js" type="text/javascript" charset="utf-8"></script>

Don’t Copy This Post because this Original from my Blog (Blogger Widget)
Please read Copyright of All post at the Footer.

I have received many comment ask about how to show my popular post only in home page. actually this trick is very easy many blogger already made tutorial about this. You can search from google. The method is usng if conditional from blogger.

if you want show all section you don’t have to ‘Expand Widget Template’
find this

<b:section class='tabs' id='crosscol' maxwidgets='1' showaddelement='yes'>
<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'/>
</b:section>

Change to this

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:section class='tabs' id='crosscol' maxwidgets='1' showaddelement='yes'>
<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'/>
</b:section>
</b:if>

From demo click any posts and you can’t see Popular post widget anymore

Now I’ll show this tricks by using New Blogger Dashboard

Click Template from Dropdown of your Blog

Click edit HTML

Click Proceed

Search :

<b:section class='tabs' id='crosscol' maxwidgets='1' showaddelement='yes'>
<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'/>
</b:section>

Replace with

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:section class='tabs' id='crosscol' maxwidgets='1' showaddelement='yes'>
<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'/>
</b:section>
</b:if>

You can see demo from below link

• Login to Blogger Dashboard and navigate to Design – Page Elements
• Click “Add Gadget” and Choose “Popular Posts”(If you already have this gadget skip this step)
• After you have Popular Post Gadget “Add Gadget” again and select “HTML/Javascript”
• Put all script bellow to the “Content” of HTML/Javascript Gadget
• If you have already jQuery in your Template please delete from my script
• Done- your popular post now with animation

<style>
@charset "utf-8";
/* CSS Document */
.lof-slidecontent, .lof-slidecontent a {
	color:#FFF;	
}
.lof-slidecontent a.readmore{
	color:#58B1EA;
	font-size:95%;
	
}
.lof-slidecontent{
	position:relative;
	overflow:hidden;
	border:#F4F4F4 solid 1px;
}
.lof-slidecontent .preload{
	height:100%;
	width:100%;
	position:absolute;
	top:0;
	left:0;
	z-index:100000;
	text-align:center;
	background:#FFF
}
.lof-slidecontent .preload div{
	height:100%;
	width:100%;
	background:transparent url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/load-indicator.gif) no-repeat scroll 50% 50%;
}
.lof-main-outer{
	position:relative;
	height:100%;
	width:800px;
	z-index:3px;
	overflow:hidden;
}


/*******************************************************/
.lof-main-item-desc{
	z-index:100px;
	position:absolute;
	bottom:50px;
	left:0px;
	width:350px;
	background:url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/bg_trans.png);
	height:100px;
	/* filter:0.7(opacity:60) */
	padding:10px;
}
.lof-main-item-desc p{
	margin:0 8px;
	padding:8px 0
}
.lof-main-item-desc h3{
	padding:0;
	margin:0
}
.lof-main-item-desc h2{
	padding:0;
	margin:15px 0 0 0px;
}
.lof-main-item-desc h3 a{	
	margin:0;
	background:#C01F25;
	font-size:75%;
	padding:2px 3px;
	font-family:"Trebuchet MS",Trebuchet,Arial,Verdana,sans-serif;
	text-transform:uppercase;
	text-decoration:none
}
.lof-main-item-desc h3 a:hover{

	text-decoration:underline;
}
.lof-main-item-desc h3 i {
	font-size:70%;
}

/* main flash */
ul.lof-main-wapper{
	/* margin-right:auto; */
	overflow:hidden;
	background:transparent url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/load-indicator.gif) no-repeat scroll 50% 50%;
	padding:0px;
	margin:0   !important;
	position:absolute;
	overflow:hidden;
}

ul.lof-main-wapper li{
	overflow:hidden;
	padding:0px   !important;
	margin:0px;
	float:left;
	position:relative;
}
.lof-opacity  li{
	position:absolute;
	top:0;
	left:0;
	float:inherit;
}
ul.lof-main-wapper li img{
	padding:0px  !important;	
}

/* item navigator */
.lof-navigator-wapper {
	position:absolute;
	bottom:10px;
	right:10px;
	background:url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/transparent_bg.png) repeat;
	padding:5px 0px;
}
.lof-navigator-outer{
	position:relative;
	z-index:100;
	height:180px;
	width:310px;
	overflow:hidden;
	color:#FFF;
	float:left
}
ul.lof-navigator{
	top:0;
	padding:0;
	margin:0;
	position:absolute;
	width:100%;
	background:none !important;
	margin-top: 0 !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}
ul.lof-navigator li{
	cursor:hand !important; 
	cursor:pointer !important;
	list-style:none !important;
	padding:0 !important;
	margin-left:0px !important;
	overflow:hidden !important;
	float:left !important;
	display:block !important;

	text-align:center !important;

}
ul.lof-navigator li img{
	border:#666 solid 3px;	
}
ul.lof-navigator li.active img, ul.lof-navigator li:hover img {
	border:#A8A8A8 solid 3px;
}
.lof-navigator-wapper .lof-next,  .lof-navigator-wapper .lof-previous{
	display:block;
	width:22px;
	height:30px;
	color:#FFF;
	cursor:pointer;

}
.lof-navigator-wapper .lof-next {
	float:left;	
	text-indent:-999px;
	margin-right:5px;
	background:url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/arrow-l.png) no-repeat right center;
}
.lof-navigator-wapper .lof-previous {
	float:left;	
	text-indent:-999px;
	margin-left:5px;
	background:url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/arrow-r.png) no-repeat left center;
}
#lofslidecontent45 {width:880px;height:340px;}
.lof-main-outer {width:880px; height:340px;}

.lof-main-wapper img {height:340px !important; width:880px !important}
.lof-navigator-wapper img {height:32px !important; width:80px !important}
</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript" src="http://accordion-for-blogger.googlecode.com/svn/trunk/jquery.easing.js"></script>
<script language="javascript" type="text/javascript" src="http://accordion-for-blogger.googlecode.com/svn/trunk/scriptlofblogv2.js"></script>
<script type="text/javascript">
 $(document).ready( function(){	
		var buttons = { previous:$('#lofslidecontent45 .lof-previous') ,
						next:$('#lofslidecontent45 .lof-next') };
						
		$obj = $('#lofslidecontent45').lofJSidernews( { interval : 4000,
												direction		: 'opacitys',	
											 	easing			: 'easeOutBounce',
												duration		: 1200,
												auto		 	: true,
												maxItemDisplay  : 4,
												navPosition     : 'horizontal', // horizontal
												navigatorHeight : 32,
												navigatorWidth  : 80,
												mainWidth:880,
												buttons			: buttons} );	
	});
</script>

Don’t Copy This Post because this Original from my Blog (Blogger Widget)
Please read Copyright of All post at the Footer.

You can see demo from below link

• Login to Blogger Dashboard and navigate to Design – Page Elements
• Click “Add Gadget” and Choose “Popular Posts”(If you already have this gadget skip this step)
• After you have Popular Post Gadget “Add Gadget” again and select “HTML/Javascript”
• Put all script bellow to the “Content” of HTML/Javascript Gadget
• If you have already jQuery in your Template please delete from my script
• Done- your popular post now with animation

<style>
@charset "utf-8";
/* CSS Document */
.lof-slidecontent{
	position:relative;
	overflow:hidden;
	border:#F4F4F4 solid 1px;
	width:892px;
	height:300px;
}
.lof-slidecontent .preload{
	height:100%;
	width:100%;
	background:#FFF;
	position:absolute;
	top:0;
	left:0;
	z-index:100000;
	color:#FFF;
	text-align:center
}
.lof-slidecontent .preload div{
	height:100%;
	width:100%;
	
	background:transparent url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/load-indicator.gif) no-repeat scroll 50% 50%;
}
.lof-main-outer{
	position:relative;
	height:100%;
	width:600px;
	z-index:3px;
	overflow:hidden;
	float:right;
}


/*******************************************************/
.lof-main-item-desc{
	z-index:100px;
	position:absolute;
	top:150px;
	left:50px;
	width:400px;
	background:url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/transparent_bg.png);

	/* filter:0.7(opacity:60) */
}
.lof-main-item-desc p{
	color:#FFF;
	margin:0 8px;
	padding:8px 0
}
.lof-main-item-desc h3 a{
	color:#FFF  !important;	
	margin:0 !important;
	font-size:140% !important;
	padding:20px 8px 2px !important;
	font-family:"Trebuchet MS",Trebuchet,Arial,Verdana,sans-serif !important;
}
.lof-main-item-desc h3 a:hover{
	color:#FF6;
	text-decoration:underline;
}


/* main flash */
ul.lof-main-wapper{
	/* margin-right:auto; */
	overflow:hidden;
	background:transparent url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/load-indicator.gif) no-repeat scroll 50% 50%;
	padding:0px;
	margin:0  !important;
	height:300px;
	width:600px;
	position:absolute;
	overflow:hidden;
}

ul.lof-main-wapper li{
	overflow:hidden;
	padding:0px  !important;
	margin:0px;
	height:100%;
	width:600px;
	float:left;
}
.lof-opacity  li{
	position:absolute;
	top:0;
	left:0;
	float:inherit;
}
ul.lof-main-wapper li img{
	padding:0px !important;	
	width:600px  !important;
	height:300px  !important;
}

.lof-main-wapper{
		margin-left:auto;
		margin-right:inherit;
		clear:both;
		height:300px;
	}


li-desc{
	z-index:100px;
	position:absolute;
	top:150px;
	left:50px;
	width:400px;
	background:url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/transparent_bg.png);

	/* filter:0.7(opacity:60) */
}
li-desc p{
	color:#FFF;
	margin:0 8px;
	padding:8px 0
}
li-desc h3 a{
	color:#FFF;	
	margin:0;
	font-size:140%;
	padding:20px 8px 2px;
	font-family:"Trebuchet MS",Trebuchet,Arial,Verdana,sans-serif;
}
li-desc h3 a:hover{
	color:#FF6;
	text-decoration:underline;
}

/* item navigator */
ul.lof-navigator{
	top:0  ;
	padding:0  ;
	margin:0 ;
	position:absolute ;
	width:100% ;
	background:none !important;
	margin-top: 0 !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}
ul.lof-navigator li{
	cursor:hand ; 
	cursor:pointer ;
	list-style:none ;
	width:100%  !important;
	padding:0  !important;
	margin:0 !important;
	overflow:hidden !important;
}
.lof-navigator-outer{
	position:absolute !important;
	z-index:100 !important;
	height:300px !important;
	width:310px  !important;
	overflow:hidden  !important;
	color:#FFF !important;
	left:0 !important
	top:0 !important;
	right:inherit !important;
}
.lof-navigator li.active{
	background:url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/arrow-bg2.gif) center right no-repeat; 
	color:#FFF
}
.lof-navigator li:hover{
	
}


.lof-navigator li h3{
	color:#FFF;
	font-size:120%;
	padding:15px 0 0 !important;
	margin:0;

}
.lof-navigator li div{
	background:url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/transparent_bg.png);
	color:#FFF;
	height:100%;
	position:relative;

	padding-left:15px;
	border-top:1px solid #E1E1E1;
	margin-left:inherit;
	margin-right:18px;
}

.lof-navigator li.active div{
	background:url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/grad-bg2.gif);
	color:#FFF;

	margin-left:inherit;
	margin-right:18px;

}
.lof-navigator li img{
	height:60px;
	width:60px;
	margin:15px 15px 10px 0px;
	float:left;
	padding:3px;
	border:#C5C5C5 solid 1px;
}
.lof-navigator li.active img{
	border:##6C8E5C  solid 1px;
}
.lof-navigator li.active h3{
	color:#FFF;

.PopularPosts .item-title{0 !important; }
}
.PopularPosts .widget-item-control {display:none}

	ul.lof-main-wapper li {
		position:relative;	
	}


</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript" src="http://accordion-for-blogger.googlecode.com/svn/trunk/jquery.easing.js"></script>
<script language="javascript" type="text/javascript" src="http://accordion-for-blogger.googlecode.com/svn/trunk/scriptlofslider.js"></script>
<script type="text/javascript">
 $(document).ready( function(){	
		$('#lofslidecontent45').lofJSidernews( { interval:2000,
											 	easing:'easeOutBounce',
												duration:1200,
												auto:true } );						
	});

</script>

Don’t Copy This Post because this Original from my Blog (Blogger Widget)
Please read Copyright of All post at the Footer.

A web designer is responsible for designing websites. Just having quality information is not enough these days, one can find hundreds of sites online which provide information on a particular topic, the challenge is to make it look appealing enough and easy-to-use to provide users with a good web experience so that they will come back to your site, and this is what web designers do. web designer salary is generally in the $50,000 – $60,000 bracket.

Video gaming is a billion dollar industry, and can no longer be looked upon as just something that kids do. These days most gamers are 20-30 year olds and so the demand for good video game designers with an eye for details and classy and intriguing design is skyrocketing. The best part about this job is that all you need is talent and also street smarts and marketing skills to make it big. Even an inexperienced video game designer salary can be up to $46,000 an year if he has the creativity and skill to design good quality games. Sometimes, with experience come perks, and designers with over 3 years experience make $55,000 whereas after getting 6 years experience in the field, if you are still creative enough to create original games, you can earn up to $70,000 an year.

Working in IT Support involves a lot more customer interaction and hands on experience. An IT Support person is expected to provide technical support to customers in case of any technical glitches that customers face. You will be expected to know the in and out of all the products manufactured and sold, the most common problems that might arise, and how to fix those problems. It is very important for a person in IT Support to have good communication skills so that you can effectively walk the customer through what to do and how to fix an issue. Another important requirement included in IT Support Job Description is the person would have good analytical thinking and must be quick on your feet in order to quickly analyze the problem and determine a solution.

If you are interested in software, but if you think IT Support is too stressful, then you might prefer to go through IT Analyst Job Description. The main job of the IT Analyst is to determine the IT and software update needs of the organization that they are working for and keep the higher management apprised of the cost the company would incur if they purchased that software.

You can see demo from below link

Demo
This script very easy to install, you only have to put the script to the new Gadget

• Login to Blogger Dashboard and navigate to Design – Page Elements
• Click “Add Gadget” and Choose “Popular Posts”(If you already have this gadget skip this step)
• After you have Popular Post Gadget “Add Gadget” again and select “HTML/Javascript”
• Put all script bellow to the “Content” of HTML/Javascript Gadget
• If you have already jQuery in your Template please delete from my script the jQuery Link
• Done- your popular post now with animation

<style>
@charset "utf-8";
/* CSS Document */
.lof-slidecontent{
	position:relative;
	overflow:hidden;
	border:#F4F4F4 solid 1px;
	width:892px;
	height:300px;
}
.lof-slidecontent .preload{
	height:100%;
	width:100%;
	background:#FFF;
	position:absolute;
	top:0;
	left:0;
	z-index:100000;
	color:#FFF;
	text-align:center
}
.lof-slidecontent .preload div{
	height:100%;
	width:100%;

	background:transparent url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/load-indicator.gif) no-repeat scroll 50% 50%;
}
.lof-main-outer{
	position:relative;
	height:100%;
	width:600px;
	z-index:3px;
	overflow:hidden;
}

/*******************************************************/
.lof-main-item-desc{
	z-index:100px;
	position:absolute;
	top:150px;
	left:50px;
	width:400px;
	background:url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/transparent_bg.png);

	/* filter:0.7(opacity:60) */
}
.lof-main-item-desc p{
	color:#FFF;
	margin:0 8px;
	padding:8px 0
}
.lof-main-item-desc h3 a{
	color:#FFF;
	margin:0;
	font-size:140%;
	padding:20px 8px 2px;
	font-family:"Trebuchet MS",Trebuchet,Arial,Verdana,sans-serif;
}
.lof-main-item-desc h3 a:hover{
	color:#FF6;
	text-decoration:underline;
}

/* main flash */
ul.lof-main-wapper{
	/* margin-right:auto; */
	overflow:hidden;
	background:transparent url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/load-indicator.gif) no-repeat scroll 50% 50%;
	padding:0px;
	margin:0  !important;
	height:300px;
	width:600px;
	position:absolute;
	overflow:hidden;
}

ul.lof-main-wapper li{
	overflow:hidden;
	padding:0px  !important;
	margin:0px;
	height:100%;
	width:600px;
	float:left;
}
.lof-opacity  li{
	position:absolute;
	top:0;
	left:0;
	float:inherit;
}
ul.lof-main-wapper li img{
	padding:0px !important;
	width:600px  !important;
	height:300px  !important;
}

li-desc{
	z-index:100px;
	position:absolute;
	top:150px;
	left:50px;
	width:400px;
	background:url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/transparent_bg.png);

	/* filter:0.7(opacity:60) */
}
li-desc p{
	color:#FFF;
	margin:0 8px;
	padding:8px 0
}
li-desc h3 a{
	color:#FFF;
	margin:0;
	font-size:140%;
	padding:20px 8px 2px;
	font-family:"Trebuchet MS",Trebuchet,Arial,Verdana,sans-serif;
}
li-desc h3 a:hover{
	color:#FF6;
	text-decoration:underline;
}

/* item navigator */
ul.lof-navigator{
	top:0  ;
	padding:0  ;
	margin:0 ;
	position:absolute ;
	width:100% ;
	background:none !important;
	margin-top: 0 !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}
ul.lof-navigator li{
	cursor:hand !important;
	cursor:pointer !important;
	list-style:none !important;
	width:100% !important;
	padding:0 !important;
	margin:0 !important;
	overflow:hidden !important;
}
.lof-navigator-outer{
	position:absolute !important;
	right:0 !important;
	top:00px !important;
	z-index:100 !important;
	height:300px !important;
	width:310px !important;
	overflow:hidden !important;
	color:#FFF
}
.lof-navigator li.active{
	background:url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/arrow-bg.png) no-repeat scroll left center;
	color:#FFF
}
.lof-navigator li:hover{

}

.lof-navigator li h3{
	color:#FFF;
	font-size:120%;
	padding:15px 0 0 !important;
	margin:0;

}
.lof-navigator li div{
	background:url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/transparent_bg.png);
	color:#FFF;
	height:100%;
	position:relative;
	margin-left:15px;
	padding-left:15px;
	border-top:1px solid #E1E1E1;
}

.lof-navigator li.active div{
	background:url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/grad-bg.gif);
	color:#FFF;
}
.lof-navigator li img{
	height:60px;
	width:60px;
	margin:15px 15px 10px 0px;
	float:left;
	padding:3px;
	border:#C5C5C5 solid 1px;
}
.lof-navigator li.active img{
	border:##6C8E5C  solid 1px;
}
.lof-navigator li.active h3{
	color:#FFF;

.PopularPosts .item-title{0 !important; }
}
.PopularPosts .widget-item-control {display:none}

</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript" src="http://accordion-for-blogger.googlecode.com/svn/trunk/jquery.easing.js"></script>
<script language="javascript" type="text/javascript" src="http://accordion-for-blogger.googlecode.com/svn/trunk/scriptlofslider.js"></script>
<script type="text/javascript">
 $(document).ready( function(){
		$('#lofslidecontent45').lofJSidernews( { interval:2000,
											 	easing:'easeInOutQuad',
												duration:1200,
												auto:true } );
	});

</script>
<style>

	ul.lof-main-wapper li {
		position:relative;
	}
</style>

Don’t Copy This Post because this Original from my Blog (www.abu-farhan.com)
Please read Copyright of All post at the Footer.

• SEO friendly (not javascript)
• Easy to custumized
• Can make for Feature Post
• Dynamic result based on real statistic

Because of those features I made many widget to show popular post in many way. Now I made new widget using Carousel slider it can show image and snipped in horizontal.

You can see demo from below link

Demo
This script very easy to install, you only have to put the script to the new Gadget

• Login to Blogger Dashboard and navigate to Design – Page Elements
• Click “Add Gadget” and Choose “Popular Posts”(If you already have this gadget skip this step)
• After you have Popular Post Gadget “Add Gadget” again and select “HTML/Javascript”
• Put all script bellow to the “Content” of HTML/Javascript Gadget
• If you have already jQuery in your Template please delete from my script
• Done- your popular post now with animation

<style>

#slider ol,#slider ul,#slider li
 {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
}

.popular-posts  img {
  margin: 0  !important;
  padding:0  !important;
  width:150px;
  height:120px;
}

ol, ul {
	list-style: none;
	}

.wrapper {
	width: 720px;
	margin: 0 auto;
	position:relative;
}

.clear {
	clear: both;
	}

.display-none {
	display:none;
	}

#slider {
	position: relative;
	top: -2px;
	z-index: 1;
	}

#slider .prev {
	position: absolute;
	width: 21px;
	height: 21px;
	display: block;
	background: url(http://i575.photobucket.com/albums/ss197/akhmadaminullah/arleft.png) no-repeat center center;
	top: 150px;
	left: -51px;
	}

#slider .next {
	position: absolute;
	width: 21px;
	height: 21px;
	display: block;
	background: url(http://i575.photobucket.com/albums/ss197/akhmadaminullah/arright.png) no-repeat center center;
	top: 150px;
	right: -51px;
	}

#slider #slider-wrapper {
	width: 720px;
	height: 300px;
	padding-top: 40px;
	overflow: hidden;
	z-index: 999;
	position: relative;
	}

#slider #slider-inner {
	width:9780px;
	height:300px;
	position:absolute;
	}

#slider .article {
	width: 150px;
	height: 300px;
	float: left;
	margin-right: 30px;
	}

#slider .article img {
	margin-bottom: 25px;
	box-shadow: 1px 1px 1px rgba(0, 0, 0, .15);
	-moz-box-shadow: 1px 1px 1px rgba(0, 0, 0, .15);
	-webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, .15);
	}

#slider .article h2 {
	margin-bottom: 15px;
	line-height: 18px;
	}

#slider .article h2 a {
	font-size: 18px;
	color: #404040;
	font-weight: bold;
	text-shadow: 0 1px 0 #fff;
	line-height: 23px;
	}

#slider .article .meta-comments a {
	font-size: 10px;
	font-weight: bold;
	text-transform: uppercase;
	text-shadow: 0 1px 0 #fff;
	}

#slider .article .item-snippet {
	margin-left: 15px;
	}

#slider .widget-item-control { display: none}

</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript" src="http://accordion-for-blogger.googlecode.com/svn/trunk/gridslidepopularpost.js"></script>

Don’t Copy This Post because this Original from my Blog (www.abu-farhan.com)
Please read Copyright of All post at the Footer.

This website presents all the best in the world. What is presented in this web are as follows:

1. Best Web Design
2. Best Theme/ Template
3. Best Web Design Tutorial
4. Best Website
5. Best Graphic Design

This website also gathers blogs or posts so well documented. I have asked the admin of this website for posts related to the bloggers. Some related posts with bloggers can be seen as follows:

1. Best Blogger Widget
2. Best Popular Post for Blogger
3. Best Blogger Tricks Site
4. Best Blogger Tutorial from Indonesia
5. Best Blogger Tutorial from India

I am sure the website is all about whatever is best in the world would be well documented. With this website visitors can choose what is the best and the choice of many people. Dbestlists makes it easy for visitors to add their preferred list to the existing list. Visitors can also click any of the lists to be the best. The order of the list will change automatically according to the number of choices of the visitors.

Open now  dbestlists.com, you can read the articles and rates them.

Today we have Internet Blackout because of SOPA and PIPA from US.  I agree about this like Google Said end of Piracy but not for Liberty. You can read from wikipedia about it . I agree all about that. But if you need some information from wikipedia for today you can try how to remove blackout overlay from wikpedia.

It was easy way to remove wikipedia blackout without install anything to your browsers. You only have to do is “Disable Javascript” because wikipedia only make overlay the article using javascript.

If you are using Firefox open from Tools – Options – Select Tab Content

I hope this trick can use for you but we have to agree with wikipedia to protest about SOPA and PIPA.

Or you can use bookmarklet

Drag above link to firefox bookmark and if you open wikipedia in English you can easly click the bookmark and you can remove overlay.

Now WordPress also join Blackout Day

if You want to acces WordPress.org you can disable javascript also.
If you want to use bookmarklet you can use this

Drag above link to firefox bookmark and if you open wordpress.org you can easily click the bookmark and you can Remove WordPress Sopa Blackout.