Membuat Widget melayang pada Blog

Thursday, January 19, 2012
cewek : yank gimana sih caranya membuat widget melayang di blog??? 
cowok : hah!! membuat widget melayang di blog???
cewek : iya!! gimana caranya???
cowok : gampang banget
cewek : gimana coba???
cowok : 1. pertama-tama loggin dulu ke "Blogger"
              2. masuk ke "Dashbord"
              3. pilih "Rancangan" (Tata Letak)
              4. klik "Tambah Gadget"
              5. pilih "HTML/JavaScript" lalu letakkan kode dibawah ini. Klik simpan






<style type="text/css"> #gb{ position:fixed; top:10px; z-index:+1000; } * html #gb{position:relative;} .gbcontent{ float:left;margin-left:220px; border:2px solid #bb0000; 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> Silahkan tempatkan kode iklan, banner, teks atau apalah terserah kamu disini yah</center> <script type="text/javascript"> var gb = document.getElementById("gb"); gb.style.center = (30-gb.offsetWidth).toString() + "px"; </script></div></div>




NB:Perhatikan pada script diatas yang berwarna 'ungu' (float:left;margin-left:220px; border:2px solid #bb0000; background:#eeeeee; padding:10px;)itu pengaturan tentang posisi, background, border, widget melayang tersebut. Atur sesuai dg keinginan kamu apakah ingin di tempatkan di bagian kiri atau kanan.
Pada script yang berwarna 'merah' (Silahkan tempatkan kode iklan, banner, teks atau apalah terserah kamu disini yah) itu silahkan tempatkan kode iklan, banner, teks atau apalah di situ.


Sekian saja ya posting saya

Selamat menikmati

Semoga tidak berhasil

    0 komentar:

    Post a Comment

     
    Cors Shinoda Blog © 2011 | Design Template by Rizky wardiansyah | Template Blogger Name | Template Transparent 2.0 | Template Transparent 2.0