Bismillah, Alhamdulillah

Skip to Content

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

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

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


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

27 Responses to “Blogger Widget: LofsiderNews – Slider for Popular Post Blogger Part 3”

  1. akira says:

    semoga widgetnya cepat sempurna dan bermanfaat bagi semuanya
    thanks udah share artikel yang bermanfaat ini

  2. Abilashan says:

    Hello,

    Is it possible to use this as a featured one like manually inserting the image urls and posts urls?

  3. i has done this on my blogger blog, thank you pal, i really appreciate it.
    Thank you.

  4. comic pics says:

    WOW, this is awesome Farhan, thank you, i can creat a blog with this tutorial.
    Thanks alot.

  5. please it refuses to remove blogger blog default pages, help please Farhan

  6. THANKS ALOT farhan, i just added slider to my blog, thank you.

  7. Whoa I value that you taking up the main topic of Blogger Widget: LofsiderNews – Slider
    for Popular Post Blogger Part 3 | Blogger Templates and Tricks by Abu Farhan.
    It’s great to read something such as this on-line finally. Reminds all of us of big gun which i was reading about fairly recently for some reason. Anyhow, have a great day while keeping on writing!

    my web blog; forex trading system :: http://forextradingsystemcourse.info/ ::

  8. Superb blog! Do you have any tips and hints for aspiring writers?
    I’m hoping to start my own blog soon but I’m a little lost on everything.
    Would you recommend starting with a free platform like WordPress or go for
    a paid option? There are so many choices out there that I’m totally overwhelmed .. Any recommendations? Cheers!

  9. wisnu says:

    makasih mas widgetnya, tapi jika scriptnya sepanjang itu, ngaruh gak sama kecepatan load blognya?
    mungkin tambah berapa kb gitu..

  10. Cherry Lane says:

    Hi there! I have just tested this out and its awesome!! The design is really sleek. The size is super easy to customise and the image automatically adjusts accordingly!

    I just have one question…what part of the code would I need to remove to get rid of the image preview/summery in the corner of the slider? Really appreciate if you can help me with this. Thank you!!

    • Cherry Lane says:

      I figured this part out! woohoo! :-) Its looking super sleek now!! Only bummer is that it doesnt load instantly. Is there anyway to improve the speed? I would reallllly appreciate it you could reply Abu!!

  11. Nice to be here and see your post !

  12. ary widodo says:

    Semoga segera di sempurnakan widgetnya.

  13. Shahzaib Hussain says:

    Nice widgets .. great source thanks for sharing..
    web designer in uk

  14. nah disini juga saya pernah menemukan kendla,,dimana gambar disemua artikel saya bertuliskan no image, alias gak ada gambar sama sekali, jadi saat slide berjalan yang ada hanya cuplikan artikel tanpa ada gambar,,, kira kira itu dikarenakan apa yah?

  15. Abdul Rahman says:

    this is even better thanks farhan

  16. Everson says:

    How I Take the knock on effect of time of transition of images?

  17. Bayu Amus says:

    If there are multiple Popular post widgets, how could we limit the slider to work only on certain widget? Because at the moment it affects all of the widgets automatically. Thanks.

  18. agaz says:

    Om,Punya Saya Imagenya ga nongol Om,loading terus,saya harus gimana Om (terima Kasih)

  19. Lucy Varkey says:

    Dear Sir, Please Make Post Label Widget With
    Image Like Blogger Mag V2 blogger template.We ARE Waiting For It. Please Make That Widget.

  20. isaac says:

    Question- how do you reduce its size, because i think its a bit wide.

  21. this is very usefull, i really need this code, thanks alot

  22. Blogpim says:

    This is great thank you for this wonderful template.

  23. starfes2 says:

    شكرا لكم وبارك الله فيكم وجزاكم الله خيرا اضافة رائعة

  24. desihiphop says:

    wow very helpful for me… check this out our website too for new desi rappers, urban beats ,hip-hop news http://www.desihiphop.com

  25. Jagan says:

    Hi Abu, Its cool,
    But after putting this code in homepage. Initially it showing all post and after loading for sometime it come to above style.
    Can you please check this.

    Except this everything is fine. You are great!!

Leave a Reply


eight − = four

Dbestlists Dbestlists

Copyright 2009 - 2010  Choen