Draggable Gambar

Pada kesempatan ini saya akan menjelaskan Cara Draggable Gambar artinya pada suatu kotak kecil dan didalam kotak tersebut terdapat gambar namun ukurannya melebihi kotak tersebut maka gambar tersebut bisa kita pindahkan namun hanya dalam kotak tersebut saja, walaupun tidak terlalu berguna dalam dunia blogger apa salahnya kalau saya membagikan ilmu ini yang saya dapat dari Dynamic Drive.

Oiya sebelumnya sudah mengerti maksud dari Draggable Gambar?? kalau belum mengerti y sudah g usah tau y oke dari pada saya g bener ngejelasinnya dan sangat sulit di mengerti dan g masuk akal pula, lebih baik saya kasih Demonya ajah di bawah ini ok :

Bagaimana Sudah mengerti dari maksud Draggable Gambar?? kalau sudah mengerti ingin memasangnya tidak? kalau ingin ikuti y cara di bawah ini dengan teliti dan tepat oke:

1. Seperti biasa login ke blogger dengan ID sobat sendiri
2. Setelah selesai masuk ke halaman Tata Letak => Edit HTML
3. lalu cari kode </head> dan masukan kode di bawah ini tepat di atasnya
   
   
   <style type='text/css'>
   
   /*Default CSS for pan containers*/
   .pancontainer{
   position:relative; /*keep this intact*/
   overflow:hidden; /*keep this intact*/
   width:300px;
   height:300px;
   border:1px solid black;
   
   }
   
   </style>
   
   <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
   
   <script src='http://oketrik.googlecode.com/files/JS.js' type='text/javascript'>
   
   /***********************************************
   * Simple Image Panner- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
   * This notice MUST stay intact for legal use
   * Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
   ***********************************************/
   
   </script>
   
   
   
4. Setelah itu simpan deh tapi belum bisa untuk di lihat hasilnya karena ada caranya lagi untuk memakainya, mau tau cara memakainya? klo mau tau kita dulu sebentar ok biar seger lagi
5. nah untuk memakainya sobat harus menggunakan kode di bawah ini :
   
   
   <div class="pancontainer" data-orient="center" style="width:400px; height:300px;">
   <img src="GAMBAR YANG AKAN DI GUNAKAN" style="width:700px; height:525px" />
   </div>
   
   
   
6. Kalau untuk menaruh kode tersenbut sobat bisa menggunakan/menaruhnya di tempat Post Editor atau pun dijadikan berupa Widget.
7. Selesai

Nah kalau sudah mengikuti langkah-langkah dan mengikutinya dengan benar pasti bisa menerapkannya, sebenarnya Draggable Gambar tidak terlalu penting dalam dunia Blogger dan saya sendiri pun bingung kegunaan dari Draggable Gambar namun tidak salahkan kalau saya membagikan ilmunya? Sekarang saya akhiri sampai disini ok sob, sampai jumpa Terima Kasih dan Happy Blogging

Bagikan Artikel : Facebook Twitter Google+ Linkedin Technorati Digg