Sunday, 18 May 2014

Tutorial shoutbox + frame




1. Korang pergi link ni dulu >>>  http://shout.busuk.org/m/index.php?view=register 

2. Dah ? Masukkan Username , Password dan Email korang ..

3. Then , dah berjaya ? Masukkan lagi sekali username dan password korang .

4. Ok . lepas tu , ubah width and height dia .(mengikut kesesuaian blog korang)
5. Kalau nakkan shoutbox korang tu lebih cantik lagi berseri-seri , tekan Customize Shoutbox!

6. Ok . Sekarang  ubahlah warna mengikut citarasa korang ye =]
7. Then , tekan SAVE !

8. Pergi dekat Home , copy code shoutbox .

9. Dashboard > Design > Add a Gadget > Html/JavaScript
10. Paste kod di ruangan tersebut .

11. SAVE (!) Siap . hehe

Frame untuk shoutbox


1) Sign in akaun blogger

2) Dashboard >> Design >> Page Element >> Add A Gadget >> Html / Javascript

3) Copy dan paste kod di bawah pada ruang Html / Javascript tadi.
<center><div id="edited" style="width:200px; height:370px; background:url(URL IMAGE FRAME) no-repeat left top; padding-top:93px; padding-left:0px; position:relative" align="center">KOD SHOUTBOX</div></center>


Nota:
URL IMAGE FRAME - masukkan url image frame yang korang suka. Korang boleh create sendiri atau just pilih frame yang dah disediakan di bawah.
KOD SHOUTBOX - masukkan kod shoutbox korang. 


Contoh:
<center><div id="edited" style="width:200px; height:370px; background:url(http://img535.imageshack.us/img535/2325/frame6p.png) no-repeat left top; padding-top:93px; padding-left:0px; position:relative" align="center">SHOUT BUSUK : Start !--><iframe src="http://shout.busuk.org/?xxxx" width="180" height="255" frameborder="0" scrolling="auto"><a href="http://shout.busuk.org/?xxxx=viewfull">View shoutbox</a></iframe>
<!-- SHOUT BUSUK : End !-->
</div></center>

Nota:
URL IMAGE FRAME - masukkan url image frame yang korang suka. Korang boleh create sendiri atau just pilih frame yang dah disediakan di bawah.
KOD SHOUTBOX - masukkan kod shoutbox korang. 


Contoh:
<center><div id="edited" style="width:200px; height:370px; background:url(http://img535.imageshack.us/img535/2325/frame6p.png) no-repeat left top; padding-top:93px; padding-left:0px; position:relative" align="center">SHOUT BUSUK : Start !--><iframe src="http://shout.busuk.org/?xxxx" width="180" height="255" frameborder="0" scrolling="auto"><a href="http://shout.busuk.org/?xxxx=viewfull">View shoutbox</a></iframe>
<!-- SHOUT BUSUK : End !-->
</div></center>

Freebies time.. frame untuk shoutbox. Just copy url yang disediakan:
P/s : kalau korang nak guna image frame ni, ukuran shoutbox korang mestilah 180x255 ( width: 180px, height:255)



http://2.bp.blogspot.com/-7Rr1socqrbk/TxsS3EpETdI/AAAAAAAABFU/nPEeRcTN1P8/s1600/frame%2Bfibox1.png




http://4.bp.blogspot.com/-pF2hp6UGBpE/TxsS3dFl7qI/AAAAAAAABFg/ru1cuA9cmqc/s1600/frame%2Bfibox2.png


http://2.bp.blogspot.com/-6vIZko8QdzQ/TxsS3TcXvYI/AAAAAAAABFs/-QKgPXI8viY/s1600/frame%2Bfibox3.png


http://3.bp.blogspot.com/-pPdTw8s8RPI/TxsS3lgvhoI/AAAAAAAABF4/xpu0yLl2BOA/s1600/frame%2Bfibox4.png


http://3.bp.blogspot.com/-NNNRU6tnANk/TxsS34HSnbI/AAAAAAAABGI/FzzDL4rIxfQ/s1600/frame%2Bfibox5.png

4) Lastly, klik save dan lihat hasilnya.

Selamat mencuba! :) 

No comments: