Cara Membuat Widget Melayang/Popup di Blog

Cara Membuat Widget Melayang/Popup di Blog
TULISKAN.com - Widget popup atau yang lebih sering dikenal dengan sebutan melayang adalah widget yang bersifat fixed, jadi widget ini akan melayang dilangit-langit blog, sehingga tidak memakan tempat ataupun space di blog, biasanya widget popup ini digunakan untuk memasang iklan, hingga memberitahukan informasi penting. 

Selain itu, menurut pengalaman saya pribadi, saya lebih banyak menggunakan widget melayang ini dalam permasalahan ad placemnt atau penempatan iklan, terutama PPC, karena dengan melayang, iklan akan semakin mudah dilihat oleh pengunjung, dan akhirnya mendapatkan klik dari mereka (PPC), jadi bisa saya simpulkan bahwasanya popup adalah salah satu adplacement iklan terbaik, namun kadangkala ada beberapa PPC yang tidak membolehkan kita memasang script popup.

Cara Membuat Widget Melayang/Popup di Blog

1. Login ke Blogger.

2. Pilih Tata letak.

3. Klik Add/Tambahkan gadget.

4. Pilih HTML/JavaScript.

5. Letakkan kode berikut ini kedalamnya.

<style type="text/css"> #gb{ position:fixed; left:30px;top:10px; z-index:+1000; } * html #gb{position:relative;} .gbcontent{ float:right; border:2px solid #A5BD51; background:#ffffff; 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>
Kode Script Widget
</center> <script type="text/javascript"> var gb = document.getElementById("gb");gb.style.center = (30-gb.offsetWidth).toString() + "px"; </script></div></div>.

Keterangan:
  • 30 (piksel) = Jarak Widget Melayang dari sisi kiri layar
  • 10 (piksel) = Jarak Widget Melayang dari sisi atas layar 
  • Ganti kode yang berwarna biru muda dengan Kode Script widget anda

7. Lalu klik "Save/Simpan", dan selesai.

Demikian informasi terbaru seputar tutorial dan tips trik blogging blogspot tentang Cara Membuat Widget Melayang/Popup di Blog, semoga bermanfaat, dan selamat mencoba.

Postingan terkait: