♫ You're Reading
Widget

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: https://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

Selamat bereksperimen😉 Mau tau gimana blog ini punya tampilan seperti majalah? Lihat kode-kodenya😀 Elemen

Baca Juga

About Sani Nugroho

simple writer.

Discussion

25 thoughts on “Cara Membuat Widget Melayang di WordPress

  1. When I initially left a comment I appear to have clicked on the -Notify me when new comments are added- checkbox and from now on every
    time a comment is added I get four emails with the same comment.
    There has to be an easy method you can remove
    me from that service? Appreciate it!

    Posted by pemasangan behel murah dan bagus di yogyakarta | 26 February 2015, 6:02 am
  2. kalau menampilkan widget who is melayang dan miring bagaimana? melayang menempel dan tulisannya miring disisi kiri halaman monitor

    Posted by Jojok-OriParfum | 30 November 2014, 5:48 am
  3. kaga bisa gan haduhhh

    Posted by atoz | 8 June 2014, 8:47 pm
  4. terima kasih tutorialnya

    Posted by paket internet murah | 29 March 2014, 2:01 pm
  5. mantap tipsnya sob…
    ijin praktekin…

    Posted by ulhandhy | 12 March 2013, 3:54 pm
  6. mantep infonya.mampir y ke blogku

    Posted by lambur2 | 23 January 2013, 3:54 pm
  7. barusan coba. muncul. tapi gak berapa lama tiba2 hilang sendiri. kenapa ya gan?

    Posted by akismet-5833224831cba3296fbbe70e69539109 | 9 January 2013, 10:33 am
  8. menarik nih, ijin coba ^^

    Posted by Artsoulinc | 8 January 2013, 7:17 pm
  9. trims abis gan… membantu sakli, izin copy ya…

    Posted by cara pengobatan alami | 25 December 2012, 11:27 am
  10. wah bagus infonya berguna untuk blog saya..
    ada yg suka aquascape? Promote buat yg suka pemandangan di dlm aquarium (aquascape) kunjungi kita di aquaplantscape.co.nr atau follow @AquaPlantScape trims🙂

    Posted by aquaplantscape | 11 November 2012, 1:43 pm
  11. Sip, dapat tips lagi…

    coba lagi deh…

    tnks

    Posted by Trade Azon | 2 November 2012, 11:29 pm
  12. mantap banget, langsung paket deh…

    tnks tipsx

    Posted by ulhandhy | 2 November 2012, 11:25 pm

Trackbacks/Pingbacks

  1. Pingback: Kumpulan Widget Keren Jam Digital dan Analog untuk WordPress & Free ! | PressDesain - 4 August 2013

  2. Pingback: Tips Mengutak-atik dan Memodifikasi Kode HTML WordPress « PressDesain - 11 December 2012

  3. Pingback: Cara Membuat Daftar Isi Blog dengan Background & Scroll « PressDesain - 11 December 2012

  4. Pingback: Cara Memasang Widget Pengunjung Online dengan Whos Amung Us di WordPress « PressDesain - 1 December 2012

  5. Pingback: Kumpulan Widget Keren Jam Digital dan Analog untuk WordPress & Free ! « PressDesain - 25 October 2012

Beri Komentar

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

✄ Fanpage

✄ More Article

Bagaimana cara membuat daftar isi ? Klik Disini

Scroll Down To See More Article

  • ✄ Tweets

    Tentang PressDesain

    wordpressPressDesain menggunakan tema The Morning After. Informasi lebih lanjut silahkan ke Blog Element

    PressDesain