Cara Membuat ‘Floating’ Widget atau Widget Melayang di WordPress

memang agak susah membuat yang satu ini, kalau memasang gambar melayang sih lebih gampang, karena kode HTML yang selalu diterima oleh Admin WP, sedangkan membuat widget mengandung berbagai kode-kode yang membingungkan dan kadang-kadang tidak bisa digunakan sama sekali di WP, seperti format Java Script yang memang tidak didukung oleh WP. Nah, kali ini saya akan sharing dengan kalian “Cara Membuat ‘Floating’ Widget atau Widget Melayang di WordPress”
Caranya :

1. Login ke akun WP anda
2. Pergi ke Tampilan > Widget
3. Seret Text ke Sidebar , Judul kosongi, isi Text : (hapus tanda @)

<@a style=”display:scroll;position:fixed;bottom:0px;left:0px;”>
<div style=”text-align:center;width:90px;height:90px;margin:0 auto;”><p align=”center”></p><div style=”text-align:center;width:150px;height:225px;margin:0 auto;”>
Kode Widget
</div><p></div>
</div>
</a>

Tulisan Kode Widget diganti dengan kode HTML widget yang ingin anda ‘Layangkan’ , mohon maaf, tidak semua widget bisa melayang, saya baru mencoba widget yang diawali dengan tanda [ dan diakhiri dengan tanda ] .
4. Klik Save

Anda dapat mengatur ukuran widget serta posisinya
1. ATAS KIRI(hapus tanda @)

<@a style=”display:scroll;position:fixed;top:0px;left:0px;”>
<div style=”text-align:center;width:90px;height:90px;margin:0 auto;”><p align=”center”></p><div style=”text-align:center;width:150px;height:225px;margin:0 auto;”>
Kode Widget
</div><p></div>
</div>
</a>

2. ATAS KANAN (hapus tanda @)

<@a style=”display:scroll;position:fixed;top:0px;right:0px;”>
<div style=”text-align:center;width:90px;height:90px;margin:0 auto;”><p align=”center”></p><div style=”text-align:center;width:150px;height:225px;margin:0 auto;”>
Kode Widget
</div><p></div>
</div>
</a>

3. BAWAH KIRI

<@a style=”display:scroll;position:fixed;bottom:0px;left:0px;”>
<div style=”text-align:center;width:90px;height:90px;margin:0 auto;”><p align=”center”></p><div style=”text-align:center;width:150px;height:225px;margin:0 auto;”>
Kode Widget
</div><p></div>
</div>
</a>

4. BAWAH KANAN

<@a style=”display:scroll;position:fixed;bottom:0px;right:0px;”>
<div style=”text-align:center;width:90px;height:90px;margin:0 auto;”><p align=”center”></p><div style=”text-align:center;width:150px;height:225px;margin:0 auto;”>
Kode Widget
</div><p></div>
</div>
</a>

Untuk mengatur ukuran widgetnya silahkan atur ukurannya yang
Width dan Height , saya beri contoh widget yang saya pasang di blog saya
(hapus tanda @) INI ADALAH CONTOH KODE WIDGET JAM MELAYANG)
<@a style=”display:scroll;position:fixed;bottom:110px;left:20px;”>
<div style=”text-align:center;width:90px;height:90px;margin:0 auto;”><p align=”center”></p><div style=”text-align:center;width:150px;height:225px;margin:0 auto;”>[@gigya width="125" height="200" src="http://www.widgipedia.com/widgets/widgetindex/httpwidgetindex2ndblogspotcom-5957-8192_134217728.widget?__in%22%20+%22stall_id=1277732232861&amp;__view=embed\" title="TerlamPau Site All About News" quality="autohigh" loop="false" wmode="transparent" menu="false" allowScriptAccess="sameDomain" ]</div><p></div>
</div>
</a>
(Yang saya coret itulah kode HTML jamnya)