Home » » Cara Membuat Gambar Slideshow dengan jQuery di blog

Cara Membuat Gambar Slideshow dengan jQuery di blog

Written By Trik dan berita on Rabu, 11 April 2012 | Rabu, April 11, 2012

Trik kali ini Tentang Cara Membuat Gambar slideshow dengan jQuery di Blogspot. Sebelumnya saya Pernah posting Tentang Cara Membuat Photo Slide untuk blog dengan jQuery.
Sebenarnya postingan kali ini Tidak jauh beda dengan postingan sebelumnya, cuma tampilan slidenya aja yang beda.
Ok langsung saja kita mulai Trik blog kali ini.
1. Pergi ke Rancangan/design >> Edit HTML pada blog anda.
2. Cari kode ]]></b:skin>  pada area edit html.
3. Jika sudah ketemu silahkan pastekan kode berikut ini di atas ]]></b:skin>.
KODE NYA :
/* Start Slider Code From http://thizan.blogspot.com/ */

ul.bjqs{position:relative; list-style:none;padding:0;margin:0;overflow:hidden; display:none;}
li.bjqs-slide{display:none;position:absolute;}

ul.bjqs-controls{list-style:none;margin:0;padding:0;z-index:9999;max-width:100%;}

ol.bjqs-markers{list-style:none;margin:0;padding:0;z-index:9999;}
ol.bjqs-markers li{float:left;}

p.bjqs-caption{display:block;max-width:96%;margin:0;padding:2%;position:absolute;bottom:0;background:rgba(0,0,0,0.7);color:#fff;-moz-border-radius: 6px;-webkit-border-radius: 6px;-moz-box-shadow: 4px 4px 4px #dddddd;-webkit-box-shadow: 4px 4px 4px #dddddd;}

}
/* End Slider Code From http://thizan.blogspot.com/ */


4. Langkah berikutnya cari kode </head>
5.Jika sudah ketemu,pastekan kode berikut ini di atas atau sebelum kode tadi .
KODENYA :
<!-- Start Slider Code From http://thizan.blogspot.com/ -->

<script src='http://code.jquery.com/jquery-1.6.1.min.js' type='text/javascript'/>
<script src='http://yourjavascript.com/9921010228/basic-jquery-slider.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$(&#39;#my-slideshow&#39;).bjqs({
&#39;width&#39; : 940,
&#39;height&#39; : 340,
&#39;showMarkers&#39; : true,
&#39;showControls&#39; : true,
&#39;centerMarkers&#39; : false
});
});
</script>
<!-- End Slider Code From http://thizan.blogspot.com -->



Catatan:
Ganti 940 yang bewarna merah dengan lebar slide yang anda inginkan.
Ganti 340 yang bewarna merah dengan tinggi slide yang anda inginkan.

6. Jika sudah silahkan Simpan template anda.
7.Selanjutnya silahkan ke Rancangan>> page elements di blog sobat.
silahkan add gadget di bagian header di mana anda mau slide yang akan di buat tampil.

lalu pilih yang add HTML/Javascript.

8.Jika anda sudah membuka area Html/javascript tadi.
pastekan kode di bawah ini di area html/javascriptnya.
Kodenya :
<div id="my-slideshow">
<ul class="bjqs">
<li><img title="Ini Keterangan gambar anda." src="http://1.bp.blogspot.com/-6VtyHuKWXec/T00nRHDBfKI/AAAAAAAAFwQ/FwyFSdzpq5I/s1600/slider-image1.jpg"/></li>


<li><img title="Ini Keterangan gambar anda." src="http://1.bp.blogspot.com/-PpkbSLY_9TQ/T00nR_BmGGI/AAAAAAAAFwY/B-WYpsKXJTM/s1600/slider-image2.jpg"/></li>


<li><img title="Ini Keterangan gambar anda" src="http://2.bp.blogspot.com/-iywK-OLiBio/T00nPynnhOI/AAAAAAAAFwI/Sic5_siiUb0/s1600/slider-image-3.jpg"/></li>


<li><img title="This is a another much longer caption." src="http://1.bp.blogspot.com/-07WMvWuPh28/T00nUTHpPZI/AAAAAAAAFwg/zQp89S1-5fY/s1600/slider-image4.jpg"/></li>


<li><img title="Ini Keterangan gambar anda" src="http://2.bp.blogspot.com/-c5hZdFVFe1E/T00nVcWvScI/AAAAAAAAFwo/t7hX91c07Xc/s1600/slider-image5.jpg"/></li>
</ul>
</div>




9. Selanjutnya simpan template anda dan lihat hasilnya.
Jika anda teliti dijamin pasti berhasil membuat slideshow nya.
Ok..Sekian trik Blog kali ini, silahkan beri komentar dan pendapatnya di bawah ya.

Popular Posts

VIDEO LUCU HARI INI

Blog Archive

Top Dan Unik. Diberdayakan oleh Blogger.
Topics :