♫ You're Reading
Widget

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&#8221; 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)

Baca Juga :

About Sani Nugroho

simple writer.

Discussion

7 thoughts on “Cara Membuat 'Floating' Widget atau Widget Melayang di WordPress

  1. sangat bermanfaat,
    Nice blog

    Posted by ㈠aba $ema$a | 30 August 2014, 7:26 pm
  2. bro edit in ini donk,,
    biar bisa melayang,,

    http://www.widgipedia.com/widgets/orido/Save-Our-Earth-8731-8192_134217728.widget?__install_id=1248336094072&__view=expanded

    aku nyoba bisa cman muncul 2 widget 1 ditempat semula, 1 yang melayang di kanan bawah,,

    Posted by lutfi | 2 January 2012, 1:12 pm
  3. keren bro,, . .

    Posted by lutfi | 2 January 2012, 1:01 pm
  4. aku mencobanya, dan berhasil..
    terimakasih

    Posted by Sayyidah 'Ali | 2 January 2012, 7:54 am
  5. ini yang saya cari2 sob makasih ya

    Posted by epriant | 1 January 2012, 6:50 pm
  6. pengen juga, tapi bingung bos
    Bisa ga klo pasanang floating di blogspot ????

    Posted by choiruddin | 15 October 2011, 6:56 am

Trackbacks/Pingbacks

  1. Pingback: Tips Mengutak-atik Kode HTML « TerlamPau Site All About News - 19 August 2011

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