Wednesday 29 May 2013

Cara Tambah Shout Box Kat Blog

As-Salam,


Hari ini nak buat tuto untuk tambah shoutbox kat blog. Penting untuk blogger baru macam saya ni. Al-maklumlah traffic tak berapa nak ada..huhuhu...check it out...

1. Daftar masuk blog masing-masing

2. Klik dashboard > Design > Layout > Add gadget > Copy paste code dibawah kat HTML/JavaScript > Save

Copy code ini

<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://img97.imageshack.us/img97/6060/ungucair.png') no-repeat;




}

.gbcontent{

float:left;

border:2px solid #A5BD51;

background:#B89AFE;

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">




Copy code yang anda dah daftar kat shout box kat line ini




<div style="text-align:right">

<a href=" http://deadollixious.blogspot.com/2012/10/tutorial-hidden-shoutbox.html "><font size="2"">click to get this widget</font></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 Penting : 
* Tulisan warna merah untuk warna Shout Box. Kalau nak ungu, boleh je terus guna yang ada tu.
* Tulisan warna biru untuk latar belakang Shout Box. Saya pilih ungu je. Kalau nak tukar kat sini.
* Tulisan warna hijau untuk link Shout korang sendiri. Kena daftar dulu kat sini untuk dapatkan code.

Pilihan warna Shout Box yang lain


http://img846.imageshack.us/img846/6586/tnavy.png





http://img267.imageshack.us/img267/5049/tmerah.png





http://img560.imageshack.us/img560/7910/tkuningo.png





http://img829.imageshack.us/img829/127/pinkcair.png





http://img710.imageshack.us/img710/7861/pinkkg.png





http://img36.imageshack.us/img36/3569/orenx.png





http://img84.imageshack.us/img84/6496/hijau.png





http://img97.imageshack.us/img97/6060/ungucair.png


Dah pilih dan gantikan dengan warna dan link shout box korang, save. Selamat mencuba!

No comments:

Post a Comment