Bismillah, Alhamdulillah

Skip to Content

Blogger widget : Popular Post with Carousel Slider

January 23rd, 2012

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.


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

19 Responses to “Blogger widget : Popular Post with Carousel Slider”

  1. akira says:

    infonya membantu banged
    makasih udah share

  2. Thanks a lot for blogging this, it was unbelieveably informative and helped me tons.

  3. Abdussamed El Maliki says:

    hi abu farhan.

    how can i use random posts with carousel slider ?

    i will wait your answer.

    thanks.

  4. Aw, this was an incredibly nice post. Taking a
    few minutes and actual effort to create a good article… but what can I say… I procrastinate a
    lot and don’t manage to get nearly anything done.

  5. Good for you! Sounds amazing and have tons of fun!

  6. Tom says:

    It’s great widget. Thank you very much. I have a question: how to put this widget under my post – not on the right column on my blog? Could you help me? Thanks.

  7. juan says:

    That carusel widget for popular posts is great, can the background color be changed? Can you do the same with labels instead of popular posts?

    Thanks

  8. nah, seperti yang saya ungkapkan dikomentar sebelumnya,,, image tak terdeteksi di carosusel slider… itu karena apa ya sob, penyebabnya

  9. online says:

    Hello there! I know this is kinda off topic nevertheless I’d figured I’d ask.

    Would you be interested in exchanging links or maybe guest writing a blog article or
    vice-versa? My blog discusses a lot of the same subjects as yours and I think we
    could greatly benefit from each other. If you happen to be interested feel free to shoot me
    an email. I look forward to hearing from you! Superb blog by the
    way!

  10. I think this is Okay for me… thanks for sharing knowledge… :-) God Bless Guys!

  11. aris wahyu says:

    i am Bookmark this,,
    thank’s a lot,,

    visit me
    Punya-magna

  12. a great tricks but I do not like, thank you for sharing :)

  13. pemutih muka says:

    hi buddy…

    Hello there, You might have performed an incredible job. I will undoubtedly digg it and personally advise to my close friends. I’m assured they’ll be benefited from this internet site….

  14. batamia says:

    thankyu..informative.. [;)] Great post!.. keep the posts coming & i will keep reading them. thank for help them. Great blog dude! I just linked to this post on my Delicious. Keep it up!

    By:http://www.batamia.com

  15. Jayr says:

    Thanks. I’ll try to use this widget on my blogger blog.

  16. jen says:

    This was so easy! I actually put mine at the bottom. So very easy and nothing is easy in blogging to me!! Thanks, ABU!

  17. Gadong says:

    I try it at my blog, but it’s too big.. I remove it then.. can I customize the size?

  18. splout says:

    I did, but no picture in the post text only. What should I do?

Leave a Reply


seven + seven =

Dbestlists Dbestlists

Copyright 2009 - 2010  Choen