Bismillah, Alhamdulillah
Now I made one more Popular Post Widget for Blogger Widget. The Blogger Widget show Slideshow for Blogger using LofsiderNews jquery plugin effect. What is the different of previous Popular post is the slider have small thumbnail. The image between big image and small image is different.

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.

Bismillah, Alhamdulillah
After long time I’m not post for new script. Now I post about Popular Post Widget for blogger, because this widget is the best from Blogger (in my opinion). Some Features of Popular Post for blogger are :

• 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.

Now I would like to introduce my friend’s website, named “The Best List of Everything“.

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.

Bismillah Alhamdulillah. Dynamic view in blogger, this title is the latest thing that google add in the blogger. The Template based on ajax, so visitors easily navigate to all posts without need to load new request from the address bar of the browser. My review about this  feature are :

1. The template is not SEO friendly because Google can’t read javascript.
2. Impression or Page click will be down because the browser no need to reload the page only request by ajax.
3. No sidebar at this template yet until now.
4. Google adsense can’t show yet until now.

Maybe only that my review about this feature of the Blogger

Lightbox now already in blogger, actually this widget already in our blogger for the last week, we don’t have to install anything, the script will search any element which is image and we can click the image to show the Lightbox.

The Script already install in your blogger template, the main script and CSS are :
The Libghtbox script
http://www.blogger.com/static/v1/widgets/931580185-widgets.js

http://www.blogger.com/static/v1/jsbin/3312549355-lbx.js

The CSS lightbox
http://www.blogger.com/static/v1/widgets/1100314300-widget_css_2_lightbox_bundle.css

Now you don’t have to install any Lightbox anymore

The Feature of This Lightbox :

• No need to install
• Not use jQuery
• Collect all image in one post and show in lightbox slider

Maybe only that you can read completly officially from the blogger from this link

Your Images never look so good

If you want to remove this widget you can follow this discussion

How to Remove Lightbox for Blogger

Bismillah, Previously I post about Horizontal Accordion for Blogger.  Accordion effect is very good because we can hide some posts or other think and show again if we need. The usefull this method the area will be clean and easy to read. Now I want to share to all of you that I already have accordion effect for blogger in different type. you can use to your blog easily.

You Can open all of my accordion for blogger from this link

You can choose my Accordion effect from links below :

1. The Best Accordion for BloggerThis Script to make all sidebar have accordion effects
2. Table of Contents using Accordion script

   This script to show all your posts categorized by label and hide and show using accordion effect

3. Accordion Template for Blogger

   All post and sidebar have Accordion effect

4. Popular Posts using Accordion for Blogger

   New Popular Post for Blogger ahev Accordion effect and can be used for Featured Slideshow

Popular Post for Blogger is the Best widget from Blogger (in my opinion). Some Features of Popular Post for blogger are :

• 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 Jquery Kwikcs it can call Horizontal Acoordion. This jquery Plugin is easy to use and Implement it to popular post for blogger.

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
• Done- your popular post now with animation

<style>
.popular-posts {
  margin: 0px 0 30px 0;
  padding: 0 0 0px 0;
  position: relative;
  width: 900px;
  height: 363px;
  overflow: hidden;

}
.popular-posts  {
	/* recommended styles for kwicks ul container */
	list-style: none;
	position: relative;
	margin: 0;
	padding: 0;
}
.popular-posts  li{
	/* these are required, but the values are up to you (must be pixel) */
	width: 185px;
	height: 363px;
	/*do not change these */
	display: block;
	overflow: hidden;
	padding: 0px;  /* if you need padding, do so with an inner div (or implement your own box-model hack) */
}
.fadeout {
  display: block;
  position: absolute;
  right: 0px;
  width: 300px;
  height: 365px;
  z-index: 4;
  background: url(overlay.png) repeat-y scroll top right;
}
.popular-posts  li {
	/* This is optional and will be disregarded by the script.  However, it should be provided for non-JS enabled browsers. */
	margin-right: -4px; /*Set to same as spacing option. */
	float: left;
}
.popular-posts .item-title {
  background: #182424   !important;
  color: #fff;
  opacity: 0.77;
  filter:alpha(opacity=77);
  position: absolute;
  padding: 10px;
  top: 60px;
}

.popular-posts .item-title a:visited{
  color: #fff;
  font-size:16px;
  text-transform:uppercase;

}

.popular-posts  .item-snippet{
  background: #182424;
  color: #fff;
  opacity: 0.77;
  filter:alpha(opacity=77);
  position: absolute;
  padding: 10px;
  top: 215px;
  height:127px;

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

.popular-posts  li a {
  margin: 0  !important;
  padding:0  !important;
  background-color:#182424 !important;

}
.popular-posts  .item-title a {
 opacity: 0.77;
  filter:alpha(opacity=77);
}
</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-template.googlecode.com/svn/trunk/jquerykwick.js"></script>
<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/
$(document).ready(function() {
                    $('.popular-posts ul').kwicks({
					max : 600,
                    min : 300,
					spacing : -4,
                    duration: 200
  				});
});
/*]]>*/
</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.

Page navigation for blogger is most important widget for blogger. This widget can make visitor easy to navigate to all of blog posts. First page navigation have many bugs, one of them is it can’t show more than 500 posts base on json link from blogger. But for my Page Navi can show more than 500 posts. If you want to read my tutorial about Page Navigation for Blogger you can read from this link.  I search some blog that used my Page navi and have more than 500 posts, I found some of them.

Now I’ll show to all of you that my Page Navi for Blogger can use more than 500 posts. This page navi not only for normal Page Navi but also Page Navi using Paginator 3000.

The Blog that usef my Page Navi Are :

1. Ganool (Free Movies)
2. Mobile Application
3. J-Pop, K-Pop and C-Pop Download
4. Mobile Movies
5. Nokia N8 Fans Club
6. K-MSC
7. Tsekouratoi

Thank you for using my Widget, if You Found Page Navigation without my link that Script is Illegal, because that is my Copyright

Bismillah,..

Easy Slider.. why I chose this slider because it is simple and easy in the installation …
last time I used Easy Slider is when I make a content slider based on recent or random posts..Awesome Automatic Easy Slider for Blogger using jQuery Part 1
This time I used the Easy Slider for Popular Posts ..

The following is how it looks :

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
• Done- your popular post now with animation

<style type="text/css" media="screen">
<!--
#PopularPosts1{
height:263px;
}
.item-content {
height:263px;
position:relative;
width:560px;
}
.slider {
height:263px;
margin-left:25px;
width:560px;
overflow:hidden;
margin-top:5px;
padding:0px 0px;
height:263px;
}
.item-snippet {
background:transparent url(http://i195.photobucket.com/albums/z105/dantearaujo/darkbg.png) repeat scroll 0 0;
color:#FFFFFF;
padding:5px 5px 10px 5px;
position:absolute;
bottom:0;
text-align:left;
width:560px;
font-size:9px;
font-style:italic;
}
.item-title{
color:#FFFFFF;
font-size:10px;
font-weight:bold;
font-style:normal;
margin-bottom:5px;
}
.item-title a:link,.item-title a:visited{
color:#FFFFFF;
text-decoration:none;
border:none !important;
padding:0 !important;
}
.item-thumbnail img{
padding:0 !important;
}
.item-thumbnail a{
padding:0 !important;
}
.crosscol .widget-content {position:relative;}
.slider ul, .slider li,
#slider2 ul, #slider2 li{
margin:0;
padding:0;
list-style:none;
}
#slider2{margin-top:1em;}
.slider li, #slider2 li{
width:560px;
height:263px;
overflow:hidden;
}
.item-thumbnail img{width:560px;height:263px}
#prevBtn, #nextBtn,
#slider1next, #slider1prev{
display:block;
width:30px;
height:77px;
position:absolute;
left:-30px;
text-indent:-9999px;
top:71px;
z-index:1000;
}
#nextBtn, #slider1next{
left:582px !important;
}
#prevBtn, #nextBtn, #slider1next, #slider1prev {
display:block;
height:77px;
left:0;
position:absolute;
top:100px;
width:30px;
z-index:1000;
}
#prevBtn a, #nextBtn a,
#slider1next a, #slider1prev a{
display:block;
position:relative;
width:30px;
height:77px;
background:url(http://i195.photobucket.com/albums/z105/dantearaujo/prev.png) no-repeat 0 0;
}
#nextBtn a, #slider1next a{
background:url(http://i195.photobucket.com/albums/z105/dantearaujo/next.png) no-repeat 0 0;
}
ol#controls{
margin:1em 0;
padding:0;
height:28px;
}
ol#controls li{
margin:0 10px 0 0;
padding:0;
float:left;
list-style:none;
height:28px;
line-height:28px;
}
ol#controls li a{
float:left;
height:28px;
line-height:28px;
border:1px solid #ccc;
background:#DAF3F8;
color:#555;
padding:0 10px;
text-decoration:none;
}
ol#controls li.current a{
background:#5DC9E1;
color:#fff;
}
ol#controls li a:focus, #prevBtn a:focus, #nextBtn a:focus{outline:none;}
.test{
margin:30px;
}

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

if you have any questions please leave a comment….thx u

Alhamdulillah… by Catur

Bismillah, Alhamdulillah. Last time I made Popular post for blogger with animation. Now I made Popular Post for Blogger with 3D Cube animation. This widget I made from Image Cube. You can see the result like this image bellow.

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
• Done- your popular post now with animation

<style type="text/css">
.cube { width: 200px; height: 200px;}
a img { border: none; }
#linksCube img { width: 100%; height: 100%; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://accordion-for-blogger.googlecode.com/svn/trunk/jqueryimagecube.js"></script>
<script type="text/javascript" charset="utf-8">
$(function () {
    $('.popular-posts ul').abupopularcube();
});

</script>
<script type="text/javascript" src="http://accordion-for-blogger.googlecode.com/svn/trunk/popularcube.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.