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.
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>
<div class="box">
<img alt="An image" src=url-gambar-sobat.jpg" />
</div>
<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.
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>
<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
Wah sangat bermanfaat sekali buat saya pribadi, saya yakin artikel ini juga bermanfaat banyak terhadap pembaca lainnya seperti yang saya alami.
BalasHapusTerimakasih bos atas infonya, sukses selalu ..!