Cara Membuat Handscroll Image Di Blog

Baca Juga

Bismillahirrahmnirrahim... sesuai dengan judul diatas yaitu Cara Membuat Handscroll Image Di Blog, sebelum ke tutorial sebaiknya sobat mengetahui apa itu Handscroll, Handscroll kalo di terjemahkan ke dalam bahasa kita (Bahasa Tercinta Indonesia) hand = Tangan sedangkan Scrool  = Gulir atau Geser,, kalo inging melihat contohnya coba sobat klik link di di bawah ini.

Contoh HandScroll klik disini

Hand Scrol Image

Untuk membuatnya sangat gampang sekali, sobat tinggal copy vaste kode di bawah ini.

Langkah pertama sobat login ke blogger terus masuk ke area Template terus klik edit HTML

Setelah itu sobat cari kode </head> terus copy kode di bawah ini dan vaste kode tersebut diatas kode </head>

<script src="https://handjava.googlecode.com/svn/tangan.js"></script>
<style>
#scroller1, #scroller2, #scroller3 {
height: 200px;
border: 4px solid white;
padding: 10px;
margin: 0;
float: left;
overflow: auto;
}
#scroller1, #scroller3 {
width: auto;
float: none;
}
#handle {
height: 172px;
width: 50px;
float: left;
}
.box, .box2, #box {
margin: 10px;
float: left;
display: inline;
width: 300px;
height: 150px;
overflow: hidden;
border: 3px solid white;
}
#box {
float: right;
}
.nojs {
color: black;
font-weight: 700;
padding: 20px;
border: 3px solid red;
margin: 10px;
background: white;
text-align: center;
font-size: 1.4em;
}
body.js .nojs { display: none; }
</style>

Langkah selanjutnya sobat cari kode </body> terus copy kode di bawah ini dan vastekan diatas kode </body>

<script>
handScroller({className:'box'});handScroller({className:'box2'},{controls:{className:'box2'}});handScroller(document.getElementById('scroller1'),{styles:{overflow:'hidden'}});var handle=document.createElement('div'),scroller=document.getElementById('scroller2');handle.id='handle';scroller.style.overflow='hidden';scroller.parentNode.insertBefore(handle,scroller.nextSibling);scroller.style.overflow='hidden';scroller.style.width='828px';handScroller(handle,{controls:scroller,mousewheel:'y'});handScroller(document.getElementById('box'));handScroller(document.getElementById('scroller3'),{styles:{overflow:'hidden'}});
</script>

Terus save template sobat, langkah terakhir upload photo sobat terus masukan dalam postingan supaya poto tersebut bisa bergulir dengan mouse, sobat modif sedikit script image nya dengan kode di bawah ini.
<div class="box">
<img alt="An image" src=url-gambar-sobat.jpg" />
</div>    

Oke deh... saya rasa postingan pada kesempatan ini di cukupkan sampai disni semoga berhasil, Good Luck Happy Blogging