0 Membuat Shoutbox Tersembunyi untuk Blog

By De Gunlance

0

Membuat Shoutbox Tersembunyi untuk Blog

Posted in

Haihooo para pengguna Blogger seDunia dan Akherat (Astaghfirullah). Malem ini, suasana amat mencekam, angin berhembus dari jendela, bayangan putih terlihat sekilas, dan ane mau ngeposting (???). Malem ini tuh ane mau ngajarin bagaimana cara masukin Shoutbox ato Buku tamu ato kotak Chatting di Blog ente, tapi yang tersembunyi, Oh ya kalo pengen ngelakuin nih cara, ente musti punya akun di Shoutmix, gampang kok, kagak makan waktu banyak. Tertarik? nih caranya
1. Buka blog ente
2. Dari Dashboard ente langsung lompat jauh (olahraga kali mas) ke Design > Page Elements
3. Klik pilihan Add A Gadget lalu pilih HTML/Javascript
4. Kotak Judul gak wajib, di Kotak yang bawah masukin nih Code
<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('http://lh4.ggpht.com/_jn57XA2jLxY/SmCHl1YEsxI/AAAAAAAAAXQ/HshHClEVcvY/tabs.png') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #A5BD51;
background:#F5F5F5;
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.right = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>
<div id="gb">
<div class="gbtab" onclick="showHideGB()"> </div>
<div class="gbcontent">
<!-- Ganti ini dengan kode buku tamu kamu -->
<br/>
<br/>
<a href="http://www.ywstudy.com">.
</a>
<div style="text-align:right">
<a href="javascript:showHideGB()">
[close]
</a>
</div>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script></div></div>
5. - Teks yang warnanya merah itu bisa diganti dengan link gambar lain
    - Top:50px untuk mengatur posisi
    - Height dan Width untuk mengatur luas gambar yang akan terlihat
    - Teks yang berwarna Biru nanti diganti aja sama Shoutmix Code punya ente
6. Lalu Save dan selesai dah tuh, kalo pengen liat hasil akhirnya, liat aja di Blog ane
Sekian dulu deh dari ane, Nasi goreng udah menanti, Good Bay (bukannya Bye yak?)