Home » Tips Blogger » Membuat Efek Memindahkan Gambar Dengan jQuery

Membuat Efek Memindahkan Gambar Dengan jQuery

Gambar dalam sebuah artikel sangat berarti dalam memperjelas isi atau konten yang sedang kita buat. Tampilan gambar juga bisa dimodifikasi sehingga menjadi lebih cantik, Setelah sebelumnya saya pernah membahas dalam mempercantik tampilan gambar dengan efek zoom, kali ini saya akan berbagi  lagi satu tips untuk memperindah gambar yang kita tampilkan di artikel, yaitu memindahkan gambar dengan jQuery. Maksud dari effect ini ialah kita dapat menggeser atau mendrag gambar sesuai dengan keinginan kita pada gambar posting kita atau gambar di blog kita.

Nah jika temen-temen tertarik untuk membuatnya, perhatikan langkah-langkahnya di bawah ini :
  1. Login dulu di Blogger dengan akun anda.
  2. Pada dashboard pilih Rancangan >> edit HTML
  3. Jangan lupa Centang Expand Template Widget
  4. Klik Download template lengkap untuk jaga-jaga.
  5. Sekarang pasang Css kode dibawah ini diatas kode ]]></b:skin>
    .drag_gambar img { cursor: move;}
  6. Selanjutnya simpan script berikut diatas kode </head>
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js' type='text/javascript'/>
    <script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js' type='text/javascript'/>
    <script type='text/javascript'>
    $(document).ready(function() {
    $(&quot;div.drag_gambar img&quot;).draggable();
    });
    </script>
    Keterangan :
    Perhatikan kode script berwarna Kuning diatas, jika pada template anda sudah terdapat script tersebut, jangan dipasang lagi, pasang saja script yang berwarna merah.
  7. Kemudian klik Save/Simpan Template 
  8. Untuk penggunaannya pada gambar, anda bisa menggunakan kode berikut :
    <div class='drag_gambar'><img alt='KETERANGAN GAMBAR' src='URL GAMBAR'/></div>
Mudah bukan, tutorial ini sangat sederhana dan bisa memperindah tampilan gambar yang ada di artikel anda. Jika ada yang mau ditanyakan silahkan untuk mengisi kotak komentar yang ada di bawah. Selamat mencoba dan semoga bermanfaat.

Jangan lupa baca yang ini juga



0 comments:

Posting Komentar

PEDOMAN KOMENTAR
Ayo berpartisipasi membangun budaya berkomentar yang baik. Pantang bagi kita memberikan komentar bermuatan menghina atau spam.
Kolom komentar tersedia untuk diskusi, berbagi ide dan pengetahuan. Hargai pembaca lain dengan berbahasa yang baik dalam berekspresi. Setialah pada topik. Jangan menyerang atau menebar kebencian terhadap suku, agama, ras, atau golongan tertentu.

Bangun sharing ilmu dengan berkomentar disini :

Langganan: Posting Komentar (Atom)