Cara Membuat Widget Melayang di WordPress

Floating Widget atau widget melayang adalah salah satu fitur yang bisa didapatkan di wordpress.com , untuk mengaplikasikan widget ini dibutuhkan kode penunjang sehingga widget yang kita inginkan bisa melayang

Nah, kali ini saya akan menjawab pertanyaan salah satu teman bagaimana cara menampilkan widget agar bisa melayang, dan agar widget melayang tersebut ber-link saat diklik.

1. Seperti biasa, buka Tampilan > Widget

2. Drag widget Teks ke sidebar, copy kode ini dan paste-kan di bagian teks

  • Kode untuk widget flash, gigya, daftar isi dan lainnya

<a style=”display:scroll;position:fixed;bottom:0px;right:0px;”>
KODE HTML WIDGET YANG INGIN DITAMPILKAN
</a>

Contoh widgetnya : Chat Box, Widget Daftar Isi

  • Kode untuk widget yang menempel

Ada 2 kode yang tersedia, silahkan dicoba-coba, jika tidak bisa pakai kode yang kedua (alternate code)

Kode 1

<div style=”display:scroll;position:absolute;top:0px;right:0px;”>
KODE HTML YANG INGIN DITAMPILKAN
</div>

Contoh widgetnya : Headline Animator

Kode 2

<div style=”position:absolute;width:50px;top:0;left:0px;font-family:sans-serif;background:#fff;”>
KODE HTML WIDGET YANG INGIN DITAMPILKAN
</div>

Contoh widgetnya : Tulisan ber-link

  • Kode untuk tulisan berlink yang melayang

<a style=”position:fixed;bottom:0px;right:0px;” href=”LINK TULISAN YANG DITUJU (ex: http://pressdesain.wordpress.com/2012/08/02/cara-membuat-chat-box-dengan-chatango-di-wordpress-free/)” target=””_blank””><strong><span style=”color:#ff6600;”>TULISAN</a>

  • Kode untuk gambar melayang, berlink

<a style=”display:scroll;position:fixed;bottom:0;right:0;” href=”LINK YANG AKAN DITUJU“>
<img title=”JUDUL WIDGET” src=”SUMBER GAMBAR” alt=”Jump To Top” height=”99″ width=”17″>
</a>

Tambahan :

  • Position = menunjukkan posisi widget tersebut kode yang berwarna merah (bottom bisa diganti dengan top, jika ingin menampilkan widget di pojok atas. left bisa diganti dengan right, jika ingin menampilkan di pojok kanan. Posisi bisa diganti, (dalam satuan pixel)
  • Height, width bisa anda ganti ukuran gambar / widgetnya (height = tinggi, width = lebar)
  • Link yang dituju anda bisa mengubahnya dengan alamat URL yang dituju saat widget tersebut di-klik
  • KODE HTML WIDGET YANG INGIN DITAMPILKAN ganti dengan kode html widget anda yang ingin di”tayangkan”

 

sumber : pressdesain.wordpress.com

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s