Cara Membuat Widget Melayang di Blogger

Diposkan oleh Indra Wirawan on 12.02.2012


Get free daily email updates!

Follow us!

cara-membuat-widget-melayang
Cara Membuat Widget Melayang di Blogger-Biasanya untuk menarik perhatian pengunjung banyak dilakukan oleh para blogger atau webmaster handal. Banyak cara dan macam yang dilakukan, yang paling umum adalah membuat kenampakan teks atau widget tertentu kontras dengan yang lainnya, seperti penggunaan bold atau huruf miring (italic) pada kalimat tertentu, ada yang membuat text area (ingin tahu membuat text area, silahkan baca tutorial blog saya : Cara Membuat Text Area), membuat teks berkedip (cara membuatnya, baca tutorial blog berikiut : Cara Membuat Teks Berkedip), dan ada pula yang membuat teks berjalan (ingin tahu, baca lagi di sini : Cara membuat Teks Berjalan).
Tutorial Blog-Ya, namanya juga usaha. Usaha agar bagian terpenting yang mau kita tonjolkan dalam wb/blog kita dapat dilihat atau diperhatiakn oleh para pengunjung. Nah, pada kesempatan ini saya ingin share kepada Anda bagaimana "Cara membuat Widget Melayang di Blogger". Ya, walaupun ini tutorial yang sudah agak lama dikenal oleh para blogger, tapi saya reposting kembali dengan redaksi berbeda agar punya variasi.



Widget melayang adalah bagian tertentu (widget di dalam blog entah itu widget iklan, widget facebook like, widget follow twitter, bahkan widget iklan, hehehe :).
Lantas bagaimana, cara membuat widget melayang di blog Anda. Nah, berikut tutorialnya :
1. Log ini ke account blogger Anda. Langsung saja ke sini www.blogger.com
2. Lanjut ke bagian Tata Letak
3. Ke bagian Tambah Gadget (jika Anda ingin menambah gadget baru), tapi kalau mau edit Gadget yang sudah terpasang dan ingin membuatnya menjadi melayang atau floating, maka silahkan pilih salah satu HTML/Javascript kemudian klik edit.
4. Kemudian Copy kode HTML berikut :

<style type="text/css"> #gb{ position:fixed; top:10px; z-index:+1000; } * html #gb{position:relative;} .gbcontent{ float:left;margin-left:220px; border:0px solid #000000; background:#eeeeee; padding:10px; } </style> <script type="text/javascript"> function showHideGB(){ var gb = document.getElementById("gb"); var w = gb.offsetWidth; gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0); gb.opened = !gb.opened; } function moveGB(x0, xf){ var gb = document.getElementById("gb"); var dx = Math.abs(x0-xf) > 10 ? 5 : 1; var dir = xf>x0 ? 1 : -1; var x = x0 + dx * dir; gb.style.top = x.toString() + "px"; if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);} } </script> <div id="gb"> <div class="gbtab" onclick="showHideGB()"> </div> <div class="gbcontent"> <div style="text-align:right"> <a href="javascript:showHideGB()"> .:[Close][Klik 2x]:. </a> </div> <center>Masukkan kode HTML widget widget iklan, widget facebook like, widget follow twitter, bahkan widget iklan</center> <script type="text/javascript"> var gb = document.getElementById("gb"); gb.style.center = (30-gb.offsetWidth).toString() + "px"; </script></div></div>

Beberapa catatan Penting buat Anda :
  • Widget ini saya sudah setting untuk berada di sebelah kiri, untuk modifikasi Anda dapat mengubahnya dengan mengubah bagian yang sudah saya tandai kuning, dari tadinya left menjadi right (untuk widget melayang sebelah kanan).
  • Warna border saya setting jadi warna merah, untuk mengubahnya silahkan ubah kode warna di bagian yang sudah saya tandai orange solid #000000, sesuai dengan warna kesukaan Anda. Kode warnanya dapat Anda cari sendiri di Google , hehehe.
  • Backgroud dapat Anda rubah sesuai dengan kehendak Anda sendiri, modifikasi dengan mengubah bagian yang sudah saya tandai biru. Kode warna cari di google., hehehe
  •  Pada bagian warna merah, silahkan Anda masukkan kode HTML apa saja yang mau Anda buat melayang. Bisa kode iklan.
  • Widget melayang yang saya posting, di klik 2 kali baru keluar.
 5. Klik simpan, Kemudian Pratinjau untuk melihat apakah tutorial blog ini berhasil.

6. Setelah berhasil, klik simpan.

Okey, itulah tutorial blog yang sempat saya posting pada kesempatan ini. Semoga berhasil diperaktekkan, dan bermanfaat buat Anda. 

Seperti biasa, selalu masukkan kode HTML berikut jika Anda ingin mengambil postingan sebagai referensi atau mengcopy, sertakan selalu sumber dimana Anda mengambilnya :


Mohon Perhatian

Terima kasih atas kunjungan Anda di mahir blogger. Hubungi kami jika Anda menemukan konten/postingan
yang rusak/tidak terbaca. Silahkan beritahu kami dengan menulis pesan
pada kotak komentar. Kami akan berusaha menanggapi dan memperbaiki konten
tersebut secepatnya. Saran, kritik, dan komentar Anda sangat berharga buat kami. Terima Kasih, Contact on : mahirblogger@gmail.com.

Posted by : Mahir Blogger

Artikel Cara Membuat Widget Melayang di Blogger diposting oleh Mahir Blogger pada 12.02.2012. Terima kasih atas kunjungannya. Kritik dan saran dapat disampaikan via kotak komentar. Jika diperlukan, Artikel ini bisa disebarluaskan melalui blog Anda, hanya mohon sebutkan sumbernya dengan tautan link aktif ke postingan ini. Terima kasih.
Comments
28 Comments
Widget Comment FB-Blog
topSpot | Find your top spot here mengatakan... Reply Comment

Nice tutorial sob! Kapan-kapan bakal saya cobain nih di blog saya.

SALAM KENAL & SALAM BLOGGER :)

lekitra mengatakan... Reply Comment

thanks atas tutorialnya gan :D

Indra Wirawan mengatakan... Reply Comment

Terima kasi kembali agan-agen sekalian...!

Bisnis Autopilot mengatakan... Reply Comment

salam kenal gan...

sukague.com mengatakan... Reply Comment

blogwalking gan :)

Indra Wirawan mengatakan... Reply Comment

@sukague.com: boleh yang penting jangan spam aja. hehehe.

rumah sulam rofifah mengatakan... Reply Comment

bagaimana cara melihat yang nge-like blog kita pada widget ini...? trims ya

http://rumahsulamrofifah.blogspot.com

ibnu nova mengatakan... Reply Comment

folback gan novaibnu.blogspot.com
Salam blogger & Blogwalking

riska aulia mengatakan... Reply Comment

terimakasih gan atas infonya salam kenal yah gan
maaf gan numpang promonya yah
rajalistrik.com ialah toko online kami yang menjual produk-produk teknik industri terbesar, terlengkap, termurah, dan terpercaya di Indonesia yang menawarkan lebih dari 200.000 item produk dari kurang lebih 200 merek. rajalistrik.com berupaya memudahkan Anda untuk mendapatkan produk-produk teknik yang Anda inginkan dengan jaminan orisinalitas, kemudahan bertransaksi, kecepatan pengiriman, dan harga yang kompetitif.http://rajalistrik.com/

rahmatdi mengatakan... Reply Comment

mantap nih... ane coba dulu gan.... blog walking nih kunjung balik yah http://rahmatdi99.blogspot.com follow aja, nanti ane follow balik :D

ilham AbdulGani mengatakan... Reply Comment

Thanks
http://ilhamshare301.blogspot.com/

teguh wiyono mengatakan... Reply Comment

manteeeepppp

game-begog mengatakan... Reply Comment

Ada demo nya engga nih sob? hehe

abe mengatakan... Reply Comment

makasih gan artikelnya. mantap jayaaaa

CHANIF ARVANI mengatakan... Reply Comment

makasi yagh gan,,,,,,,,,,, semoga bermanfaat

kalo lewat jangan lupa klik Disini yagh

Fikri Ashsiddiqi mengatakan... Reply Comment

makasih sudah share brooo... kunjungan baliknya dimohon gan
www.fikrias.com

cintagame.com mengatakan... Reply Comment

berkunjung sob........

Gigih Kurniawan mengatakan... Reply Comment

terima kasih infonya :)

Musa Kameubun mengatakan... Reply Comment

Thanks gan 4 infonya! Kunjungi juga blogku di musa-bertambah-ilmu.blogspot.com :D

Extender Jilq mengatakan... Reply Comment

Kren pokonya..

Ayu Wandira Lestari mengatakan... Reply Comment

Thanks buat Ilmu dan Info Uniknya

klik-rudi mengatakan... Reply Comment

ini dia yang aku cari cari

Andri wahyudi mengatakan... Reply Comment
Komentar ini telah dihapus oleh pengarang.
Muhammad Tasbillah mengatakan... Reply Comment

mantap artikelx sangat membantu

Belajar SEO Blog, Pendidikan, Teknologi, Komputer, Elektronika, Otomotif, Kesehatan, Bisnis Online, Adsense, Adwords, Anroid

http://thazbhy.blogspot.com/


Techno Game Cyber

Free download game, game pc, game terbaru, ps 2014,

http://technogamecyber.blogspot.com/

Ahmad Ar mengatakan... Reply Comment

Salam blogger ya...
Best Regards,
Ahli SEO

reni2 mengatakan... Reply Comment

salam kenal mas.. jangan lupa visit kembali
makanan hamil

Robi Ladosa Depok mengatakan... Reply Comment

Bermanfaat banget mau cobain http://robijepara08.blogspot.com/2014/12/tips-dan-trick-line-lets-get-rich-event.html?m=1

Ace Maxs31 mengatakan... Reply Comment

mantap dah artikelnya mantap
http://ow.ly/FsiaG

Poskan Komentar

Terimah kasih atas Kunjungan Anda di Mahir Blogger. Silahkan Anda berkomentar, bertanya, memberikan saran, tanggapan, testimoni, atau bisa saja sekedar blogwalking. Silahkan pilih, Anda mau berkomentar dengan menggunakan Account Google, Live Journal, Wordpress, Type Pad, AIM, Open Id, Name/Url Anda bahkan bagi pengguna Anonim. Mohon berkomentar yang baik-baik, demi kemajuan blog ini. Komentar atau tanggpan yang terlambat saya respon mohon dimaafkan karena kekurangan waktu saya untuk selalu on line, banyak juga pekerjaan di dunia off line. Hehehe...

Related Posts Plugin for WordPress, Blogger...