TUTORIAL HIDE/SLIDE FOLLOWERBOX/SHOUTBOX.

kerh kerh kerh . assalamualaikum , yaww ~ nak share tuto lagi . tadi terjumpak dekat formspring ada org request . kerh kerh kerh . sat nak tanya, follower box sy tu flying ker ? hehehe. ekceli dia xflying,cuma kekadang time bukak blog saya ni dia ada kesalahan teknikal sikit kot menyebabkan follower tab tu terbang ke tengah . pastu dia p balik kat tempat dia kot. hehehe.

sebenaqnyer kan, followerbox tepi tu saya guna kod hide shoutbox with cute pix tu jer. kekeke. ekceli korang boleh jugak kalau nak buat style slide punyerr . style slide tu yang macam shoutbox saya . so, korang pilih lah yer nak yang jenis hide atau slide untuk follower box/shoutmix korang . eh,kalau korang nak bagi float pon boleh, korang cari lah kod untuk float tu,saya juz bagi kod yang slide dengan hide jer sbb kod tu sedia ada kt blog saya . kod untuk float punyer style, korang cari la sendiri kat blog2 yang ada tuto pasai float shoutbox yaww .

oke,jom kita buat .follow this step oke :)

1. dashboard ----D Design -----D Add a gadjet -----D html/javaScript

2. korang pilih jea nak style mana,lepas tu kopi jer kod tu dan pastekan dlm content tu yaww .*wink

HIDE WITH CUTE PIC STYLE

<style type="text/css">

#gb{

position:fixed;

 top:50px;

z-index:+1000;

}

* html #gb{position:relative;}

.gbtab{

height:150px;

width:150px;

float:right;

cursor:pointer;

background:url('URL GAMBAR CUTE') 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, 150-w) : moveGB(170-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/FOLLOWER BOX ANDA.

<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 = (140-gb.offsetWidth).toString() + "px";

</script>

* top:50px; ini adalah kedudukan gmbar cute korang tu daripada atas blog korang tu , adjust value tu kalau nak dia kebawah/keatas.

* tulisan biru adalah height and width gambar cute yang korang .

* tulisan kuning tu masukkan url gmbar cute yang korang nak .

*tulisan biru lembut tu korang hanya perlu adjust jika gambar cute korang tu dia tersorok,klu xtersorok,xpayah ler ubah okay :)

*right tu korang boleh ubah ke left kalau korang nak letak sebelah kiri macam i punya follower box tu.

*tulisan merah tu korang masukkan jelah kod follower box kalau korang nak buat hide follower box, dan kalau nak buat hide shoutbox masukkan je lah kod shoutbox korang ok ? :) kalau xtaw cara nak amik followerbox boleh klik sini .

--------------------------------------------------------------------------------------------------------

SLIDE STYLE

<style type="text/css">
#at{
position:fixed;
right:500px;z-index:+1000;
}
* html #at{position:relative;}
.attab{
height:30px;
width:10px;
float:right;
cursor:pointer;
background:url(NAK BUBUH BACKGROUND URL BOLEH DISINI );
}
.atcontent{
float:left;
border:2px solid #B404AE;
background:url() #000000 repeat bottom center scroll ;
-moz-border-radius-topleft:15px;
-moz-border-radius-topright:15px;
-moz-border-radius-bottomleft:15px;
-moz-border-radius-bottomright:15px;
padding:5px;
}
</style>
<script type="text/javascript">
function showHideAT(){
var at = document.getElementById("at");
var w = at.offsetWidth;
at.opened ? moveAT(0, -200-w) : moveAT(20-w, 0);
at.opened = !at.opened;
}
function moveAT(x0, xf){
var at = document.getElementById("at");
var dx = Math.abs(x0-xf) > 25 ? 35 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
at.style.top = x.toString() + "px";
if(x0!=xf){setTimeout("moveAT("+x+", "+xf+")", 10);}
}
</script>
<div id="at">
<div class="attab" onclick="showHideAT()"> </div>
<div class="atcontent">
<div align="center">
<div style="background:url()#000000 no-repeat;">
<div style="text-align: center;">
KOD SHOUTBOX/FOLLOWER BOX KORANG
<div align="right"><a href="javascript:void(0);" onclick="showHideAT()">CLOSE</a></div>
<br /><div align="left" float: right;><a href="http://URL BLOG KORANG.blogspot.com/">byNAMA KORANG</a><div style="color: #FFFFFF;">
<span ></span></div></div>
</div></div>
<script type="text/javascript">
var at = document.getElementById("at");
at.style.top = (-200-at.offsetWidth).toString() + "px";
</script>
<style type='text/css'>
a.linkopacity img {
filter:alpha(opacity=50);
-moz-opacity: 0.5;F
opacity: 0.5;
-khtml-opacity: 0.5;}
a.linkopacity:hover img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
-khtml-opacity: 1.0; }
</style>
<div style='display:scroll; position:fixed; top:50px; right:5px;'>
<a href="javascript:void(0);"onclick="showHideAT()"/><img src="URL GAMBAR CUTE" alt="PUSH" title="Jerit Sini yaw ;D" /></a>
</div></div></div></div>

*right:500px; kod ini adalh jarak slide korang akan muncul dari sisi kanan.korang boleh ubah.sudah tentu :)

*top, ini pun korang boleh ubah , kod top tu adalah untuk bg slide korang tu muncul dr atas , korang boleh ubah dengan perkataan bottom/left/right.

* top:50px; right:5px; kod ini adalah untuk kedudukan gambar (mcm gmbar jerit sini aku tu). korang boleh ubah okay . dan klu nak letak sebelah kiri,ubah jea right tu ke left ok.

* tulisan kuning tu masukkan je url gmbr yg korang nak (mcm gmbar jerit sini aku tu)

*tulisan merah tu korang masukkan jelah kod follower box kalau korang nak buat slide follower box, dan kalau nak buat slide shoutbox masukkan je lah kod shoutbox korang ok ? :) kalau xtaw cara nak amik followerbox boleh klik sini .

*tulisan biru tu aku xbuat apa2,bia kan je..huhu..

4. SAVEEE !  dan KLIK SINI PLEASE:)

kalau xpaham tanya ok..selamat mencubaaa ..*wink

LOVE ; ♥ misluvcoklat ♥