Cara Membuat Shout Box Disisi Kanan

Posted by mije Rabu, 12 Mei 2010 0 komentar
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.
Adsense Content. bottom of article

0 komentar:

Posting Komentar