TUTORIAL HIDE/SLIDE FOLLOWER BOX/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, follower tepi tu saya buat macam hide shoutbox with cute pix tu jer. kekeke. pakai jer kod yang hide shoutbox with cute pix tu. 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 korang cari la kat blog2 yang ada tuto pasai float shoutbox yaww .

oke,setelah penerangan yang pnjang lebar ,korang follow step ni jer ok ?

1. Dashboard ----function (a,c){switch(a){case ri:return yn;case ni:return Ep;default:return Vh+c}}gt; Design ----function (a,c){switch(a){case ri:return yn;case ni:return Ep;default:return Vh+c}}gt; Add a gadjet ------function (a,c){switch(a){case ri:return yn;case ni:return Ep;default:return Vh+c}}gt;function (a,c){switch(a){case ri:return yn;case ni:return Ep;default:return Vh+c}}gt; HTML/JavaScript

2. pilih kod salah satu yang korang nak okay ? *wink

kod untuk hide shoutbox/followerbox

function (a,c){switch(a){case ri:return yn;case ni:return Ep;default:return Vh+c}}lt;style type="text/css"function (a,c){switch(a){case ri:return yn;case ni:return Ep;default:return Vh+c}}gt;
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:400px;
width:150px;
float:left;
cursor:pointer;
background:url('URL GAMBAR ') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #666666;
background:#F5F5F5;
padding:10px;
}
function (a,c){switch(a){case ri:return yn;case ni:return Ep;default:return Vh+c}}lt;/stylefunction (a,c){switch(a){case ri:return yn;case ni:return Ep;default:return Vh+c}}gt;
function (a,c){switch(a){case ri:return yn;case ni:return Ep;default:return Vh+c}}lt;script type="text/javascript"function (a,c){switch(a){case ri:return yn;case ni:return Ep;default:return Vh+c}}gt;
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) function (a,c){switch(a){case ri:return yn;case ni:return Ep;default:return Vh+c}}gt; 10 ? 5 : 1;
var dir = xffunction (a,c){switch(a){case ri:return yn;case ni:return Ep;default:return Vh+c}}gt;x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
function (a,c){switch(a){case ri:return yn;case ni:return Ep;default:return Vh+c}}lt;/scriptfunction (a,c){switch(a){case ri:return yn;case ni:return Ep;default:return Vh+c}}gt;
function (a,c){switch(a){case ri:return yn;case ni:return Ep;default:return Vh+c}}lt;div id="gb"function (a,c){switch(a){case ri:return yn;case ni:return Ep;default:return Vh+c}}gt;
function (a,c){switch(a){case ri:return yn;case ni:return Ep;default:return Vh+c}}lt;div class="gbtab" onclick="showHideGB()"function (a,c){switch(a){case ri:return yn;case ni:return Ep;default:return Vh+c}}gt; function (a,c){switch(a){case ri:return yn;case ni:return Ep;default:return Vh+c}}lt;/divfunction (a,c){switch(a){case ri:return yn;case ni:return Ep;default:return Vh+c}}gt;
function (a,c){switch(a){case ri:return yn;case ni:return Ep;default:return Vh+c}}lt;div class="gbcontent"function (a,c){switch(a){case ri:return yn;case ni:return Ep;default:return Vh+c}}gt;

KOD SHOUTBOX/FOLLOWER BOX

function (a,c){switch(a){case ri:return yn;case ni:return Ep;default:return Vh+c}}lt;div style="text-align:right"function (a,c){switch(a){case ri:return yn;case ni:return Ep;default:return Vh+c}}gt;
function (a,c){switch(a){case ri:return yn;case ni:return Ep;default:return Vh+c}}lt;a href="javascript:showHideGB()"function (a,c){switch(a){case ri:return yn;case ni:return Ep;default:return Vh+c}}gt;
[close]
function (a,c){switch(a){case ri:return yn;case ni:return Ep;default:return Vh+c}}lt;/afunction (a,c){switch(a){case ri:return yn;case ni:return Ep;default:return Vh+c}}gt;
function (a,c){switch(a){case ri:return yn;case ni:return Ep;default:return Vh+c}}lt;/divfunction (a,c){switch(a){case ri:return yn;case ni:return Ep;default:return Vh+c}}gt;
function (a,c){switch(a){case ri:return yn;case ni:return Ep;default:return Vh+c}}lt;/divfunction (a,c){switch(a){case ri:return yn;case ni:return Ep;default:return Vh+c}}gt;
function (a,c){switch(a){case ri:return yn;case ni:return Ep;default:return Vh+c}}lt;/divfunction (a,c){switch(a){case ri:return yn;case ni:return Ep;default:return Vh+c}}gt;
function (a,c){switch(a){case ri:return yn;case ni:return Ep;default:return Vh+c}}lt;script type="text/javascript"function (a,c){switch(a){case ri:return yn;case ni:return Ep;default:return Vh+c}}gt;
var gb = document.getElementById("gb");
gb.style.right = (140-gb.offsetWidth).toString() + "px";
function (a,c){switch(a){case ri:return yn;case ni:return Ep;default:return Vh+c}}lt;/scriptfunction (a,c){switch(a){case ri:return yn;case ni:return Ep;default:return Vh+c}}gt;

*tulisan kaler pink , jarak shoutbox/followerbox korang dari atas blog korang.
*tulisan kaler biru, width dan height utk gmbr
*tulisan ijau, masukkan url gambar yg korang nak.
*tulisan kuning , korang tgok gmbar korang. kalau dia nmpak full, korangxpayah ubah. klu dia tersorok sikit korang ubah la . pepandai lah korang berdikari..hihi.
*tulisan merah . ini korang masukkan jer kod untuk shotbox kalau korang nak letak shoutbox . tapi kalau korang nak letak follower box mcm saya tu korang letakkan je lah kod shoutbox korang . xtaw cmna nak amik kod shoutbox? 000tgok sini 000
*tulisan purple , boleh ubah ke left kalau korang nak letak sebelah kiri mcm saya *wink.

KOD UNTUK SLIDE SHOUTBOX/FOLLOWER.

