Bismillah, Alhamdulillah

Skip to Content

Blogger Widget: LofsiderNews – Slider for Popular Post Blogger Part 2

February 5th, 2012

Bismillah, Alhamdulillah
Now I made one more Popular Post widget for blogger I made many widget to show Popular Post widget for blogger in many way. Now I made new widget using LofsiderNews with different style than previous post (Blogger Widget: LofsiderNews – Slider for Popular Post Blogger Part 1).

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


Categories: Popular Post for Blogger

Tags: , , , , ,

Abu Farhan

I'm an Owner of this blog and it's always been a passion of mine to write about Blogger. I like to make original script for blogger. I also run the awesome Website at The Best Lists.

Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or Comments RSS Feed

Donate towards my web hosting bill!

Trackback
Leave a response

20 Responses to “Blogger Widget: LofsiderNews – Slider for Popular Post Blogger Part 2”

  1. Sagor says:

    why its always my blog where popular post slideshow never works?

    pls help me

  2. Sagor says:

    why its always my blog where never popular post slideshow works?

    help me pls

  3. nikita says:

    wah cara yang bermanfaat banged
    thanks atas infonya

  4. haha, i just added this on my blogger blog and it is beautiful, you can check it out.

  5. nigeria jobs says:

    Slider for popular post is wonderful, thank you.

  6. iphones says:

    Thanks for this detailed information, i really appreciate it.

  7. massimo says:

    is it possible have the same widget but for recent post based on feed rss?

  8. massimo says:

    is it possible have the same widget of recent post? based on feed rss..

  9. adsfffd says:

    how can i remove the title from widget”popular posts”

  10. arabi says:

    this slider is beautiful

  11. saya sangat takjub sekali dengan postingan sobat ini
    nice sob,, saya akan kunjungi semua artikel dan memberikan Apresiasi saya untuk mu,,, salam silaturahmi

  12. Shahzaib says:

    Excellent post and Thanks for it…
    web designer in uk

  13. Ary Putra says:

    Now I made new widget using LofsiderNews with different

  14. Yoomes says:

    Thanks this slider is beautiful. I like this slider.

  15. aslı says:

    hii.i need this slider as 640×240
    can you help me???

  16. java4projects…

    Blogger Widget: LofsiderNews – Slider for Popular Post Blogger Part 2 | Blogger Templates and Tricks by Abu Farhan…

  17. Massive popular widget

  18. aussome post.I like it

  19. […] February 5th, 2012 Bismillah, Alhamdulillah Now I made one more Popular Post widget for blogger, with different style and position. I made many Blogger widget to show Popular Post widget for blogger in many way. Now I made new widget using LofsiderNews with different style than previous post (Blogger Widget: LofsiderNews – Slider for Popular Post Blogger Part 2). […]

Leave a Reply


five + = eight

Dbestlists Dbestlists

Copyright 2009 - 2010  Choen