TUTORIAL | Menyorokkan Shoutbox di Blog [ Slide ]

Bila Tangan dah Gatal nak hapddett...

Oke. hari ini iza nak ajar korang macam mana nak menyorokkan shoutbox di blog. Korang tahu tak shoutbox tuh ape ? Shoutbox tuh kotak menjerit ! Shout = menjerit dan box = kotak ! haha ! gurau je . Penggunaan Shoutbox ini penting untuk sesetengah blogger baru or tak kira la siapa pon blogger tuh .  Tujuannya adalah untuk memudahkan pengunjung yang datang ke blog dan tinggalkan link blog diaorang untuk korang atau untuk blogger - blogger lain singgah ke blog diaorang . Faham ? Nak contoh ? Sila tekan SINI dulu . Oke, terima kasih . Sekarang baru boleh tengok ! hihii ^.^

Contoh shoutbox ! maaf kalau kurang cantik ! 

(law korang kata tak cantik pon ade aku kesah ?! haha )

Ayat diatas sekadar gurauan. Lets go straight n dont belok - belok to the tutorial.


STEPS :

1)  Login Akaun blog korang. Sila register Akaun Shoutbox . Klik SINI untuk register.
2) Dashboard <> Design <> Page Element <> Add a Gagdet <>HTML / Javascript.
3) Copy code dan paste code di bawah di ruangan HTML / Javascript.


** Shoutbox ni korang boleh pilih sama ada nak belah kanan ataupun kiri . 

SHOUTBOX DI KANAN BLOG

<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('Url Gambar ') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #666666;
background:#F5F5F5;
padding:10px;
}
</style><br />
<br />
<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><br />
<div id="gb"><div class="gbtab" onclick="showHideGB()"></div><div class="gbcontent"><br />
MASUKKAN CODE SHOUTBOX KORANG KAT SINI<br />
<br />
<div style="text-align: right;"><a href="

http://chomeieyza.blogspot.com/2011/12/tutorial-menyorokkan-shoutbox-di-blog.html

" target="blank">get this widget here </a><a href="javascript:showHideGB()">[close]</a><br />
<div style="text-align: right;"><div style="text-align: right;"><a href="javascript:showHideGB()"> </a><br />
<a href="javascript:showHideGB()"> </a></div></div></div></div><script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script></div>

SHOUTBOX DI SEBELAH KIRI BLOG 

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

.gbtab{
height:100px;
width:30px;
float:right;
cursor:pointer;
background:url('Url Gambar') no-repeat;
}
.gbcontent{
float:right;
border:2px solid #666666;
background:#F5F5F5;
padding:10px;
}
</style><br />
<br />
<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.left = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script><br />
<div id="gb"><div class="gbtab" onclick="showHideGB()"></div><div class="gbcontent"><br />
MASUKKAN CODE SHOUTBOX KORANG DEKAT SINI<br />
   <br />
<div style="text-align: right;"><a href="

http://chomeieyza.blogspot.com/2011/12/tutorial-menyorokkan-shoutbox-di-blog.html

" target="blank">get this widget here </a><a href="javascript:showHideGB()">[close]</a><br />
<div style="text-align: right;"><div style="text-align: right;"><a href="javascript:showHideGB()"> </a><br />
<a href="javascript:showHideGB()"> </a></div></div></div></div><script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.left = (30-gb.offsetWidth).toString() + "px";
</script></div>

ABC : Gantikan dengan code HTML shoutbox korang .
ABC : Jarak Shoutbox daripada dinding atas blog. Kalau nak jauh tambahkan angka tersebut dan sebaliknya.
ABC : Bentuk Tab Open kotak shoutbox . Tak tahu mana nak cari ? pergi SINI .
ABC : Background shoutbox. Klik SINI
ABC : Border Shoutbox boleh pilih sama ada nak Dashed / Dotted / Solid
ABC : Warna Border Shoutbox .
ABC : Ketebalan border shoutbox. Lagi bertambah nombor maka akan jadi lebih tebal.

✿Kalau korang nak saiz shoutbox macam iza, pastikan korang adjust dahulu saiz pada Shoutbox korang sebelum copy dan paste dalam ruangan HTML / Javascript.

 - Height : 400

-Width : 200

**Kalau tak nak saiz macam iza, pandai - pandailah korang adjust sendiri.


 4) Preview dan SAVE !

**Maaf tutorial nih agak leceh sikit. hihi. Law ada apa-apa masalah bagitahu iza ye. Komen dan InsyAllah iza akan bantu .

Sebagai tanda terima kasih klik SINI dan  tolong klik Churpchurp iza ye . HEHE. 

Terima Kasih. ^.^

---

♥ Menarik? Like dan tinggalkan komen oke! tq ♥

---