English French German Spain Italian Dutch Russian Portuguese Japanese Korean Arabic Chinese Simplified

Rabu, 19 Oktober 2011

Cara Membuat SlideShow di Blogger

Nah kali aku akan membahas tentang cara Membuat slide show di blog,seperti yang ada di blogku..
ngak usah lama-lama ntar malah pada bengong, yuk cari tahu cara membuat slideshow widget untuk gambar di blogger dengan bantuan javascript dan css

Langkahnya sangat sederhana,kamu pilih Dashboard lalu pilih Tata Letak / Rancangan kemudian pilih tab Edit HTML,lalu seperti biasa contreng tulisan Exspand Widget Templates.
Nah,selanjutnya cari kode ]]></b:skin> (gunakan Ctrl+F di keyboard),setelah ketemu tinggal letakkan kode CSS di bawah ini tepat diatas kode ]]></b:skin> tersebut.

/* CSS easySlider */ #containerSlider { width:210px; height:110px; margin:0 40px; padding:0; position:relative; } #prevBtn, #nextBtn { display:block; margin:0; overflow:hidden; padding:0; text-indent:-8000px; } #slider ul, #slider li { list-style:none; margin:0; padding:0; text-indent:0; } #slider, #slider li { overflow:hidden; width:210px; height:110px; margin:0 auto; } #slider { margin-left:0; background:#ccc; border:1px solid #999; } #prevBtn, #nextBtn { display:block; height:34px; left:-20px; position:absolute; top:38px; width:31px; } #nextBtn { left:200px; } #prevBtn a, #nextBtn a { background:transparent url(http://2.bp.blogspot.com/-sy3zWYyTWLg/TWpAOl7v1II/AAAAAAAAAt4/GZ4veAPRe_Q/s1600/Arrow-Left%2Bpelajaran%2Bblog.png) no-repeat scroll 0 0; display:block; height:34px; width:31px; } #nextBtn a { background:transparent url(http://1.bp.blogspot.com/-ri5ctN5jxp4/TWpARdezqDI/AAAAAAAAAuA/dfmkoYxhjew/s1600/Arrow-Right%2Bpelajaran%2Bblog.png) no-repeat scroll 0 0; } #slider img { background:#ccc; padding:5px; width:200px; height:100px; }

Setelah itu,carilah kode</head> ,setelah ketemu tepat diatasnya letakkan kode javascript dan jQuery berikut:


<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

<script src='http://pelajarandashblogdotblogspotdotcom.googlecode.com/files/easySlider1.5.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$(&quot;#slider&quot;).easySlider({
auto: true,
continuous: true
});
});
</script>


Lalu simpan templates nya,ini blom selesai, sekarang membuat widgetnya :D
Nah,untuk menampilkannya pada widget coba pilih Tata Letak / Rancangan seperti gambar ,dan klik tulisan Add New Widget atau Tambah Gadget. Selanjutnya pilih HTML/Javascript kemudian letakkan kode dibawah ini dan simpan :

<div id="contentSlider">
<div id="slider">
<ul>
<li><a href="#" target=_blank"><img alt="pemandangan 1" src="http://3.bp.blogspot.com/-w5seRbe2tUg/TWoyA1W3pJI/AAAAAAAAAtQ/aRE-mp374oU/s1600/pelajaran%2Bblog%2Bpemandangan%2Bmembuat%2Bslide%2Bgambar%2Bjavascript%2B4.jpg" /></a></li>

<li><a href="#"><img alt="pemandangan 2" src="http://1.bp.blogspot.com/-XOxtNnKWuMA/TWoxnu0KhuI/AAAAAAAAAtA/Ihx2MMDHKZo/s1600/pelajaran%2Bblog%2Bpemandangan%2Bmembuat%2Bslide%2Bgambar%2Bjavascript%2B2.jpg"/></a></li>

<li><a href="#" target=_blank"><img alt="pemandangan 3" src="http://2.bp.blogspot.com/-V8sTo8mkTGs/TWoxiV2oGhI/AAAAAAAAAs4/sBbrwSA5hl8/s1600/pelajaran%2Bblog%2Bpemandangan%2Bmembuat%2Bslide%2Bgambar%2Bjavascript%2B1.jpg"/></a></li>

</ul>
</div>
</div>


Ket:
* Kamu hanya merubah kode yang bewarna merah diatas.
* Untuk tanda '#' gantilah dengan url tujuan kemana link gambar akan diarahkan,misal: http://pelajaran-blog.blogspot.com/2009/04/apa-itu-css.html.
* Untuk gambar sobat bisa memilih gambar sendiri baik dari komputer maupun dari web dengan mengambil url / alamatnya,misal: http://3.bp.blogspot.com/-w5seRbe2tUg/TWoyA1W3pJI/AAAAAAAAAtQ/aRE-mp374oU/s1600 /pelajaran%2Bblog%2Bpemandangan%2Bmembuat%2Bslide%2Bgambar%2Bjavascript%2B4.jpg

4 komentar:

  1. Inilah enaknya pake blogger bisa dimsukkan skrip HTML. Beriklan pun katanya bisa ya??

    BalasHapus
  2. iya mas beriklan juga bisa,coba deh pake blogger..asyik kok..ditunggu bloggernya ya..

    BalasHapus
  3. tp ak gk ngerti kode2 HTML. kyaknya ribet bnget.

    BalasHapus
  4. oh sama aku juga g terlalu mahir,tp sekarang aku udah ngerti dikit2...

    BalasHapus