CARA MEMINDAHKAN WIDGET DENGAN JQUERY (DRAGABLE)

CARA MEMINDAHKAN WIDGET DENGAN 

JQUERY (DRAGABLE)

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

melihat sendiri pada template kalian. Kita ambil contoh misalnya 

<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'/>


1. Login ke blogger 
2. Pilih Template --> EDIT HTML3. 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 :

$(&quot;.widget.Followers&quot;).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>