Welcome to my blog. Feel free to read my stories and etc. I rarely update this blog. Sixteen.


home. | le owner. | stuff. | affiliates. | flavors. | chatbox.

Sabtu, 26 Mac 2011

Tutorial - Float Shoutbox

hye. kali sye nak kongsi dengan anda cara hendak buat floating shoutbox. yang macam sye buat dekat blog Ratu Petninlaw neyh...


Pergi kt Design > Page Elements > Add A Gadget > HTML / Javascript

Copy kod di bwh.

<style type="text/css">
#nempel{position:fixed;top:65px;z-index:+1000;}
* html #nempel{position:relative;}
.nempeltab{height:238px;width:45px;float:left;cursor:pointer;background:url('http://1.bp.blogspot.com/_9AyoY6hi4Yo/TLCprDd7e1I/AAAAAAAAAHU/YTffAelRPLc/s1600/dddd.JPG')no-repeat;}
.nempelisi{float:left;border:0px solid #A5BD51;
</style>
<script type="text/javascript">function showHideNempel(){var nempel = document.getElementById("nempel");var w = nempel.offsetWidth;nempel.opened ? moveNempel(0, 30-w) : moveNempel(20-w, 0);nempel.opened = !nempel.opened;}function moveNempel(x0, xf){var nempel = document.getElementById("nempel");var dx = Math.abs(x0-xf) > 10 ? 5 : 1; var dir = xf>x0 ? 1 : -1;var x = x0 + dx * dir;nempel.style.right = x.toString() + "px";if(x0!=xf){setTimeout("moveNempel("+x+", "+xf+")", 10);}}</script>
<div id="nempel">
<div class="nempeltab" onclick="showHideNempel()"></div>
<div class="nempelisi">


<center>
<div id="ShoutMix" style="background:url(http://4.bp.blogspot.com/_9AyoY6hi4Yo/TLCqh3UEJ2I/AAAAAAAAAHY/noxcJr8-ngI/s1600/sssSSSS.JPG) no-repeat left top; width:235px;height:440px;padding: 120px 0px 0px;text-align: center;line-height: 0 ">

pastekan code shoutbox korunk di sini.

<div style="text-align:right;"><a style="text-decoration:none; font-family:Arial, Helvetica, sans-serif; font-size: 12px;" href="javascript:showHideNempel()">[Close]</a></div>

</div>
<script type="text/javascript">var nempel = document.getElementById("nempel");nempel.style.right = (30-nempel.offsetWidth).toString() + "px";</script></div></center></div></div>

Pastekan kt HTML / Javascript........


nielah hasilnye...

 perkataan dekat code yang sye bold tdi anda leh tukar dengan image anda sndiri. asalkan bersesuaian.



height : 238 px,width : 45 px


height : 235 px,width 440 px

P/S : klau anda x ske,bagi tahu kt sye ok..............sye akan buat lain untuk anda... kalau jadi or x jadi, tolong bgitau kat sye ok.. *kalau x fhm, tanya ek!!


Dah tu je...Papai....

2 ulasan:

nurul azreen berkata...

axl ko gne shoutbox aku ha???mntg2 ko pnye float,x yah ar blagak

Ratu Petninlaw berkata...

@nurul azreen bising ar kaw!! :P