// Strawberry Cupcake


Hello World! Im Sunshine and im 100 years young from Saturn. Replace this nonsense intro (Y)


► My Biography
► My Stuff
► My Friends
► My Diary



Put your Cbox here. Make sure the correct measure of the width of your Cbox.


Template & Skin by : Husnaa.
Big help from : Wani | WHI | C4U | Una


Older Post | Newer Post
Tutorial : Hide Shoutbox Di Sisi Kanan
Thursday, 2 February 2012 | 06:40 | 0 Sweet Cupcake

Bukan Sya punya gambar !

Antara sebab kenapa disembunyikan shoutbox ini adalah untuk menampakkan page yang lebih kemas dan mungkin juga untuk tampil unik berbanding blog-blog lain.


Okeyh ! Sya nk ajar tutorial sembunyikan shoutbox seperti di bawah

1. Login akaun blogger anda, dari dashboard > design > page element > add a gadget > HTML/javascript.

2. Copy dan paste kod berikut ke ruangan html/javascript

<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://2.bp.blogspot.com/-hp5hb7Z7Gvk/TmzEhhJZRmI/AAAAAAAAGgo/vmECDANflYw/s320/shoutbox.png') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #666666;
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">

KOD SHOUTBOX DISINI

<div style="text-align:right"><a href="http://tutorialuntukblog.blogspot.com/2011/09/tutorial-sembunyikan-shoutbox-blog.html" target="_blank"><small>tutorial here</small></a>
<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>



Nota: Gantikan "KOD SHOUTBOX DISINI" dengan kod shoutbox anda.
(tiada shoutbox.?)


3. Save dan lihat hasilnya.:)

TAMBAHAN.

Secara default, tab shoutbox adalah berwarna hijau, anda boleh menukar mengikut warna yang anda mahu dengan gantikan url yang anda mahu.
Cara Sembunyikan Shoutbox Dalam Blog

.gbtab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('http://2.bp.blogspot.com/-hp5hb7Z7Gvk/TmzEhhJZRmI/AAAAAAAAGgo/vmECDANflYw/s320/shoutbox.png') no-repeat;
}


Anda copy sahaja mana² url dari tab di bawah ini.
(tidak tahu cara dapatkan url gambar.?)


Cara Sembunyikan Shoutbox Dalam BlogCara Sembunyikan Shoutbox Dalam BlogCara Sembunyikan Shoutbox Dalam BlogCara Sembunyikan Shoutbox Dalam BlogCara Sembunyikan Shoutbox Dalam BlogCara Sembunyikan Shoutbox Dalam BlogCara Sembunyikan Shoutbox Dalam BlogCara Sembunyikan Shoutbox Dalam BlogCara Sembunyikan Shoutbox Dalam BlogCara Sembunyikan Shoutbox Dalam BlogCara Sembunyikan Shoutbox Dalam Blog