function (a,c){switch(a){case ri:return yn;case ni:return Ep;default:return Vh+c}}lt;style type="text/css"function (a,c){switch(a){case ri:return yn;case ni:return Ep;default:return Vh+c}}gt;
#at{
position:fixed;
right:300px;
z-index:+1000;
}
* html #at{position:relative;}
.attab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url(NAK BUBUH BACKGROUND URL BOLEH DISINI );
}
.atcontent{
float:left;
border:2px solid #CA226B;
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;
}
function (a,c){switch(a){case ri:return yn;case ni:return Ep;default:return Vh+c}}lt;/stylefunction (a,c){switch(a){case ri:return yn;case ni:return Ep;default:return Vh+c}}gt;
function (a,c){switch(a){case ri:return yn;case ni:return Ep;default:return Vh+c}}lt;script type="text/javascript"function (a,c){switch(a){case ri:return yn;case ni:return Ep;default:return Vh+c}}gt;
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) function (a,c){switch(a){case ri:return yn;case ni:return Ep;default:return Vh+c}}gt; 25 ? 35 : 1;
var dir = xffunction (a,c){switch(a){case ri:return yn;case ni:return Ep;default:return Vh+c}}gt;x0 ? 1 : -1;
var x = x0 + dx * dir;
at.style.top = x.toString() + "px";
if(x0!=xf){setTimeout("moveAT("+x+", "+xf+")", 10);}
}
function (a,c){switch(a){case ri:return yn;case ni:return Ep;default:return Vh+c}}lt;/scriptfunction (a,c){switch(a){case ri:return yn;case ni:return Ep;default:return Vh+c}}gt;
function (a,c){switch(a){case ri:return yn;case ni:return Ep;default:return Vh+c}}lt;div id="at"function (a,c){switch(a){case ri:return yn;case ni:return Ep;default:return Vh+c}}gt;
function (a,c){switch(a){case ri:return yn;case ni:return Ep;default:return Vh+c}}lt;div class="attab" onclick="showHideAT()"function (a,c){switch(a){case ri:return yn;case ni:return Ep;default:return Vh+c}}gt; function (a,c){switch(a){case ri:return yn;case ni:return Ep;default:return Vh+c}}lt;/divfunction (a,c){switch(a){case ri:return yn;case ni:return Ep;default:return Vh+c}}gt;
function (a,c){switch(a){case ri:return yn;case ni:return Ep;default:return Vh+c}}lt;div class="atcontent"function (a,c){switch(a){case ri:return yn;case ni:return Ep;default:return Vh+c}}gt;
function (a,c){switch(a){case ri:return yn;case ni:return Ep;default:return Vh+c}}lt;div align="center"function (a,c){switch(a){case ri:return yn;case ni:return Ep;default:return Vh+c}}gt;
function (a,c){switch(a){case ri:return yn;case ni:return Ep;default:return Vh+c}}lt;div style="background:url()#000000 no-repeat;"function (a,c){switch(a){case ri:return yn;case ni:return Ep;default:return Vh+c}}gt;
function (a,c){switch(a){case ri:return yn;case ni:return Ep;default:return Vh+c}}lt;div style="text-align: center;"function (a,c){switch(a){case ri:return yn;case ni:return Ep;default:return Vh+c}}gt;
CODE SHOUTBOX/FOLLOWERBOX KORANG
function (a,c){switch(a){case ri:return yn;case ni:return Ep;default:return Vh+c}}lt;div align="right"function (a,c){switch(a){case ri:return yn;case ni:return Ep;default:return Vh+c}}gt;function (a,c){switch(a){case ri:return yn;case ni:return Ep;default:return Vh+c}}lt;a href="javascript:void(0);" onclick="showHideAT()"function (a,c){switch(a){case ri:return yn;case ni:return Ep;default:return Vh+c}}gt;CLOSEfunction (a,c){switch(a){case ri:return yn;case ni:return Ep;default:return Vh+c}}lt;/afunction (a,c){switch(a){case ri:return yn;case ni:return Ep;default:return Vh+c}}gt;function (a,c){switch(a){case ri:return yn;case ni:return Ep;default:return Vh+c}}lt;/divfunction (a,c){switch(a){case ri:return yn;case ni:return Ep;default:return Vh+c}}gt;
function (a,c){switch(a){case ri:return yn;case ni:return Ep;default:return Vh+c}}lt;br /function (a,c){switch(a){case ri:return yn;case ni:return Ep;default:return Vh+c}}gt;function (a,c){switch(a){case ri:return yn;case ni:return Ep;default:return Vh+c}}lt;div align="left" float: right;function (a,c){switch(a){case ri:return yn;case ni:return Ep;default:return Vh+c}}gt;function (a,c){switch(a){case ri:return yn;case ni:return Ep;default:return Vh+c}}lt;a href="URL BLOG KORANG/"function (a,c){switch(a){case ri:return yn;case ni:return Ep;default:return Vh+c}}gt;by NAMA KORANGfunction (a,c){switch(a){case ri:return yn;case ni:return Ep;default:return Vh+c}}lt;/afunction (a,c){switch(a){case ri:return yn;case ni:return Ep;default:return Vh+c}}gt;function (a,c){switch(a){case ri:return yn;case ni:return Ep;default:return Vh+c}}lt;div style="color: #FFFFFF;"function (a,c){switch(a){case ri:return yn;case ni:return Ep;default:return Vh+c}}gt;
function (a,c){switch(a){case ri:return yn;case ni:return Ep;default:return Vh+c}}lt;span function (a,c){switch(a){case ri:return yn;case ni:return Ep;default:return Vh+c}}gt;function (a,c){switch(a){case ri:return yn;case ni:return Ep;default:return Vh+c}}lt;/spanfunction (a,c){switch(a){case ri:return yn;case ni:return Ep;default:return Vh+c}}gt;function (a,c){switch(a){case ri:return yn;case ni:return Ep;default:return Vh+c}}lt;/divfunction (a,c){switch(a){case ri:return yn;case ni:return Ep;default:return Vh+c}}gt;function (a,c){switch(a){case ri:return yn;case ni:return Ep;default:return Vh+c}}lt;/divfunction (a,c){switch(a){case ri:return yn;case ni:return Ep;default:return Vh+c}}gt;
function (a,c){switch(a){case ri:return yn;case ni:return Ep;default:return Vh+c}}lt;/divfunction (a,c){switch(a){case ri:return yn;case ni:return Ep;default:return Vh+c}}gt;function (a,c){switch(a){case ri:return yn;case ni:return Ep;default:return Vh+c}}lt;/divfunction (a,c){switch(a){case ri:return yn;case ni:return Ep;default:return Vh+c}}gt;
function (a,c){switch(a){case ri:return yn;case ni:return Ep;default:return Vh+c}}lt;script type="text/javascript"function (a,c){switch(a){case ri:return yn;case ni:return Ep;default:return Vh+c}}gt;
var at = document.getElementById("at");
at.style.top = (-200-at.offsetWidth).toString() + "px";
function (a,c){switch(a){case ri:return yn;case ni:return Ep;default:return Vh+c}}lt;/scriptfunction (a,c){switch(a){case ri:return yn;case ni:return Ep;default:return Vh+c}}gt;
function (a,c){switch(a){case ri:return yn;case ni:return Ep;default:return Vh+c}}lt;style type='text/css'function (a,c){switch(a){case ri:return yn;case ni:return Ep;default:return Vh+c}}gt;
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; }
function (a,c){switch(a){case ri:return yn;case ni:return Ep;default:return Vh+c}}lt;/stylefunction (a,c){switch(a){case ri:return yn;case ni:return Ep;default:return Vh+c}}gt;
function (a,c){switch(a){case ri:return yn;case ni:return Ep;default:return Vh+c}}lt;div style='display:scroll; position:fixed; top:150px; right:5px;'function (a,c){switch(a){case ri:return yn;case ni:return Ep;default:return Vh+c}}gt;
function (a,c){switch(a){case ri:return yn;case ni:return Ep;default:return Vh+c}}lt;a href="javascript:void(0);"onclick="showHideAT()"/function (a,c){switch(a){case ri:return yn;case ni:return Ep;default:return Vh+c}}gt;function (a,c){switch(a){case ri:return yn;case ni:return Ep;default:return Vh+c}}lt;img src="URL GAMBAR" alt="PUSH" title="JERIT SINI" /function (a,c){switch(a){case ri:return yn;case ni:return Ep;default:return Vh+c}}gt;function (a,c){switch(a){case ri:return yn;case ni:return Ep;default:return Vh+c}}lt;/afunction (a,c){switch(a){case ri:return yn;case ni:return Ep;default:return Vh+c}}gt;
function (a,c){switch(a){case ri:return yn;case ni:return Ep;default:return Vh+c}}lt;/divfunction (a,c){switch(a){case ri:return yn;case ni:return Ep;default:return Vh+c}}gt;

