Bismillah, Alhamdulillah

Skip to Content

Moving Box Slider for Popular Post Blogger

February 15th, 2012

Bismillah, Alhamdulillah
Now I made one more Popular Post widget for blogger Using Moving Slider from CSS Tricks. I made many Blogger widget to show Popular Post widget for blogger in many way. Now I made new Blogger widget using Moving Box Slider for Blogger.

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>
* {
	margin: 0;
	padding: 0;
}

body { 
    font: 11px Helvetica, Arial, sans-serif;
}

#wrapper {
    width: 800px;
    margin: 60px auto;
}

#intro {
    padding-bottom: 10px;
}

#slider {
    width: 800px;
    margin: 0 auto;
    position: relative;
	border: 10px solid #ccc;
}

.scroll {
	overflow: hidden;
	width: 800px;
    margin: 0 auto;
    position: relative;
}

.scrollContainer {
	position: relative;
}

.scrollContainer div.panel {
    padding: 10px;
    width: 274px;
	height: 318px;
}

#left-shadow {
	position: absolute;
	top: 0;
	left: 0;
	width: 12px;
	bottom: 0;
	background: url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/leftshadow.png) repeat-y;
}

#right-shadow {
	position: absolute;
	top: 0;
	right: 0;
	width: 12px;
	bottom: 0;
	background: url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/rightshadow.png) repeat-y;
}

.inside {
	padding: 10px;
	border: 1px solid #999;
}

.inside img {
	display: block;
	border: 1px solid #666;
	margin: 0 0 10px 0;
	width: 250px;
}

.inside h2 {
	font-weight: normal;
	color: #111;
	font-size: 16px;
	margin: 0 0 8px 0;
}

.inside p {
	font-size: 11px;
	color: #ccc;
}

a {
	color: #999;
	text-decoration: none;
	border-bottom: 1px dotted #ccc;
}

a:hover {
	border-bottom: 1px solid #999;
}

.scrollButtons {
    position: absolute;
    top: 127px;
    cursor: pointer;
}

.scrollButtons.left {
    left: -45px;
}

.scrollButtons.right {
    right: -45px;
}

.hide {
    display: none;
}

</style>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
	<script src="http://accordion-template.googlecode.com/svn/trunk/slidermovingbox.js" type="text/javascript" charset="utf-8"></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

130 Responses to “Moving Box Slider for Popular Post Blogger”

  1. terimkasih kang abu farhan… template yang sangat bagus…

  2. What happens fifteen years or more after the fifteen minutes of fame fades.
    I recommend whipping up single use portions, but
    if you make too much, store the product in a recycled sanitized
    glass container with lid and be sure to refrigerate
    quickly. It’s important to bear in mind that bleaching doesn’t always result in the whiteness that
    you expected.

  3. Ramdhan says:

    Nice Posting.. Thanks..

  4. basha says:

    Nice trick .. thanks.. but please tell me .. this trick can work with my template or not ..
    http://www.bloggerseotips.com/

  5. do you want to know ferrera weight loss?or weight loss trick ..? then click on mee :)

  6. Mudassir says:

    Really fantastic tut! I’m using it

  7. azure says:

    nice post about famous blogger
    thank you for sharing

  8. Brandi Gates says:

    Awesome thinking about programming
    thanks for sharing

  9. Cricket says:

    Thanks alot buddy ! I relly loving you blog nice sharing but this slider will also benefit us in seo ?

  10. what is gout says:

    Hey very nice site!! Man .. Beautiful .. Wonderful .. I’ll bookmark your site and take
    the feeds additionally? I’m glad to find numerous useful information right
    here in the put up, we’d like work out more techniques on this regard, thank you for sharing.
    . . . . .

  11. Rabbi says:

    A thoroughly grateful reading feel you are having reading this blog. Constantly on cue is what the author is. Writer offers excel recommendations to commenters and in short time. Awesome reads. Everyone who desires to know on this topic should subscribe to this blog. Pick thing is the archive feature serves as a fast recommendation to old and relevant things. Any last gossip is covered in this blog, says a lot about sources in high places. I enjoy the quick references helpful in the blog. The details in the visual air of this blog are to be appreciated. I cannot help but question why such reflections were not said previously.

  12. Haroon Gul says:

    Amazing Post keep posting the great stuff

  13. yOu says:

    I will try this trick .. Good luck and add to my skills in blogging

  14. Nice share brother, Thanks a lot for your information. :D

  15. Khan says:

    great post and thanks for sharing

  16. Ahmad says:

    good post friend

  17. Haroon Gul says:

    thanks you solved my problem.

  18. JOJI JOSE says:

    how can i decrease it’s size???????????

  19. Now I created an added standard Post gadget for blogger victimisation Moving Slider from CSS Tricks. I created several Blogger gadget to point out standard Post gadget for blogger in several manner. currently I created new Blogger gadget victimisation Moving Box Slider for Blogger.

  20. agney says:

    wow…!!!
    wonderful information bro.
    nice post.thanks

  21. nikita says:

    atikel yang membantu banged
    kapan2 mau di cobain ah
    makasih ya

  22. Techopera says:

    Hello Farhan, this information is really wonderful, i will make sure to add a slider to my blog, thank you.

  23. hmm, so creating a slider is this simple? maybe i might create a theme myself, thanks Farhan.

  24. Wonderful tricks bro, thank you, wow, i can create a slider myself now!!!!.

Leave a Reply


− two = two

Dbestlists Dbestlists

Copyright 2009 - 2010  Choen