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

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

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

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

  3. Haroon Gul says:

    Amazing Post keep posting the great stuff

  4. yOu says:

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

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

  6. Khan says:

    great post and thanks for sharing

  7. Ahmad says:

    good post friend

  8. Haroon Gul says:

    thanks you solved my problem.

  9. JOJI JOSE says:

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

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

  11. agney says:

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

  12. nikita says:

    atikel yang membantu banged
    kapan2 mau di cobain ah
    makasih ya

  13. Techopera says:

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

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

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

Leave a Reply


nine − eight =

Dbestlists Dbestlists

Copyright 2009 - 2010  Choen