Continuous Reel Slideshow For Blogspot

Perkembangan Javascript menjadi fenomenal dikalangan Web. Javascript dapat membuat blog kita menjadi lebih aktif dan menarik untuk di kunjungi. Namun Javasript pun dapat membuat blog kita menjadi berat apabila kita memakainya berlebihan seperti penumpukan penggunaan javascript yang sama pada web/blog kamu. Jadi efesienkan penggunaan javascript pada web/blog kamu.

saya mempunyai trik yang cukup menarik tentang Javascript yang dapat membuat blog kamu menjadi lebih ciamik, apa itu? Continuous Reel Slideshow For Blogspot adalah jenis slide show yang menggunakan ajax dan javascript yang sederhana sehingga apabila kita menggunakan di blog maka pengaruh terhadap loading blog tidak terlalu berat tapi tetap saja apabila kita memakai javascript yang berlibihan. baik, langsung saja kita lihat cara pemasangannya pada blogspot.

1. Kamu harus login terlebih dahulu di Blogspot, tentunya dengan akun kamu sendiri y
   
2. Setelah itu kamu masuk ke halaman Elemen Halaman, bagaimana cara mengaksesnya? Klik Tulisan Rancangan saja dan biasanya sudah berada pada halaman Elemen Halaman
   
   
   
   
3. Lalu, tambahkan sebuah gadget, untuk tempat kamu bisa memilih dimana saja, saran saya tambahkan gadget di sidebar, Pada Windows baru setelah mengklik tulisan Tambah Gadget, kamu pilih yang HTML/Javascript lalu masukan kode di bawah ini
   
   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
   
   <style type="text/css">
   
   #myreel{ /*sample CSS for demo*/
   border:15px solid black;
   }
   
   .paginate{
   width: 330px;
   margin-top:5px;
   font:bold 14px Arial;
   text-align:center;
   }
   
   </style>
   
   <script src="http://oketrik.googlecode.com/files/reelslideshow.js" type="text/javascript">
   
   /***********************************************
   * Continuous Reel Slideshow- © Dynamic Drive (www.dynamicdrive.com)
   * This notice MUST stay intact for legal use
   * Visit http://www.dynamicdrive.com/ for this script and 100s more.
   ***********************************************/
   
   </script>
   
   <script type="text/javascript">
   
   var firstreel=new reelslideshow({
   wrapperid: "myreel", //ID of blank DIV on page to house Slideshow
   dimensions: [300, 200], //width/height of gallery in pixels. Should reflect dimensions of largest image
   imagearray: [
   ["http://i26.tinypic.com/11l7ls0.jpg"], //["image_path", "optional_link", "optional_target"]
   ["http://i29.tinypic.com/xp3hns.jpg", "http://en.wikipedia.org/wiki/Cave", "_new"],
   ["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1sK_vaLBhSktxx2W0ijU30DG2vJ-eT8yJmT2K_XAgF7Ykk9vLDYzATI5QPXSLT_VXKvupBGOURDmDnNrQo5kvRcYa0SQxVNkAzLKZCkUWWX9O-Q3dS2yBWXfikLlmLpmpJA-nxUzDK9u1/s1600-r/Header.png"],
   ["http://i31.tinypic.com/119w28m.jpg"] //<--no trailing comma after very last image element!
   ],
   displaymode: {type:'auto', pause:2000, cycles:2, pauseonmouseover:true},
   orientation: "h", //Valid values: "h" or "v"
   persist: true, //remember last viewed slide and recall within same session?
   slideduration: 300 //transition duration (milliseconds)
   })
   
   </script>
   <div id="myreel"></div>
   
   <div class="paginate">
   << <a href="javascript:firstreel.navigate('back')" style="margin-right:200px;">Previous</a> <a href="javascript:firstreel.navigate('forth')">Next</a> >>
   </div>
   
   
   
   
   
   
   Catatan :
   
   • Kode yang berwarna merah, menunjukan alamat gambar, jadi kamu bisa menggantinya dengan alamat gambar yang kamu miliki.
     


4. Lalu simpan dan lihat hasilnya

Dengan menambahkan Continuous Reel Slideshow For Blogspot di blog kamu, blog kamu mempunyai daya tarik tersendiri sehingga ada kemungkinan hal ini meningkatkan trafik blog kamu. Mungkin hanya itu saja yang bisa saya sampaikan kurang lebihnya mohon maaf, Terima Kasih.

Bagikan Artikel : Facebook Twitter Google+ Linkedin Technorati Digg