X-BLOG~ Cara membuat blogger slide show bergaya dengan JQuery Diposting oleh Adee

Hello Para blogger yang mampir di X-Zone kali ini pada bulan ramadhan,bulan suci saya akan memposting Cara membuat blogger Slide show bergaya dengan JQuery

 Untuk melihat penampakannya klik gambar di bawah ini :

Jika sudah merasa puas mari kita buat :

jangan lupa backup template anda dulu untuk berjaga-jaga  apabila terjadi kesalahan.

Langkah 1 : Pada blogger Dashboard klik Template >> Edit HTML 

Langkah 2 : Carilah kode ]]></b:skin> pada template Html anda (Gunakanlah CTRL + F untuk mempermudah pencarian)

Langkah 3 : Copy paste kode di bawah ini sebelum kode ]]></b:skin>

/* Start Slider Code From http://www.spiceupyourblog.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://www.spiceupyourblog.com/ */

Langkah 4 : Carilah kode </head> pada template HTML anda (CTRL + F)
Langkah 5 : Copy paste Kode di bawah ini tepat di atas/sebelum kode </head>

<!-- Start Slider Code From http://www.spiceupyourblog.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://www.spiceupyourblog.com/ -->

NB :  Kode yang berwarna Kuning adalah script JQuery,jika sebelumnya anda sudah menambahkan kode berikut di template anda hapuslah kode tersebut.


Kode yang berwarna Merah adalah lebar dan tinggi gambar slide.lebar dan tinggi ini anda bisa sesuaikan dengan keinginan anda (sesuaikan lebar dan tinggi kolom widget template anda) 


Langkah 6 : SAVE TEMPLATE ANDA.


Nah Jika semua langkah di atas dilakukan dengan benar,Anda sudah menambahkan kode CSS dan Script ke template anda.Langkah terakhir adalah menampilkan slide show pada blog anda 

(KLIK UNTUK MEMPERJELAS)

Tambahkan widget baru Add gadget >> HTML/JAVASCIPT kemudian copy paste kode di bawah ini

<div id="my-slideshow">
<ul class="bjqs">
<li><img title="This is a caption." src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiemD9h0Iz_T8yndVLcfFOH-AYEkhMoQZuEvLQYUESahgoI5bHh4nfqgmm3slOncBGKrovCtpBbmhlchwTZfyKDcPvgfqwpnfouVJ1luFe8svIrzUGo8N6RAK7El4BTf8Tfd9IsJmmGzscc/s1600/slider-image1.jpg"/></li>

<li><img title="This is a another caption." src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeX__M_2L80Qv5wfhUU6cvLIRnyrVghY1QNXeJ7jC2q1JaU1v0NJ26q4dBK-KdWhUGASLycxcAU3BYrzUqlTRUegPqobeLjtkv-MarLBFQ2zS-O3TAs4YK3ROx7Mt_T_q3AbktjncCOPTr/s1600/slider-image2.jpg"/></li>

<li><img title="This is a another longer caption." src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjD27wzDaBw-tuxtPDUdzVbX4uri2EmKLnd87BcyaJtrD0uKo-0UNhHkSNXGgBmgwd2bl_90wd6oEEqhmO0xk4FfQ82TDmardWtItvaIBThZRGQ2I5ZB3r9TvN33EZSrOCOphdmxLQcs0L/s1600/slider-image-3.jpg"/></li>

<li><img title="This is a another much longer caption." src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyQk7PnqTwy1zyrI-SsR8sXLrgT3WUvPDZhFZuQTuAeLPX8ytMh2VxUWCvx1D4V-U9TCJlTOrCzWLFQFzExhoYIbV-ipZ82GdK1s-7YpaCF0WQt7krc53rFIiMuT93l4mKhjFgeS_dnv20/s1600/slider-image4.jpg"/></li>

<li><img title="This is a another longer caption that can be the lenght of the image or even longer onto the next line." src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiV3FlnV7-gNFVBHwLWOhw9R0PbIAYya3C5zuLYzNe2FFc1nyftwgjVF66q0fnBnyIZMTHiD9YrXQH0hZXopqseWKUkrtmM12LEgr-c1f-RWLW5DKW1u6fvQKTUH4CbT-MygZBkMyTyRiDB/s1600/slider-image5.jpg"/></li>
</ul>
</div>

NB : Kode bewarna Kuning adalah keterangan gambar dan kode bewarna Hijau adalah alamat url gambar


Kemudian Simpan widget


Jika langkah-langkah di atas dilakukan dengan benar maka anda dapat memiliki Blogger Slide yang bergaya.

Diposting Oleh : Adee ~ Tutorial Blogger - Tips and trick~

Artikel X-BLOG~ Cara membuat blogger slide show bergaya dengan JQuery Semoga bermanfaat bagi Pengunjung blogger . Terimakasih atas kunjungan anda beserta kesediaan Anda membaca artikel ini. Kritik dan Saran anda dapat sampaikan melalui Kotak komentar Facebook Atau Komentar Blogger.apabila mengcopy-paste artikel X-BLOG~ Cara membuat blogger slide show bergaya dengan JQuery Mohon sertakan alamat sumber untuk menghargainya. Sekali Lagi saya Ucapkan Terima Kasih .