Draggable Blogger Widget With jQuery

Bismillah...DRAGGABLE BLOGGER WIDGET WITH JQUERY, Setelah sebelumnya saya telah memberikan trik memindahkan gambar dengan jQuery, sekarang saya akan memenuhi janji saya untuk memindahkan Widget-widget blogger.

Widget Blogger yang saya maksud disini meliputi widget HTML, Profile, Followers, dan Label Blog. Sebenarnya trik ini adalah pengembangan dari trik yang sebelumnya yaitu drag pada gambar. sebelum pada tahap pembahasan disini saya akan mengingatkan kalian dengan "TYPE" widget yang ada pada Blogspot.

VIEW DEMO

Untuk contoh sebagai berikut:

Dibawah ini adalah contoh kode widget pada template blogger, kalian bisa melihat sendiri pada template kalian.

<b:widget id='Followers1' locked='false' title='Followers' type='Followers'/>
<b:widget id='HTML3' locked='false' title='SAMPLE' type='HTML'/>
<b:widget id='Label1' locked='false' title='Label' type='Label'/>
<b:widget id='Profile1' locked='false' title='About' type='Profile'/>

Dari kode diatas, bisa kita ambil dan kita simpulkan type-type widget yang ada pada blogspot (warna hijau). yaitu :

^^ Followers
^^ HTML
^^ Label
^^ Profile

dan masih banyak lagi "TYPE" widget blogger yang lainnya.

Setelah kita tahu Type dari widget nya, sekarang kita lanjutkan ke pembahasan awal, yaitu memindahkan widget blog dengan jQuery.

1. Login ke blogger kalian
2. Pilih Rancangan --> EDIT HTML
3. Simpan kode 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'/>

Catatan :Jika script diatas sudah ada dalam template kalian, tidak usah dipasang lagi / cuekin tahap No. 3 ini.

4. sekarang pasang script berikut dibawah kode script no.3

<script type='text/javascript'>
$(document).ready(function() {
$(&quot;.widget.TYPEWIDGET&quot;).draggable();
});
</script>

Keterangan :
silahkan ganti kode warna kuning dengan nama Type Widget yang akan di sisipkan effect drag.

Contoh untuk Widget Followers :

$(".widget.Followers").draggable();

Jadi script lengkapnya seperti berikut ini :

<script type='text/javascript'>
$(document).ready(function() {
$(&quot;.widget.Followers&quot;).draggable();
});
</script>

Untuk Widget TYPE HTML kalian tinggal menambahkan kata HTML pada scriptnya, jadi bentuknya seperti ini :

<script type='text/javascript'>
$(document).ready(function() {
$(&quot;.widget.HTML&quot;).draggable();
});
</script>

Tambahan :
Untuk TYPE HTML, kode diatas akan memindahkan semua WIDGET TYPE HTML yang ada di blog

Sekarang saya akan berikan contoh script lengkap meliputi HTML, Label, Followers, HTML, Profile dan Gambar

<script type='text/javascript'>
$(document).ready(function() {
$(&quot;div.drag_gambar img&quot;).draggable();
$(&quot;.widget.Label&quot;).draggable();
$(&quot;.widget.Profile&quot;).draggable();
$(&quot;.widget.HTML&quot;).draggable();
$(&quot;.widget.Followers&quot;).draggable();
});
</script>

Khusus untuk Gambar kalian bisa melihat penjelasan lebih Lengkapnya DISINI.

VIEW DEMO

5. SIMPAN template

Pelengkap :
^^ Supaya terlihat kalo widget bisa dipindahkan, kita harus merubah tampilan kursornya, Tambahkan kode CSS berikut pada kode h2 (judul) sidebarnya.

Sidebar h2 {
/* Kode sidebar h2 DISINI */
cursor:move;
}

Kode Judul Sidebar dalam setiap template tidak semuanya begitu, jadi sesuaikan dengan template kalian dan tinggal menambahkan kode cursor:move;

Semoga bermanfaat dan silahkan di coba.

Silahkan kirimkan Donasi anda seikhlasnya berupa uang/pulsa (Klik Gambar kado disamping) untuk perkembangan blog ini dan Proses pembelajaran untuk sahabat.

Penulis :  Azis Lamayuda | BLOG : Do The Best To Get The Best
Saya hanyalah seorang yang sedang belajar dan berbagi pelajaran dengan siapapun. Blog ini dibuat untuk memudahkan kalian yang sedang belajar sama seperti saya.