Blog Tutorial

Tutorial Blog, Cheat Games, Tutorial Ponsel, Tutorial Komputer, Tutorial Browser

Minggu, 21 Maret 2010

Draggable Gambar

Kategori :
Draggable GambarPada 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 ##11 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

10 Komentar untuk Draggable Gambar

mantep deh... ikutan nyobain ya...

baguss . . .
siap di coba

haduwhh..
saya paling gga bisa nih kalo edit lewat EDIT HTML gtu...hehe..
tapi, artikeli ini, mantap banget gan!

mantap gan...

http://caraindra.blogspot.com

ini pake JQUERY yaah keren keren. Sob kalo trik biar kita sorot gambarnya langsung zoom ada nggk

@kuman on the net => g pake jquery sob, tapi pake Java script, wah klo itu belum aku coba sob hehehehe, banyak trik dari dynamic drive yang saya ambil tampi dalam pemasangannya lebih mudah dan simple...

Nggak jalan sob di komputer saya.

Nggak didukung browser Firefox kali.

hahah, lucu juga, tapi orang gak tau kalo itu bisa digrad kalau gak dikasih tulisannya :)

@Rizki => firefox ngedukung qo sob....
@Secangkir teh dan sekerat roti => betul tuh sob, hehehe

Kegunaanya mungkin bwt menghemat ruang diblog . . jadi tinggal digeser gitu deh . . .