@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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWmQOOOHlc-bvEiaNM9banGCly08dmhyphenhyphen7xfHj815pO_GYk667EvlWRASedA1kprG5y34v2vI1WOiUbVkd76Cjd-o1jvosQ06OCQpb0QvF55cr3jOZFEcFnuSAf8v1gIPWPAvWwFq-jUtNd/s1600/icon+shout.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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinV51OK0iFUbTB4XDujaquWLIQ9CRhabiWXisEgRCcsuKCo5bWFh9SZEQG9VROB_Dmhaj050Nhor3vYX59GSOjMHxBwl8kg-TfzELJjjsDB1ysz8ZYwYeGhFI_N_USNsJI1jn8Mdam-h4/s1600/kak+yana+shout+frame+copy.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..
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinV51OK0iFUbTB4XDujaquWLIQ9CRhabiWXisEgRCcsuKCo5bWFh9SZEQG9VROB_Dmhaj050Nhor3vYX59GSOjMHxBwl8kg-TfzELJjjsDB1ysz8ZYwYeGhFI_N_USNsJI1jn8Mdam-h4/s1600/kak+yana+shout+frame+copy.png


kalau nk ubah icon slide shoutbox pulak. tukar code ni ngn mana2 url yg korg nk..
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWmQOOOHlc-bvEiaNM9banGCly08dmhyphenhyphen7xfHj815pO_GYk667EvlWRASedA1kprG5y34v2vI1WOiUbVkd76Cjd-o1jvosQ06OCQpb0QvF55cr3jOZFEcFnuSAf8v1gIPWPAvWwFq-jUtNd/s1600/icon+shout.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...
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKtTGHw0ftiReYw26aJumgDz-8R5cczRGpEeqZJsAtRrqiigxJvaKuzqv2dB1uBmLFwuFdiBnB280EvvVbfo6_EebtaT-1Yf0YmZ2ed2UH3fEyQdcw3GHGTUwNrhS8VFjzeaWxcLjd9KCc/s1600/wan+shout+frame.png
 https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDhKq9R7YBuKNBnrU-ijqYYo_9JjxNv7kCKuYvEORFgh2K4kI8h2WuNp9B2fFvaCwxdsFOmNMOPHHuEGEtPwUY-mw_7d_5h-n9OXscm4Tvvl8BKxeHd-BRY9quT60Txf0TQSpo_PWr58Xf/s1600/wan+shout+frame1.png




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

  
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQ2OUe7qsI3dbfXu327Tx2u3dnmFYMfzz3ZC5wUmrebmRrbsfL88gVj9CrjwtWRN7jTAyRmwsw3I9nTr6hc021_pXsp_2Sv4IXzvaAM7eVnUlGRharIWWTcfolFATeK7znOWIpbsQxUkjp/s320/shoutbox+icon+kyuhyun+suju.png 
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgC8eHow8-eZhfQ_6YPsVL_RCbnl_DF9duqFeViZkSQv6HwsCOtY1FEB6phWZZQNiUxIhqMMlTAGYzR7n_2rd6OlFVPDPBEt_yN4ataQbdGT_YzUcT8wr2n5s8hPuCYUg6FMza4C42MdtOj/s320/Kim+bum+Shoutbox+icon.png


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

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTf-I8MrSZwaks7p08S2ZXtXIqju2dzvTeSqFQy5voloxzQit6RXfWwTrDrgNecmoy9IXh199TxFmL5wNfpEWkD25vq40hyphenhyphenCpfWAids7G3m7QMln6_DI6kxzMzVUKJOYMzi24TtOtIzjy6/s320/Seulong+2AM+shoutbox.png

 
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQZhWE_uZCXhcxIjZGvemHnTYPYL9GQMbGD6WlY9eZEO1jYsO4uqXOkUlXT4R-1gcuw6rSgsj1cGhlemBxKWEY912N3EjJmRchdKUu2nDJhkGTESHaGmkxc1i5sPrNEqQKSXsC_fvak0-I/s320/min+woo+-boyfriend+shoutbox.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