Tutorial Shoutbox Terapung di Blogskin



Hey hey there!! rindu Diya tak??sengihsengihsengih over gile -_- oklah harini Diya nak share ngan korang sikit cara nak buat shoutbox korang terapung di udara atas blog korang.dulu shoutbox style ni jadi fenomena tapi sepi seketika..but now kembali lagi dengan codes yang telah di-upgradekan...macam best kan? Jom try
macam ni :)


1.Pergi >> Template

2.Then serentak click ctrl + F dan search kod </head>

3.Then copy dan pastekan kod yang panjang lebar ni kat bawah kod  </head>

<div style='display:scroll; position:fixed; top:10px; right:10px;'></a><br /><a href="javascript:void(0);"onclick="showHideAT()"/><img class= width="140" height="140"src="http://3.bp.blogspot.com/-FK_3d8apTQ4/TeELH6ag7AI/AAAAAAAAGhA/T0ddlWdbsik/s1600/icon%2Bshout.png" alt="Shoutbox" title="Shoutbox" /></a>
</div>
<style type="text/css">#at{position:fixed;

top:0;;}* html #at{position:relative;}.attab{height:100px;width:30px;float:left;cursor:pointer;background:url();}

.atcontent{float:right;
background:url(http://1.bp.blogspot.com/-gBB6EsDRUsw/TeD7q32XuXI/AAAAAAAAGgw/aOSqFcJnwwQ/s1600/kak%2Byana%2Bshout%2Bframe%2Bcopy.png) no-repeat 0 0 transparent;width:800px;height:460px;center scroll ;

padding:56px 0 20px 5px;}</style><script type="text/javascript">function showHideAT(){var at = document.getElementById("at");var w = at.offsetWidth;at.opened ? moveAT(0, -200-w) : moveAT(20-w, 0);at.opened = !at.opened;}function moveAT(x0, xf){var at = document.getElementById("at");var dx = Math.abs(x0-xf) > 25 ? 35 : 1;var dir = xf>x0 ? 1 : -1;var x = x0 + dx * dir;at.style.top = x.toString() + "px";if(x0!=xf){setTimeout("moveAT("+x+", "+xf+")", 10);}}</script><div id="at"><div class="attab" onclick="showHideAT()"> </div><div class="atcontent"><div align="center"><div style="background:url() no-repeat;">


<br /><br /><br /><br /><br /><br />

Masukkan Shoutbox korang dengan lebar 270 dan tinggi 280

<center><div id="author"><a href="javascript:void(0);" onclick="showHideAT()"><input type="button" value="Close" class="close" /></a></div></center></div></div><script type="text/javascript">var at = document.getElementById("at");at.style.top = (-200-at.offsetWidth).toString() + "px";</script></div></div>
HINT
merah : gantikan dengan kod icon korang
purple: gantikan dengan background shoutbox korang
hijau: masukkan kod shoutbox korang..boleh intai² shoutbox kat sini

Oleh disebabkan Diya dah lamee gilee tak bagi freebies kat korang,,nah ambiklah..
Doodle asal : Syafiq
Shoutbox Background : Sis Bihya
Basecode: Wan Hazel


http://i777.photobucket.com/albums/yy57/bunnymeloney/c60.png

http://i777.photobucket.com/albums/yy57/bunnymeloney/c61.png

http://i777.photobucket.com/albums/yy57/bunnymeloney/c62.png

http://i777.photobucket.com/albums/yy57/bunnymeloney/c63.png

http://i777.photobucket.com/albums/yy57/bunnymeloney/c64.png

http://i777.photobucket.com/albums/yy57/bunnymeloney/c65.png

http://i777.photobucket.com/albums/yy57/bunnymeloney/c66.png


http://2.bp.blogspot.com/-nRlRTymuzIg/TpGl1GswGgI/AAAAAAAAB7k/IhVjNl-wxJw/s1600/cb4.png


http://i356.photobucket.com/albums/oo3/babyemo1413/bihasart2.png

http://i356.photobucket.com/albums/oo3/babyemo1413/bihasart4-1.png

http://i356.photobucket.com/albums/oo3/babyemo1413/bihasart3.png

http://i356.photobucket.com/albums/oo3/babyemo1413/bihasart4.png

http://i356.photobucket.com/albums/oo3/babyemo1413/shoutboxbyha2.png


-kalau nak ambil pape,komen dulu k-

75 comments:

  1. terhai diya.. minta izin tok amik freebies nie ye :) terima kasih :)

    ReplyDelete
  2. diya,ajar la buat exchange link mcm diya tu.sy dah buat.tapi tak menjadi.pleaseeeee.buat kan tuto eh?gonna come here again soon :)

    ReplyDelete
  3. diya,ajar la buat exchange link mcm diya tu.sy dah buat.tak jadi pon.diya buat tuto boleh tak?pleseeeeeeee :(

    ReplyDelete
  4. Salam. Kak, saya meminta izin nak amik ;)
    Thanks.

    ReplyDelete
  5. Saya ambik satu ya :D Thanks :*

    ReplyDelete
  6. at mana nk paste code cbox ? apasal tk jaadi ? :'(

    ReplyDelete
  7. ambik satu kaler hijau . thanks ! comelll :)

    ReplyDelete
  8. Nape sye wat bende niy .. Tak pernah jadi ! Hanya sesetengah jerk , yg boley .. Harap kak diya give tuto niy dengan detail !

    ReplyDelete
  9. Kenapa cbox tu tak masuk dalam background tu ? kenapa kat luar ?

    ReplyDelete
  10. if kte new dashboard macam mana nak buat?reply liyanaalfa97@gmail.com

    ReplyDelete
  11. okay , ambik freebiesyang ade , thanks akak :) kalau sudi follow sekali , hehehehe

    ReplyDelete
  12. Nak ambik satu contoh nie yer ! (=

    ReplyDelete
  13. Nak ambik satu contoh nie yer ! (=

    ReplyDelete
  14. Assalamualaikum.. Thanks for the tuto.. ambik satu :)

    ReplyDelete
  15. Kak Diya comell , saya amik freebies nie erh . Mekaseyh .

    ReplyDelete
  16. mai la join affiliate kita quairra dot com, tq

    ReplyDelete
  17. Saya ambil satu . Tapi kan kak kenapa cbox tu tak masuk dalam background ? Macam mana nk buat eh kak ?

    ReplyDelete
  18. sy ambil satu . thanks for tutorial akak :)

    ReplyDelete
  19. saye amik satu tau..thnkz sudi mengajar..

    ReplyDelete
  20. sya amik satu k xD thanks buat tuto ni :3

    ReplyDelete
  21. Izin kan saya ambil satu wahai cik adik manis :DD

    ReplyDelete
  22. sy ambik yg ni.thanks sis.good tutorials.

    ReplyDelete
  23. saya ambil stu yea .. yg pakai spek mata tuh .. :D

    ReplyDelete
  24. Salam..saya ambil ya :) Thanks :))

    ReplyDelete
  25. Mungkin saya ada guna dekat tutorial yang lain juga. Tapi mungkin saya tak tulis. Terlupa. Nanti mungkin saya guna semua(mungkin). Kalau saya nak tulis kat sini boleh? Saya kena cepat.

    ReplyDelete
  26. mcm mna nak nak bubuh kod cbox tu

    ReplyDelete

What do you think? Leave a comment :)