Adding Moving Box Slider To Your Blog

Hey Yo!!
How are you?
In today entry, i would like to teach u all how to add a moving box slider on your blog...
WHAT IS MOVING BOX SLIDER?
Let the picture show you....

(U may click on the picture if it is not clear or too small)

Yeah..As you can see it on my blog, i got a moving box slider...
Wanna have it too?
Let's do this.....
Follow the steps below...

1. Log In > Dashboard > Design > Page Elements > Add a Gadget> Popular Posts and Save..

(U may click on the picture if it is not clear or too small)

2. Now u got something like this...

(U may click on the picture if it is not clear or too small)

3. Press "Add a Gadgets" again and HTML/JavaScript.

(U may click on the picture if it is not clear or too small)

4. Copy and paste the code below to the HTML/Javascript and press "SAVE"..

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

5. Place the HTML/JavaScript below the "Popular Post" and now you have something like this..

(U may click on the picture if it is not clear or too small)

6. Press "PREVIEW" and "SAVE" if it is SUCCESS...

GUD LUCK TO TRY IT!

DO LEAVE SOME COMMENT OR ASK ME IF ANY CONFUSED....