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

Posted on March 27, 2013, in WordPress. Bookmark the permalink. 2 Comments.

  1. I simply want to say I am just beginner to weblog and definitely liked this web-site. Likely I’m want to bookmark your blog post . You really come with wonderful writings. Regards for sharing with us your blog site.

  2. I just want to mention I am just all new to weblog and truly savored your blog. Likely I’m likely to bookmark your blog post . You certainly have fantastic articles and reviews. Kudos for sharing your website page.

Silakan tinggalkan komentar .. Kami berhak menghapus kata - kata yang berbau pelecehan, intimidasi, bertendensi suku, agama, ras, antar golongan, porno serta spammer, Terima kasih Kerabat Copaz Blog!

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: