Cara Membuat Widget Melayang di Blogger

Diposting oleh Blogger Santuy 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
29 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

Blogger Santuy mengatakan... Reply Comment

Terima kasi kembali agan-agen sekalian...!

Bisnis Autopilot mengatakan... Reply Comment

salam kenal gan...

sukague.com mengatakan... Reply Comment

blogwalking gan :)

Blogger Santuy mengatakan... Reply Comment

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

Unknown mengatakan... Reply Comment

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

http://rumahsulamrofifah.blogspot.com

ibnu mengatakan... Reply Comment

folback gan novaibnu.blogspot.com
Salam blogger & Blogwalking

Unknown 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

Unknown mengatakan... Reply Comment

Thanks
http://ilhamshare301.blogspot.com/

teggoeh farm's mengatakan... Reply Comment

manteeeepppp

Anonim mengatakan... Reply Comment

Ada demo nya engga nih sob? hehe

abe mengatakan... Reply Comment

makasih gan artikelnya. mantap jayaaaa

Chanif mengatakan... Reply Comment

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

kalo lewat jangan lupa klik Disini yagh

Unknown mengatakan... Reply Comment

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

Anonim 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 mengatakan... Reply Comment

Kren pokonya..

Anonim mengatakan... Reply Comment

ini dia yang aku cari cari

Andri mengatakan... Reply Comment
Komentar ini telah dihapus oleh pengarang.
Muhammad Robi Uddin mengatakan... Reply Comment

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

acemaxs31 mengatakan... Reply Comment

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

Unknown mengatakan... Reply Comment

terimakasih banyak mas bro, tutornya sangat bermanfaat...
http://www.tokoobatku.com/
http://landongobatherbal.com/

teguh creativa mengatakan... Reply Comment

TErima kasih atas tutorialnya, alhamdulillah sudah jadi.

IDCHEAT.COM mengatakan... Reply Comment

@topSpot | Find your top spot here:Artikelnya sangat bermanfaat, mampir juga ke blog saya ya
http://www.idcheat.com/
http://giribig.com/

Unknown mengatakan... Reply Comment

Kasih contohnya dng bro..??

Unknown mengatakan... Reply Comment

Kasih contohnya dng bro..??

Unknown mengatakan... Reply Comment

Perkenalkan, saya dari tim kumpulbagi. Saya ingin tau, apakah kiranya anda berencana untuk mengoleksi files menggunakan hosting yang baru?
Jika ya, silahkan kunjungi website ini www.kumpulbagi.com untuk info selengkapnya.

Di sana anda bisa dengan bebas share dan mendowload foto-foto keluarga dan trip, music, video, filem dll dalam jumlah dan waktu yang tidak terbatas, setelah registrasi terlebih dahulu. Gratis :)

Posting 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...