Home » , , » Cara Membuat Shout Box Disisi Kanan

Cara Membuat Shout Box Disisi Kanan

Thursday, May 13, 2010

Salam, kepada newbie2 diluar sana yang masih belum tahu untuk membuat shout box disisi seperti yang anda lihat di blog mijie.Ikuti langkah2 dibawah nye. Walaupun dah ramai yang telah membuat nya tapi ada sesetengah yang masih belum tau kn, So, apa salah kongsi2.

Langkah 1

Log in blog => Dashboard => Layout => Add A Gadget. Seterusnya klik pada HTML/Javascript.


Langkah 2
Salin kod biru di bawah dan paste pada notepad. Gantikan teks Masukkan Kod Shout Box Anda Disini dengan kod Shout box anda.

<style type="text/css">
#gb{
position:fixed;
top:120px;
z-index:+1000;
}

* html #gb{position:relative;}


.gbtab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('http://i1039.photobucket.com/albums/a472/mijie88/Fail%20Blogspot/tabs.gif') 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">
Masukkan Kod Shout Box Anda Disini
<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>



Langkah 3 :
Salin kod yang telah siap di edit pada notepad tadi (rujuk langkah 2) dan paste pada Content HTML/Javascript (rujuk langkah 1).

Akhir sekali klik Preview dan jika ok dengan hasilnya, klik saja Save.
Semoga Berjaya...:)

* yang nie http://i1039.photobucket.com/albums/a472/mijie88/Fail%20Blogspot/tabs.gif boleh tukar jika mahu.

*Tutorial ini khas ditujukan kepada Fasya.

12 dah komen:

Seri Bahasa 5/13/2010 1:07 AM  

masalahnya dengan s/box sisi kanan/kiri ni kadang banyak keluar pop-up

Mijie 5/13/2010 1:23 AM  

owhh..kuar popup cm ner 2??..citer sikit..:)

Fasya Abdy 5/13/2010 1:11 PM  

mijie...da buat..huhuhu....tp kn yg mijie kate ley tuka kat photobucket tu nk tuka ape dye

tunbegia 5/13/2010 2:02 PM  

kat ofis haku kena blok shoutbox tuh, kehh

salamm,

Mijie 5/13/2010 2:04 PM  

tkar icon "SEMBANG" 2..klu fasya bt icon sendiri xpe..upload dlm photobucket, pstu tkar dgn yg mijie kate 2..

Mijie 5/13/2010 2:10 PM  

tunbegia :: bese ar 2..nie msti opis government kn..mn blh chat tgh keje..hehe

Aidi-Safuan 5/13/2010 10:48 PM  

bro, ini untuk yang bole keluar masok tuh kan?

Mijie 5/13/2010 10:58 PM  

a'ah..yg blh kuar msuk 2..try ar buat..heheh

Farazila 5/14/2010 11:55 AM  

tenkiu2...mmg nk tnye mijie mcm ne nk buat...aish mijie nie taw2 je farazila nk bt mcm tu gak...:)

Mijie 5/15/2010 1:55 AM  

Farazila :: a'ah..dh agak dh..heheh..mijie dpt aserkan yg Farazila nk..hihihi

queenIzyan 11/13/2010 3:45 PM  

salam...
dah dpt buat n tukar gmbr kat tepi tu... tp gmbr tu mcm msk ke dlm sgt la... mcm nak betulkan ek..??

manmala 6/18/2011 11:39 AM  

salam alaika...

saya baru nk belajar2 nak wat blog. kira newbie lah.hehehe....
kenapa kt blog saya xde pun HTML/Javascippt...
tolong ye solve mslh aku ni...

Post a Comment

Sila Tinggalkan komen korang kat sini yer..
InsyaAllah setiap komen dari korang aku akan blas..:)

DeSiGn By MiJiE BloG @ 2011. Powered by Blogger.