Bismillah, Alhamdulillah

Skip to Content

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

January 28th, 2012

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.


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

23 Responses to “Blogger Widget: LofsiderNews – Slider for Popular Post Blogger Part 1”

  1. […] Customized Popular Posts widget with sliding effect and post summary (thanks to abu farhan) […]

  2. infoterbaru says:

    i just try it and doesnt work..haha
    but thanks for your idea

  3. Tekno RC says:

    Thanks, alhamdulillah…
    me bookmark yours blog

    Tekno RC Blog

  4. Pompasianu says:

    trims… bagaimana cara memperkecil ukurannya sehingga bisa di jadikan side widget

  5. tanks for share, i hope you can share another article again

  6. terimakasih mas tutorialnya

  7. Apple says:

    how do i remove the navigator on the left? i only want the main to show up and put also navigation buttons on the bottom

  8. chafamedia says:

    informasi yang membantu saya yang masih newbie. kebetulan juga mencari tutorial ini. jika ada info boleh di share…

  9. RyanDwi says:

    Terima kasih mas abu farhan sudah membagi tutorial ini, semoga berkah ilmunya mas..

    Salam kenal.

  10. This is also a nice post keep it up thanks

  11. Mar says:

    I cant make work the slider. Can you Help me please!

  12. I can’t believe there’s no hula hooping on this list

  13. wah kalok yang ini sih aku belum pernah apply di blog sob,,, emmm tapi boleh juga nih dicoba

  14. Gunz says:

    is it possible to make Popular post only by label? Not the whole site?

    Thanks..

  15. MIN says:

    I like your tut so much. But, I want to made this for POST FROM THE LABEL, can you show me the way to do this?

    Thanks

  16. Carolina B. says:

    I’m tried to do this but only an wrong thing appears on my blog!
    it isn’t right :S
    this is so simple but it isn’t okay on my page, why?! :S
    thanks

  17. Trigliserida says:

    Makasih nih informasinya salam kenal gan moga sukses trus…

  18. rabiul says:

    Australian Finance and Lending company Brokers ink finance. We offer the best interest rates in Australia. Honest service and quick approvals. If you’re in the market for finance or require a loan to purchase a vehicle, boat, bike, truck, yacht, jet ski or farm and equipment lending please give our friendly staff a call. 7am – 7pm – 7 days a week
    Car lease

  19. Proners_Sozo says:

    thank u very much, this widget is very goog

  20. Dear Abu Farhan, would you update the recent post spylist to work in jquery 1.7.1 please…

  21. Panev says:

    Dear AbuFarhan,

    I ask you to write a post about “Blogger Related posts widget” with and without thumbnails.

    I searched your site but I couldn’t find any content on this.

    Regards.
    (Please email me the link if you have already written that.)

  22. Sony BT Blog says:

    kalo ada kelanjutannya mohon di share ya mas bro…
    nice posting sangat membantu…

Leave a Reply


+ eight = fifteen

Dbestlists Dbestlists

Copyright 2009 - 2010  Choen