Buat carousell image gallery slideshow di blog

Y
ang di maksud carousell image gallery slideshow adalah gambar slide show dengan efek berputar seperti permainan carousell yang biasa ada di taman bermain.Contohnya bisa dilihat di header blog saya (HOME)atau screenshotnya gambar di samping ini..Cara membuatnya cukup mudah. .
Oke langsung saja. .

buka dashboard dan klick tata letak-edit html.
cari kode ]]></b:skin>
hapus kode di atas dan masukkan kode ini

<br /> .carousel{<br /> float:left;<br /> margin: 0;<br /> padding:0px;<br /> }<br /> <br /> .carousel .widget {<br /> width: 920px;<br /> background:#c4d5ec;<br /> margin: 0;<br /> padding:0;<br /> }<br /> <br /> .carousel h2{<br /> display:none;<br /> }<br /> .stepcarousel{<br /> position: relative;<br /> overflow: scroll;<br /> width: 910px;<br /> height: 173px;<br /> }<br /> <br /> .stepcarousel .belt{<br /> position: absolute;<br /> left: 0;<br /> top: 0;<br /> }<br /> <br /> .stepcarousel .panel{<br /> float: left;<br /> overflow: hidden;<br /> margin: 10px;<br /> width: 200px;<br /> }<br /> <br /> .stepcarousel .panel img{<br /> float: left;<br /> background:#d9e5f4;<br /> margin: 0px;<br /> padding:10px;<br /> border:1px solid #ccc;<br /> }<br /> <br /> .stepcarousel .panel img:hover{<br /> background:#b5c5d8;<br /> }<br /> <br /> .quickedit{display:none}<br /> <br /> <br /> ]]></b:skin><br /> <br /> <script src='http://blogipank.fileave.com/gallery1.js' type='text/javascript'/> <script src='http://blogipank.fileave.com/gallery2.js' type='text/javascript'/>
untuk template seperti saya bisa langsung save,tapi untuk template yang lain harus buat page element baru,cara buat gampang.

cari kode <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
ganti '1' jadi '2' dan 'no' jadi 'yes'
save dulu template,kemudian masuk ke menu 'edit tata letak'
klick add gadgetz yang ada di atas 'header' ,lalu klick 'text javascript'
masukkan kode ini <script type="text/javascript"> stepcarousel.setup({ galleryid: 'mygallery', //id of carousel DIV beltclass: 'belt', //class of inner "belt" DIV containing all the panel DIVs panelclass: 'panel', //class of panel DIVs each holding content autostep: {enable:true, moveby:1, pause:3000}, panelbehavior: {speed:500, wraparound:false, persist:true}, defaultbuttons: {enable: true, moveby: 1, leftnav: ['http://i41.tinypic.com/j0b0j7.png', 30, 60], rightnav: ['http://i41.tinypic.com/mcu1zk.png', -65, 60]}, statusvars: ['statusA', 'statusB', 'statusC'], //register 3 variables that contain current panel (start), current panel (last), and total panels contenttype: ['inline'] //content setting ['inline'] or ['external', 'path_to_external_file'] }) </script><br /> <br /> <br /> <div id="mygallery" class="stepcarousel"><div class="belt"><br /> <br /> <br /> <br /> <div class="panel"><a href="http://mansuka.blogspot.com/"><img width="180" src="http://files.myopera.com/Nyomansk/albums/933168/thumbs/air.png_thumb.jpg" height="130"/></a><br /> </div><br /> <br /> <div class="panel"><a href="http://mansuka.blogspot.com/"><img width="180" src="http://files.myopera.com/Nyomansk/blog/Pengiring.jpg" height="130"/></a><br /> </div><br /> <br /> <br /> <div class="panel"><a href="http://mansuka.blogspot.com/"><img width="180" src="http://files.myopera.com/Nyomansk/albums/933168/thumbs/bali_tanahlot.jpg_thumb.jpg" height="130"/></a><br /> </div><br /> <br /> <br /> <br /> <div class="panel"><a href="http://mansuka.blogspot.com/"><img width="180" src="http://farm3.static.flickr.com/2466/4060388878_7096e998ef_m.jpg" height="130"/></a><br /> </div><br /> <div class="panel"><a href="http://mansuka.blogspot.com/"><img width="180" src="http://farm4.static.flickr.com/3489/4060400068_652185cd19_m.jpg" height="130"/></a><br /> </div><br /> <div class="panel"><a href="http://mansuka.blogspot.com/"><img width="180" src="http://files.myopera.com/Nyomansk/albums/933168/thumbs/bali_tempel4.jpg_thumb.jpg" height="130"/></a><br /> </div><br /> <div class="panel"><a href="http://mansuka.blogspot.com/"><img width="180" src="http://farm4.static.flickr.com/3525/4059646173_792657c776_m.jpg" height="130"/></a><br /> </div><br /> <div class="panel"><a href="http://mansuka.blogspot.com/"><img width="180" src="http://files.myopera.com/Nyomansk/albums/933168/thumbs/bali-festival.jpg_thumb.jpg" height="130"/></a><br /> </div><br /> <br /> <br /> <br /> <div class="panel"><a href="http://mansuka.blogspot.com/"><img width="180" src="http://farm3.static.flickr.com/2578/4060478214_7dd9846d84_m.jpg" height="130"/></a><br /> </div><br /> <br /> <br /> <br /> <br /> <br /> <br /> <div class="panel"><a href="http://mansuka.blogspot.com/"><img width="180" src="http://farm3.static.flickr.com/2660/4060478280_4ac72253f7_m.jpg" height="130"/></a><br /> </div><br /> <br /> <br /> <br /> <br /> </div></div>
save dan lihat hasilnya
gambar di atas akan tepat berada di atas header,untuk meletakan di bawah header cukup pindahkan dgn cara klick and drag ,untuk klick and drag di handpone, saya sudah pernah posting.Silahkan masuk daftar isi atau masukan keyword klick and drag di kotak pencarian

gampang kan?Selain kita bisa memasang galery photo ,kita juga bisa mempercantik halaman blog kita. Widgetz ini di komputer cukup ringan,tapi di hp agak berat. .Ya tapi tidak ada salahnya mencoba. .sekian dulu tips blogging kali ini ,Terimakasih. .

Berbagi :