*tulisan kaler pink , korang boleh ubah nilai dia . fyi, itu adalah jarak slide korang keluar dari bhg tepi sebelah kanan.klau korang nak slide tu muncul kat tengah,ubah bg jadi 500.
*(NAK BUBUH BACKGROUND URL BOLEH DISINI ), okay, kalau korang nak letak background pun boleh, klu xnak korang tinggalkan camtu. sebab aku pun tggal kan jer cmtu.hihih.
* tulisan biru , top tu adalah untuk bg slide korang tu muncul dr atas,kalau korng xnak dia muncul bhg atas mcm aku tu, korang boleh tukar ke bottom (untuk bg dia muncul dr bwh), left (muncul sebelah kiri) , right (muncul sebelah kanan)
* tulisan merah, masukkan kod shoutbox/follower box korang . tapi aku nak nasihatkan sikit ni. kalau korang punya shoutbox dah slide.korang better guna yg hide utk follower box sbb klu dua2 nk slide dia xjd kot. aku dh biasa try.tp klu korg buat jd ,go on jer ok. 000 klik sini utk tgok cara nk ambil kod utk follower box000
* Url blog korang, & nama korang tu ubah ler letak url n nama korang .
*tulisan kaler kuning tu korang boleh ubah,

LOVE ; ♥ misluvcoklat ♥