How to create a Slider with jQuery blog

In connection with the request of bloggers Nias are asking how to create a slideshow of pictures or photos on the blog. In our function can not use the marquee in HTML, because basically only limited functionality marquee objects that move or walk. For example, you 
can be seen on your blog us in hombobatu.blogspot.com. 
Well, how do I make it? this is where we will discuss the process step. Immediately, those of you buddies blogger who also loves coffee to accompany your work, please prepare before we continue with this tutorial. 
Good, now please follow the steps below. 
1. As always, please log in first your blog 
2. Go to the menu design / design and choose edit HTML 
3. You need to remember prior to backup your blog template with "Download full template" 
4. You centagkan "Expand Widget Templates" 
5. Find the code]]> </ b: skin> and copy and paste the script code below and place it on the
code  ]]> </ b: skin> 

.coin-slider {overflow: hidden; zoom: 1; position: relative; .coin-Slider} a {text-decoration: none; outline: none; border: none; } .CS-Buttons {font-size: 0px; padding: 10px; float: left; .CS-Buttons} a {margin-left: 5px; height: 10px; width: 10px; float: left; border: 1px solid # B8C4CF; color: # B8C4CF; text-indent: -1000px; } .CS-Active {background-color: # B8C4CF; color: # FFFFFF; } .CS-Title {width: 563px; padding: 10px; background-color: # 000000; color: # FFFFFF; } .CS-Prev, next-.CS {background-color: # 000000; color: # FFFFFF; padding: 0px 10px; }

6. After that, find the code </ head> and place the code below the above code </ head>

<Script src = 'http: //ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type =' text / javascript '/> <script src =' http: // mrmung .googlecode.com / files / coin-slider.min.js 'type =' text / javascript '/> <script type =' text / javascript "> $ (document) .ready (function () {$ (& # 39 ; # coin-slider & # 39;). coinslider ({width:500, navigation: false, delay: 5000});}); </ Script>

To ketarangan blue paper, is a measure of the width of the slide. You may change according to the width of its placement on your blog to see let me look presentable.

7. When finished, please save your template.
8. Ops, unfinished turns. Please enter the menu design / design and plih menu layout or page eleman
9. Add the widget by choosing HTML / Javascript and copy-paste the following code into it ..

<Div id = 'coin-slider'>
<a href=" destination url "target="_blank">
<img src = "url link image" />
<Span>
Description of the picture ......
</ Span>
</a>

<a href=" destination url "target="_blank">
<img src = "url link image" />
<Span>
Description of the picture ......
</ Span>
</a>
<a href=" destination url "target="_blank">
<img src = "url link image" />
<Span>
Description of the picture ......
</ Span>
</a>
</ Div>

For the text or code blue, please replace the destination url address when you click the image, while the green color you please replace the url of the image itself.

10. Once completed please SAVE, and see the results