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



3 komentar:

madelonrackers said...

Titanium Fishing Pliers - TITanium Art
TITanium Art 2016 ford fusion energi titanium is an online Art Institute, titanium wheels located at TITIUM ART, TITIUM ART, TITIUM LITE, LITE and titanium fitness TITIUM titanium fitness LITE titanium engagement rings art collection, for creating and making small piece art

Anonymous said...

look at this site silicone sex doll,horse dildo,sex chair,dog dildo,dildos,cheap sex toys,custom sex doll,dildo,horse dildo useful reference

dane said...

pj667 xeromontreal,vionicmontreal,rieker zürich,restocksdanmark,columbia bruxelles,pandora charmscanada,goat sneakers kokemuksia,lowabootsportugal,klekt shipping to croatia vg144

Post a Comment

Give me your comment