Wednesday, December 14, 2011

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 ♥

1 000 ucap syg pada Cik Iza:

dalamcantik.com said...

mai la join affiliate kita quairra dot com, tq

Related Posts Plugin for WordPress, Blogger...

_Jgn Lupe Klik!_

!♥2010, kini dan Selamanya! Hak Milik Cik Chomeieyza♥!