Make a Slide Show Pictures with JQuery on Blogger

Tutorial for bloggers mania, Create Slide Show Pictures with JQuery on Blogger. Creating Slide Demo Images on the Blog With JQuery Please see below the header there http://smpn1klw.sch.id picture slide show with animation transition changing, and the results are pretty slick too.

Okey, just please you follow the following tutorial:

1. Please login to your blog admin page via http://blogger.com/home
2. Go directly to the page layout or layout, and click edit html-template
3. Give the check to expand the widget templates
4. Place the following code above the code ]]></b:skin>

/* Coin Slider jQuery plugin CSS styles http://workshop.rs/projects/coin-slider */ .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, .cs-next { background-color: #000000; color: #FFFFFF; padding: 0px 10px; }

5. Place the following code above the 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: 563, navigation: false, delay: 5000 }); }); </script>

Width: 563 : Please adjust your display image width you want, try to picture already set to a proper size, let me look pretty views.
6. Save, then click the layout
7. Add gadgets html / java script then copas following code:

  <div id='coin-slider'>
<a href="imgN_url" target="_blank">
        <img src="link letak gambar" />
        <span>
    Deskripsi gambar......
        </span>
    </a>
   
<a href="imgN_url" target="_blank">
        <img src="link letak gambar" />
        <span>
    Deskripsi gambar......
        </span>
    </a>

<a href="imgN_url" target="_blank">
        <img src="link letak gambar" />
        <span>
    Deskripsi gambar......
        </span>
    </a>

</div>

"Link letak gambar" Please replace with your picture storage location.


8.  Save and please enjoy the results.

May this article you want