Salam semua!!
skrg ialah segmen "teacher Lina"
ok harinie teacher nk tunjuk cra nk sorokkan shoutbox korang..

***TUTORIAL SOROKKAN SHOUTBOX***




Hari nie nak buat tutorial sorokkan shoutbox kat bahagian tepi blog korang tu supaya dapat jimat ruang blog..hehehe. Shoutbox pun dah pandai main sorok-sorok tau. hehehe. Bila korang tekan gambar shoutbox tu baru dia muncul..

okey...

1. Log in tu Blogger..kalau tak macam mana nak sorok cik shoutbox tu kan..

2. Go to DESIGN > ADD A GADGET > HTML/JAVASCRIPT

3. tajuk biarkan kosong ya kawan-kawan

4. Copy code di bawah dan paste kat ruangan kosong tu..


<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:180px;
width:71px;
float:left;
cursor:pointer;
background:url('URL GAMBAR SHOUTBOX') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #ffffff;
background:#ffffff;
padding:10px;
}
</style>
<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 41-w) : moveGB(41-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">
KOD SHOUTBOX / CBOX KORANG DISINI
<div style="text-align:right">
<a href="javascript:showHideGB()">
[close/tutup]
</a>
</div>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (41-gb.offsetWidth).toString() + "px";
</script>

* ayat warna BIRU - URL gambar shoutbox tu maknanya gambar kat tepi shoutbox tu. URL korang boleh ambil kat bawah. Mira design khas untuk korang. Sorry la kalau tak segempak mana..

* ayat warna MERAH - letak code shoutbox korang kat situ.

* ayat warna HIJAU - korang boleh tukar height dengan width mengikut height n width gambar shoutbox korang. Kalau tak, nanti gambar macam kena potong

GAMBAR SHOUTBOX: Ambil la...jangan malu jangan segan. Mira buat khas untuk korang


http://i301.photobucket.com/albums/nn46/cuttysakura93/domo.png

Height - 145px
Width - 71px

http://i301.photobucket.com/albums/nn46/cuttysakura93/Untitled-2-1.png

Height - 182px
width - 49px

http://i301.photobucket.com/albums/nn46/cuttysakura93/vector2.png
Height - 191px
width - 85px



http://3.bp.blogspot.com/-z_YeVNMxpks/TfsPzBE1yuI/AAAAAAAAG6U/tHFw5QmKobU/s1600/Angry%2Bbird%2Bshoutbox%2B1.png


http://1.bp.blogspot.com/-3R1znh2obQw/TfsP_JFTsvI/AAAAAAAAG6c/qiEhyQzX9PM/s1600/Angry%2Bbird%2Bshoutbox%2B2.png



http://3.bp.blogspot.com/-XJO6Rp2ruS8/TfsQPDehRQI/AAAAAAAAG6k/DabOiAlNxj0/s1600/Angry%2Bbird%2Bshoutbox%2B3.png




http://4.bp.blogspot.com/-06aTwPtX0vM/TfsQb7i7NSI/AAAAAAAAG6s/bKfwNJOeCog/s1600/Angry%2Bbird%2Bshoutbox%2B4.png


ok teacher harap korang faham..

untuk tutorial nie 





kalau korang nak copy..
korang birukan bahagian yg nak
pastu tkan CTRL + C
pastu paste la kt blog korang







Oh man! Cepat komen ^_^

1 orang Baik hati:

icyme said...
This comment has been removed by the author.