Minggu, 16 Desember 2012

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 BoxWidget 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”layangkan” Baca : Kumpulan Widget Keren untuk WordPress Free

2 komentar:

You Might Also Like This

Related Posts Plugin for WordPress, Blogger...