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.


Hand Scrol Image
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
Axact

Z-PLATE

Terima Kasih Telah Berkunjung dan Berkanan Membaca artikel dari Blog Kami, Silahkan Masukan Komentar Untuk menambah Motivasi Kami.

Post A Comment:

1 comments:

  1. Wah sangat bermanfaat sekali buat saya pribadi, saya yakin artikel ini juga bermanfaat banyak terhadap pembaca lainnya seperti yang saya alami.
    Terimakasih bos atas infonya, sukses selalu ..!

    BalasHapus