Minggu, 20 Februari 2011

Percantik Blogmu dengan IconDock (jQuery)

Februari tinggal beberapa hari lagi, postingan di bulan februari masih sedikit. Yaudah ini aja dehh saya posting, kali aja berguna.. hehhe... karena saya lagi malas nulis postingan jadi gk usah bertele-tele lagi dehh. Kalau mau lihat apa itu IconDock bisa dilihat di blog saya yang ini, sorot mousenya ke Icon. Oia sebelum lupa, Script ini saya dapatkan dari sini.


Langsung ke cara pembuatannya :

1. Seperti biasa, login dulu ke Blogger → Rancangan → Edit HTML

2. Masukkan kode di bawah ini diatas kode </head>

<script src='http://icon.cat/software/iconDock/lib/jquery.js' type='text/javascript'/>
<script type='text/javascript'>
var confDock = {
    iconMinSide : 35,
    iconMaxSide : 70,
    distAttDock : 100,
    coefAttDock : 2,   
    veloOutDock : 500,
    valign: &#39;top&#39;
}


jQuery(function() {
     jQuery(&quot;#BarraPersonalitzada&quot;).addDockEffect(confDock);
   
});
</script>


Kemudian kalian tinggal menempatkan IconDock tersebut dimana, disini biar gk ribet saya kasih tau cara menaruhnya di sidebar (widget) saja...

3. Caranya, setelah melakukan langkah no.2 Save Template. Kemudian menuju ke Elemen Laman

4. Klik Tambah Gadget → pilih HTML/Javascript

5. Kemudian masukkan kode di bawah ini

<div id="BarraPersonalitzada">


<a href="#" name="Alertes_name" title="Google alertes"><img src="http://icon.cat/software/iconDock/img/alerts_35.gif" alt="Campana_alt" border="0" /></a>


<a href="#" name="Escriptori_name" title="Google Escriptori"><img src="http://icon.cat/software/iconDock/img/desktop_35.gif" alt="Escriptori_alt" border="0" /></a>


<a href="#" name="Compres_name" title="Google compres"><img src="http://icon.cat/software/iconDock/img/froogle_35.gif" alt="Froogle_alt" border="0" /></a>


<a href="#" name="GMail_name" title="Google mail"><img src="http://icon.cat/software/iconDock/img/gmail_35.gif" alt="Gmail_alt" border="0" /></a>


<a href="#" name="Grups_name" title="Google grups"><img src="http://icon.cat/software/iconDock/img/groups_35.gif" alt="Grups_alt" border="0" /></a>


</div>


Keterangan :
- ganti kode berwarna merah dengan URL gambar Icon yang kamu suka
- ganti kode berwarna biru dengan Link tujuan kalau icon tersebut di klik

6. Kalau sudah ya disimpan, dan lihat hasilnya....


1 komentar:

Tulis Komentar Disini