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 merah). 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 merah 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>

Dengan memasukan alamat email dibawah ini, berarti anda akan dapat kiriman artikel terbaru dari Official Blog Of ZAS-XP.com di inbox anda: