@frF
All the way I wrote
Tutorial Slide Float Shoutbox
July 3, 2011 @ 8:23 AM | 2 Comment [s]

well hello there readers!! we meet again.. for this time, i'll post the tutorial how to make a slide float shoutbox.. could u see an angry bird at the side there?? yaaa! it's a shoutbox! cute isn't it? hehe.. this tutorial is actually credit to leka! ok! enough english speaking... =.=! si leka ni beria nk shoutbox dia ada kt tepi...soo.. nah leka! wt jgn xbuat... tutor ni actually ak dpt dr cik wan hazel. there're many tutorials would u get! n now...ni la hasilnya! *wink* ops! back to the topic! ok... just copy down this code..



<div style='display:scroll; position:fixed; top:10px; right:10px;'><a class='linkopacity' href='http://wanhazel.blogspot.com/2011/05/tutorial-slide-float-shoutbox-with-cute.html' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='Get Slide Float Shoutbox'><img border="0" src="http://i1009.photobucket.com/albums/af215/wanhazel252909/iconlink.gif" /></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 code 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>


kalau nak ubah frame shoutbox...ubah la code ni..
http://1.bp.blogspot.com/-gBB6EsDRUsw/TeD7q32XuXI/AAAAAAAAGgw/aOSqFcJnwwQ/s1600/kak%2Byana%2Bshout%2Bframe%2Bcopy.png


kalau nk ubah icon slide shoutbox pulak. tukar code ni ngn mana2 url yg korg nk..
http://3.bp.blogspot.com/-FK_3d8apTQ4/TeELH6ag7AI/AAAAAAAAGhA/T0ddlWdbsik/s1600/icon%2Bshout.png




then,bile korg dah rasa puas ati dgn code yg korg ubah tu, paste kn aje code tu dlm html. cara2 nye, g kt dashboard>design>add gadget>html. Save!


ni adalah contoh2 frame shoutbox yg comel...
http://1.bp.blogspot.com/-AaOuRLgs2eA/TeERbWWQrJI/AAAAAAAAGhQ/wictbkBxl8Y/s1600/wan%2Bshout%2Bframe.png
 http://2.bp.blogspot.com/-D32wmd-31DM/TeERrsAscRI/AAAAAAAAGhY/gFDFIkEugNk/s1600/wan%2Bshout%2Bframe1.png




yg ni pulak icon shoutbox.. memandangkan kwan aku tu, (leka) obses sgt kt korea, jd ni icon2 nye..

  
http://2.bp.blogspot.com/-nRxWp-jBrvg/Tfw2lngxuDI/AAAAAAAAG8E/WUTRMdFRx2M/s320/shoutbox%2Bicon%2Bkyuhyun%2Bsuju.png 
http://1.bp.blogspot.com/-ni3l2jyTlJs/TfoUiV0fsEI/AAAAAAAAG5E/AmDOS6xxC3Y/s320/Kim%2Bbum%2BShoutbox%2Bicon.png


http://1.bp.blogspot.com/- JUxdvfXObiQ/TfsPYcF2MRI/AAAAAAAAG6M/vt2sj1CIj4c/s320/lee%2Bmin%2Bho%2Bshoutbox.png

http://2.bp.blogspot.com/-hZWVzilTaOQ/TfsCBnbiCJI/AAAAAAAAG58/9zugMLM7h10/s320/Seulong%2B2AM%2Bshoutbox.png

 
http://3.bp.blogspot.com/-EuIgmdm45ac/TfsJzq0L9JI/AAAAAAAAG6E/cF-9lRdkU3Y/s320/min%2Bwoo%2B-boyfriend%2Bshoutbox.png






Thanks Baca Entry Saya . Jangan lupa baca entry lain pulak !


Older Post | Newer Post

Hye. Leave your footstep at my Shoutbox. Please don't REMOVE CREDITS!. Thanks for visiting my ugly duckling blog. Owh yeah!drop some comments yaw!




Story About Stuff Links