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 ♥
TUTORIAL | Meletakkan button Fb , Twitter dan Blog (home) pada blog
