Memasang Shoutbox Melayang

Sidebar sudah penuh dengan Widget tapi shoutbox belum terpasang,nich solusinya.dengan shoutbox melayang ini kamu tetep bisa pasang shoutbox.selain itu juga dapat mempercantik tampilan blog kamu.jadi kalau kita ingin menggunakan shoutbox itu kita tinggal klik gambar PESAN tersebut ,maka shoutbox akan muncul dan bisa digunakan semestinya.
untuk contohnya bisa dilihat disamping kanan blog saya ini.

OK, Langsung saja menuju target. . .

caranya…pertama kamu copy dulu kode dibawah ini…, kemudian pastekan pada ( blogspot )…Tambah Gadget >>> Html/Javascript
Ini codenya….

<style type="text/css">
#nempel{position:fixed;top:65px;z-index:+1000;}
* html #nempel{position:relative;}
.nempeltab{height:100px;width:30px;float:left;cursor:pointer;background: #A5BD51 url('http://lh5.ggpht.com/_xcD4JK_dIjU/Stq23DPOQUI/AAAAAAAADhQ/2imPnFpVUrA/d/floatnav.jpg')no-repeat;}
.nempelisi{float:left;border:2px solid #A5BD51;background:#CCFFFF;padding:8px;}
</style>
<script type="text/javascript">function showHideNempel(){var nempel = document.getElementById("nempel");var w = nempel.offsetWidth;nempel.opened ? moveNempel(0, 30-w) : moveNempel(20-w, 0);nempel.opened = !nempel.opened;}function moveNempel(x0, xf){var nempel = document.getElementById("nempel");var dx = Math.abs(x0-xf) > 10 ? 5 : 1; var dir = xf>x0 ? 1 : -1;var x = x0 + dx * dir;nempel.style.right = x.toString() + "px";if(x0!=xf){setTimeout("moveNempel("+x+", "+xf+")", 10);}}</script>
<div id="nempel">
<div class="nempeltab" onclick="showHideNempel()"></div>
<div class="nempelisi">

<!-- Begin ShoutMix - http://www.shoutmix.com -->
<iframe scrolling="auto" width="250" frameborder="0" src="http://www6.shoutmix.com/?m4rlif" height="350" title="m4rlif">
<a href="http://www6.shoutmix.com/?m4rlif">View shoutbox</a>
</iframe>
<br/><a href="http://www.shoutmix.com" title="Get your own free shoutbox chat widget at ShoutMix!">ShoutMix chat widget</a><br/>
<!-- End ShoutMix -->

<div style="text-align:right;"><a style="text-decoration:none; font-family:Arial, Helvetica, sans-serif; font-size: 12px;" href="javascript:showHideNempel()">[Close]</a></div>
</div>
</div>
<script type="text/javascript">var nempel = document.getElementById("nempel");nempel.style.right = (30-nempel.offsetWidth).toString() + "px";</script>

Keterangan: Untuk yang warna hijau kamu ganti dengan kode shoutbox kamu sendiri.

sedah jelaskan,kalau belum jelas dibaca secara cermat lagi yach.hehehe,,,,,,,,,,
OK, selamat mencoba

11 comments:

Bang Del said...

Shoutbox sekarang bisa dibuat melayang ya :) Thanks buat tutorialnya, sangat membantu.

Odir said...

Kenapa y bang,
setiap ada giniannya buka blog jd lambat.. (bukan koneksinya lho...)
sepertinya ada bug?

dJumTKSblog said...

Ini dia yang dicari...sudah dicoba bro, tapi jadi sama tulisan "Pesan" dan warnanya dgn blogmu...apa ada cara untuk mengantinya?
Thanks.

MaRLiF said...

@dJumTKS: Ni kan udah ada keterangannya mas >>>>>>>> Keterangan: Untuk yang warna hijau kamu ganti dengan kode shoutbox kamu sendiri.

Jadi mungkin mas copas semua code yang ada diatas sehingga yang terpasang adalah soutbok aku......

dJumTKSblog said...

hehehe...ngak juga bro...kan sdh ngisi shoutbox saya beda isinya...tadi saya cari2 juga kode utk merubah tulisan pesan tsb,,msh belum ketemu.

MaRLiF said...

@djumTKS: kalau masalah warna tulisan pesan cara settingnya di CPnya shoutbox yang kamu gunakan mas.......

super.sonic42 said...

@dJumTKS
bro,, link yg "http://lh5.ggpht.com/_xcD4JK_dIjU/Stq23DPOQUI/AAAAAAAADhQ/2imPnFpVUrA/d/floatnav.jpg" diganti sama url image yang bro punya...
utk background,, coba ubah kode antara "background:#CCFFFF" atau "background: #A5BD51" sesuai warna yg anda inginkan....

Accilong said...

wow.. thanks abis.... dah di praktekin negh dan dah nongol.. hehehe


tingkyu...tingkyu...

M4RLiF said...

@Asriani Amir: okey. sama2
thanks juga atas kunjungannya.

DEBRIAN RUHUT BLOG said...

Perlu diketahui bahwa tidak semua browser menampilkan sempurna chat box melayang di atas. Bila menggunakan firefox, tampilan chat box akan menonjol ke depan (tidak enak dipandang). Maka ganti javascript terakhir dengan yang satu ini untuk mendapatkan kompatibilitas di berbagai browser (100% Tested):

var gb = document.getElementById("gb");
if (window.opera) {
gb.style.right = (30-gb.offsetWidth).toString() + "px";
}else {
gb.style.right = (-gb.offsetWidth).toString() + "px";
}

Best Regard,
http://debrianruhut.blogspot.com/

ajurNA said...

@DEBRIAN RUHUT BLOG: terima kasih atas tambahannya sob. semoga dapat membantu.

Post a Comment

Related Posts Plugin for WordPress, Blogger...
 

Like This Yo !