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:
Shoutbox sekarang bisa dibuat melayang ya :) Thanks buat tutorialnya, sangat membantu.
Kenapa y bang,
setiap ada giniannya buka blog jd lambat.. (bukan koneksinya lho...)
sepertinya ada bug?
Ini dia yang dicari...sudah dicoba bro, tapi jadi sama tulisan "Pesan" dan warnanya dgn blogmu...apa ada cara untuk mengantinya?
Thanks.
@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......
hehehe...ngak juga bro...kan sdh ngisi shoutbox saya beda isinya...tadi saya cari2 juga kode utk merubah tulisan pesan tsb,,msh belum ketemu.
@djumTKS: kalau masalah warna tulisan pesan cara settingnya di CPnya shoutbox yang kamu gunakan mas.......
@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....
wow.. thanks abis.... dah di praktekin negh dan dah nongol.. hehehe
tingkyu...tingkyu...
@Asriani Amir: okey. sama2
thanks juga atas kunjungannya.
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/
@DEBRIAN RUHUT BLOG: terima kasih atas tambahannya sob. semoga dapat membantu.
Post a Comment