Buat S3slider images show

 
Tutorial ringan ini akan membahaskan bagaimana cara membuat s3slider image show yang diaplikasikan ke dalam template blog terutama blogspot, feature ini dapat di gunakan sebagai pelengkap tambahan untuk model template dengan magazine style, proses instal ke dalam blog sangat mudah dan simple,jom lakukan:...


1.}Login ke blogspot terlebih dahulu kemudian masuk ke blog sobat pilih Layout > Edit HTML
2.}Kemudian masukan kode CSS di bawah ini sebelum kode ]]></b:skin>

#s3slider {
   width: 400px; /* important to be same as image width */
   height: 300px; /* important to be same as image height */
   position: relative; /* important */
   overflow: hidden; /* important */
}

#s3sliderContent {
   width: 400px; /* important to be same as image width or wider */
   position: absolute; /* important */
   top: 0; /* important */
   margin-left: 0; /* important */
}

.s3sliderImage {
   float: left; /* important */
   position: relative; /* important */
   display: none; /* important */
}

.s3sliderImage span {
   position: absolute; /* important */
   left: 0;
   font: 10px/15px Arial, Helvetica, sans-serif;
   padding: 10px 13px;
   width: 374px;
   background-color: #000;
   filter: alpha(opacity=70); /* here you can set the opacity of box with text */
   -moz-opacity: 0.7; /* here you can set the opacity of box with text */
   -khtml-opacity: 0.7; /* here you can set the opacity of box with text */
   opacity: 0.7; /* here you can set the opacity of box with text */
   color: #fff;
   display: none; /* important */
   top: 0;

   /*
       if you put
       top: 0; -> the box with text will be shown at the top of the image
       if you put
       bottom: 0; -> the box with text will be shown at the bottom of the image
   */
}

.clear {
   clear: both;
}




3.}Selanjutnya masukkan kode di bawah ini setelah kode ]]></b:skin>

<script src='/jquery.js' type='text/javascript'/>

<script src='/s3Slider.js' type='text/javascript'/>

<script type='text/javascript'>

   $(document).ready(function() {

   $(&#39;#s3slider&#39;).s3Slider({

      timeOut: 4000

   });

});

</script>

Mohon gantikan URL alamat JS dengan punya anda sendiri untuk menghindari masalah..PENTING!!
Gantikan line kuning.Download benda nie  jquery.js Dan Ini s3Slider.js 
                           
                                                       

Last Proses, masuk ke Layout > add page element > HTML/Javascript dan masukkan kode ini :




<div id="s3slider">
   <ul id="s3sliderContent">
      <li class="s3sliderImage">
          <img src="#" />
          <span>Your text comes here</span>
      </li>
      <li class="s3sliderImage">
          <img src="#" />
          <span>Your text comes here</span>
      </li>
      <div class="clear s3sliderImage"></div>
   </ul>
</div>




Simpan dan lihat hasilnya:   Contoh:...Blogspot
                                         Contoh:    Ori


Contoh di atas adalah hanya 2 images show kalau Anda ingin menambah image slide shownya yang perlu dilakukan adalah menambahkan format ini :
 
       <li class="s3sliderImage"> <img src="YOUR IMAGE URL" />YOUR TEXT... </li> 

 Sekian..

Posted in: breakingnews,feature,gallery,Tips-tips berguna untuk blog