Click Here

Labels

Membuat ShoutBox Tersembunyi

Postingan kali ini saya mencoba mensharingkan cara membuat ShoutBox tersembunyi di samping. Sebagai contoh pada halaman blog saya ini, shout box nya berada di kiri ( klik tulisan "GUEST BOOK" disamping kiri).
Nah jika anda tertarik untuk membuat tampilan ShoutBox anda seperti itu, saya ingin mensharingkan cara-caranya. langsung saja ke tahap pembuatan.
  • Seperti biasa login dulu ke Blogger
  • Masuk ke Tata Letak/Layout - Page Elements
  • Add gadget - HTML/Javascript
  • Copy code dibawah ini :
<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 shout box anda -->
<br/>
Mau seperti ini?<br/>
Click aja disini--->
<a href="http://serba-seru.blogspot.com/2009/12/membuat-shoutbox-tersembunyi.html">
Serba Seru
</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>
  • Pastekan ke gadget anda tadi
  • Nah...tulisan yang berwarna merah anda ganti dengan code shoutbox anda,
  • untuk angka yang berwarna pink dapat anda sesuaikan dengan selera anda
Selamat Mencoba...!!!
Support all Blogger


(Sumber : www.forantum.blogspot.com)
Harga Notebook Acer Aspire S3 Ultrabook

Sudah 8 Orang Berkomentar, Silakan anda yang selanjutnya :

Komentar dari Rahad 2 Six :

nah....
ini nih tutorial yang aku cari2....
thx ya.... mantep nih

Komentar dari DiaraCommunity :

Mantab... mas.... tak pinjam nya scriptnya....

Komentar dari Rahad 2 Six :

cara buat ganti tulisan depannya gimana ya??
kayak dipunya mu,kan tulisannya guest book....tpi di punyaku jadinya buku tamu....
mohon bantuannya..

Komentar dari G E O R G E O U Z :

Kl itu bikin sendiri sob...biasa...pake photoshop...kl pengen sesuaikan ukurannya, copy aja url background pada code diatas,lalu paste di address bar, copy dulu dech ke PC, nah lihat deh ukurannya,sebenarnya sih ga ada patokan khusus utk ukurannya, terserah mo gede segimana,yg penting sesuai selera aja....hehehehehee

Komentar dari Ponco Suprayogi :

Thanks.... jadi simpel blogku....

Komentar dari G E O R G E O U Z :

thanx sob...silakan di coba...smoga blognya lebih simple....

Komentar dari david alnes :

makasih oM...kerennn,keep spirit yahh

Komentar dari Rudy Hartono :

makasih infonya sangat bermanfaat sekali, nice posting

Silakan Tulis Komentar Anda di Bawah ini :

Silahkan tulis komentar anda dibawah ini, namun diharapkan jangan melakukan spamming,hindari komentar yang mengandung unsur SARA, berkata kasar serta hal2 negatif lainnya, Terima Kasih, Semoga bermanfaat