مجموعة هامة من أكواد الجافا سكريبت و html لمصممى المواقع والمدونات
أيضا إضافتها لصفحات الفيس بوك
أولاً :أكواد النصوص
كود النص العريض
<b>اكتب النص هنا </b>
كود تحديد اتجاه النص
<p dir="rtl" align="right">اكتب هنا النص الذي سيظهر من اليمين إلى اليسار</p>
كود التحكم فى حجم الخط ولونه ونوعه
<CENTER><FONT COLOR="#كود اللون المرغوب" FACE="اسم الخط المرغوب" SIZE="4">اكتب هنا ما تريد</FONT></CENTER>كود نص يتحرك لأعلى
<marquee behavior="scroll" direction="up" height="140" scrollamount="1" scrolldelay="60" onMouseOver="this.stop()" onMouseOut="this.start()"><center><br>اكتب هنا النص الذي سيتحرك للأعلى الفقرة 1 <br>اكتب هنا النص الذي سيتحرك للأعلى الفقرة 2 <br> 3 www.alomix.com <br>اكتب هنا النص الذي سيتحرك للأعلى الفقرة 4 <br>......</center> </marquee>
كود نص يتمدد وينكمش
<table align="center" width="98%"><tr><td><HTML> <HEAD>e="JavaScript"> var sizes = ne<script langua gw Array("0px", "1px", "2px", "3px", "4px");cument.all.elasizes.pos = 0; function elast() { var el = d ostic; if (null == el.direction) el.direction = 1;.pos)) el.direction *= -1; el.style.letterSpacing = sielse if ((sizes.pos > sizes.length - 4) || (0 == size szes[sizes.pos += el.direction]; } setInterval('elast()', 100) </script> </HEAD> <BODY></HTML></td></tr></table><h1 align="center" id="elastic"><font size="3">مدونة كن داعيا للخير</font></hi> </BODY>
كود نص متأرجح يميناً ويسارا
<marquee scrolldelay="60" scrollamount="3" width="400" direction="left" behavior="alternate" bgcolor="#FF0000"> www.alomix.com </marquee>
كود إظهار نصوص بها روابط بالتناوب
<div style="position:relative;center:0px;top:0px"><span id="highlighter" style="position:absolute;left:0;top:0;font-size:18px;font-family:Verdana;background-color:yellow;clip:rect(0px 0px auto 0px)"></span></div> <script type="text/javascript"> var tickercontents=new Array()r.blogspot.com/">text</a>' tickercontents[1]='اكتب هنا نص عادي رقم 1 دون روابط <a href="الرابط اtickercontents[0]='مدونة كن داعيا للخير <a href="http://conda3ianllkh iلذي سيوضع فوق النص التالي">text</a>' tickercontents[2]='اكتب هنا نص عادي رقم 2 دون روابط <a href="الرابط الذي سيوضع فوق النص التالي">text</a>'s var highlightspeed=10 //10 pixels at a time. ////Do not edit pass this line//////////////// var curretickercontents[3]='اكتب هنا نص عادي رقم 0 دون روابط <a href="الرابط الذي سيوضع فوق النص التالي">text</a>' var tickdelay=3000 //delay btw messag entmessage=0 var clipwidth=0 function changetickercontent(){ crosstick.style.clip="rect(0px 0px auto 0px)" crosstick.innerHTML=tickercontents[currentmessage] highlightmsg() } function highlightmsg(){ var msgwidth=crosstick.offsetWidth1) currentmessage=0 elseif (clipwidth<msgwidth){ clipwidth+=highlightspeed crosstick.style.clip="rect(0px "+clipwidth+"px auto 0px)" beginclip=setTimeout("highlightmsg()",20) } else{ clipwidth=0 clearTimeout(beginclip) if (currentmessage==tickercontents.length - currentmessage++ setTimeout("changetickercontent()",tickdelay) } } function start_ticking(){ crosstick=document.getElementById? document.getElementById("highlighter") : document.all.highlighter("crosstickParent.style.height=crosstick.offsetHeight+'px'",100) //delay for MozillacrosstickParent=crosstick.parentNode? crosstick.parentNode : crosstick.parentElement if (parseInt(crosstick.offsetHeight)>0) crosstickParent.style.height=crosstick.offsetHeight+'px' else setTimeou t's sake changetickercontent() } if (document.all || document.getElementById) window.onload=start_ticking </script>
كود نص متحرك
<div align="center"><table border="0" width="100%" style="border-collapse: collapse"><tr><td class="alt1" colspan="3"><b>ee direction="right" width="10<font size="4" color="000000"> <marqu0%" height="20"direction="right" onmouseover="this.stop()" onmouseout="this.start()" scrolldelay="0" scrollamount="5">www.alomix.com</marquee></font></b></td></tr></table></div>
كود شريط متحرك مع روابط
<marquee direction="right" width="100%" height="20"direction="right" onmouseover="this.stop()" onmouseout="this.start()" scrolldelay="0" scrollamount="5"><a href="اكتب هنا عنوان الموقع">اكتب هنا اسم الموقع</a> ------ </marquee>
كود نص يضئ بالتدريج
<h2><script language="JavaScript1.2">message="www.alomix.com" vava rr neonbasecolor="gray"w" var flashspeed=100 //ivar neontextcolor="yell on millisecondst below this line///// var n=0 if (doc///No need to ed iument.all||document.getElementById){ecolor+'">') for (m=0;m<message.length;m++) documedocument.write('<font color="'+neonba snt.write('<span id="neonlight'+m+'">'+message.charAt(m)+'</span>')rossref(number){ var crosdocument.write('</font>') } else document.write(message) functioncsobj=document.all? eval("document.all.neonlight"+number) : document.getElementById("neonlight"+number)return crossobj } function neon(){ //Change all letters to base color if (n==0){asecolor crossref(m).style.colfor (m=0;m<message.length;m++) //eval("document.all.neonlight"+m).style.color=neon bor=neonbasecolor } //cycle through and change individual letters to neon colorrInterval(flashing) setTimeout("begincrossref(n).style.color=neontextcolor if (n<message.length-1) n++ else{ n=0 cle aneon()",1500) return } } function beginneon(){ if (document.all||document.getElementById) flashing=setInterval("neon()",flashspeed) } beginneon() </script> </h2> </font></p>
كود نص يضئ بألوان مختلفة
<b><font size="5"><script>*** عدل هنا var text// ****** *="www.alomix.com"الالوان // ********** لا تعدل شيvar speed=80 // سرعه تغير هنا if (document.all||document.getElementById){pan>') var storetext=document.getElementById? document.getdocument.write('<span id="highlight">' + text + '</ sElementById("highlight") : document.all.highlight } else document.write(text)F0") var r=1 var g=1 var b=1 var seq=1 function changetext(){ rainbow="#"+hex[r]+hevar hex=new Array("00","14","28","3C","50","64","78","8C","A0","B4","C8","DC", "x[g]+hex[b] storetext.style.color=rainbow } function change(){ if (seq==6){ b-- if (b==0) seq=1 } if (seq==5){ r++ if (r==12) seq=6 } if (seq==4){ g-- if (g==0)ment.seq=5 } if (seq==3){ b++ if (b==12) seq=4 } if (seq==2){ r-- if (r==0) seq=3 } if (seq==1){ g++ if (g==12) seq=2 } changetext() } function starteffect(){ if (doc uall||document.getElementById) flash=setInterval("change()",speed) } starteffect() </script> </font></b> </font></p>
ثانياً : أكواد الصور
كود إضافة صورة
<img src="رابط الصورة" >كود صورة مع رابط
<CENTER><a href="الرابط"><img src="رابط الصورة" width="30" height="80" border="2" align=" middle" /></a></CENTER>
كود تغيير الصور تلقائيا
<center><style type="text/css">#pscroller1{ font-size: 14px;0px; height: 250px;font-family: Tahoma; width: 2 5border: 0px solid black; padding: 5px;cript type="text/javascrbackground-color: white; } </style> < sipt"> /*Example message arrays for the two demo scrollers*/rc="https://lh6.googleusercovar pausecontent=new Array() pausecontent[0]='<img border="0"sntent.com/-MzjplMi8KoQ/TtZvZy6ociI/AAAAAAAAAu4/QarCCQhJFaI/s125/%2525D8%2525A8%2525D8%2525A7%2525D9%252586%2525D8%2525B1-%2525D8%2525AC%2525D8%2525AF%2525D9%25258A%2525D8%2525AF.gif">'pausecontent[1]='<img border="0" src="رابط الصورة 2">' pausecontent[2]='<img border="0" src="رابط الصورة 3">' pausecontent[3]='<img border="0" src="رابط الصورة 1">' </script>********************/ function<script type="text/javascript"> /*********************************************** * Pausing up-down scroller- © Dynamic Drive (www.dynamicdrive.com) ************************** * pausescroller(content, divId, divClass, delay){ this.content=content //message array content this.tickerid=divId //ID of ticker div to display informationif it is) this.hiddendivpointer=1 //index of message arraythis.delay=delay //Delay between msg change, in miliseconds. this.mouseoverBol=0 //Boolean to indicate whether mouse is currently over scroller (and pause i tfor hidden div<div id="'+divId+'" class="'+divClass+'" style="position: relative; overflow: hidden"><div class="innerDiv" style="position: absolute; width: 100%" id="'+divId+'1">'+content[0]+'</div><div class="innerDiv" style="position: absolute; width: 100%; visibility: hidden" id="'+divId+'2">'+content[1]+'</div></div>') var scrollerinsdocument.write( 'tance=this if (window.addEventListener) //run onload in DOM2 browsers window.addEventListener("load", function(){scrollerinstance.initialize()}, false) else if (window.attachEvent) //run onload in IE5.5+ window.attachEvent("onload", function(){scrollerinstance.initialize()})et div objects, set initial positions, start up down animation // ---------------------------else if (document.getElementById) //if legacy DOM browsers, just start scroller after 0.5 sec setTimeout(function(){scrollerinstance.initialize()}, 500) } // ------------------------------------------------------------------- // initialize()- Initialize scroller method. // - G---------------------------------------- pausescroller.prototype.initialize=function(){ this.tickerdiv=document.getElementById(this.tickerid) this.visiblediv=document.getElementById(this.tickerid+"1") this.hiddendiv=document.getElementById(this.tickerid+"2") this.visibledivtop=parseInt(pausescroller.getCSSpadding(this.tickerdiv))t.getElementById(this.tickerid).onmouseover=function(){scrollerinstance.mouseoverBol=1} document.get//set width of inner DIVs to outer DIV's width minus padding (padding assumed to be top padding x 2) this.visiblediv.style.width=this.hiddendiv.style.width=this.tickerdiv.offsetWidth-(this.visibledivtop*2)+"px" this.getinline(this.visiblediv, this.hiddendiv) this.hiddendiv.style.visibility="visible" var scrollerinstance=this docume nElementById(this.tickerid).onmouseout=function(){scrollerinstance.mouseoverBol=0} if (window.attachEvent) //Clean up loose references in IE window.attachEvent("onunload", function(){scrollerinstance.tickerdiv.onmouseover=scrollerinstance.tickerdiv.onmouseout=null}) setTimeout(function(){scrollerinstance.animateup()}, this.delay) } // --------------------------------------------------------------------5+"px" setTimeout(function(){scrollerinstance.animateup()}, 50) } els// animateup()- Move the two inner divs of the scroller up and in sync // ------------------------------------------------------------------- pausescroller.prototype.animateup=function(){ var scrollerinstance=this if (parseInt(this.hiddendiv.style.top)>(this.visibledivtop+5)){ this.visiblediv.style.top=parseInt(this.visiblediv.style.top)-5+"px" this.hiddendiv.style.top=parseInt(this.hiddendiv.style.top )e{ this.getinline(this.hiddendiv, this.visiblediv) this.swapdivs() setTimeout(function(){scrollerinstance.setmessage()}, this.delay) } } // ------------------------------------------------------------------- // swapdivs()- Swap between which is the visible and which is the hidden div // ------------------------------------------------------------------- pausescroller.prototype.swapdivs=function(){ var tempcontainer=this.visiblediv this.visiblediv=this.hiddendivfunction(){ var scrollerinstthis.hiddendiv=tempcontainer } pausescroller.prototype.getinline=function(div1, div2){ div1.style.top=this.visibledivtop+"px" div2.style.top=Math.max(div1.parentNode.offsetHeight, div1.offsetHeight)+"px" } // ------------------------------------------------------------------- // setmessage()- Populate the hidden div with the next message before it's visible // ------------------------------------------------------------------- pausescroller.prototype.setmessage =ance=this if (this.mouseoverBol==1) //if mouse is currently over scoller, do nothing (pause it) setTimeout(function(){scrollerinstance.setmessage()}, 100) else{ var i=this.hiddendivpointer var ceiling=this.content.length this.hiddendivpointer=(i+1>ceiling-1)? 0 : i+1 this.hiddendiv.innerHTML=this.content[this.hiddendivpointer] this.animateup() } } pausescroller.getCSSpadding=function(tickerobj){ //get CSS padding value, if any if (tickerobj.currentStyle) return tickerobj.currentStyle["paddingTop"] else if (window.getComputedStyle) //if DOM2 return window.getComputedStyle(tickerobj, "").getPropertyValue("padding-top") else return 0 } </script> <script type="text/javascript"> //new pausescroller(name_of_message_array, CSS_ID, CSS_classname, pause_in_miliseconds) new pausescroller(pausecontent, "pscroller1", "someclass", 3000) document.write("<br />") </script> </center>
كود صور متحركة
<imgsrc="رابط الصورة المتحركة"onload="NcodeImageResizer.createOn(this);" border="0"originalWidth="250" originalHeight="270">
كود شريط الصور المتحرك مع روابط
يمكن التحكم فى طول وعرض الصور بتغيير قيمها يدويا وتغيير إتجاه الشريط بتغيير كلمة up بالكود إلى down أو right أو lift
<center/><div class="textwidget"><marquee direction="up" width="115" onmouseover="this.stop()" scrollamount="2" onmouseout="this.start()" height="125" align="left"><br /> <a href="http://conda3ianllkhir.blogspot.com/" rel="nofollow"><img border="0" alt="www.alomix.com " width="115" src="http://img12.imageshack.us/img12/914/75539242.png" height="115" /></a><br/>f="http://www.alomix.com/" rel="nofollow"><img border="0" alt="alomix.com" width="115" src="<a hr ehttps://fbcdn-profile-a.akamaihd.net/hprofile-ak-snc4/161811_100003532350239_1765599491_q.jpg"height="115" /></a><br/>f="ضع الرابط هنا" rel="nofollow"><img border="0" alt="اسم الصورة" width="115" src="رابط الصورة" height="115" /></a><a hr e <br/> <a href="ضع الرابط هنا" rel="nofollow"><img border="0" alt="اسم الصورة" width="115" src="رابط الصورة"height="115" /></a><br/>="ضع الرابط هنا" rel="nofollow"><img border="0" alt="اسم الصورةرابط الصورة" height="115" /></a><a hre f <br/>"ضع الرابط هنا/search?updated-max=2011-07-26T10%3A47%3A00-07%3A00&max-results=7<a href =rel="nofollow"><img border="0" alt="اسم الصورة" width="115" src="رابط الصورة"height="115" /></a>"" width="115" src="iv></center><p/></p></marquee></ d
ثالثاً : أكواد الروابط
كود إضافة رابط
<a href="ضع الرابط هنا">Nom du site</a> فتح الرابط في نافذة جديدة
<a href="ضع الرابط هنا" target="_blank">Nom du site</a> فتح الرابط في نفس النافذة
<a href="ضع الرابط هنا" target="_self">Nom du site</a> لون الرابط
<a style="color:اسم اللون باللغة الانجليزية;" href="رابط الموقع">Nom du site</a>
رابعا:أكواد إسلامية
<center><iframe align="center" allowtransparency="1" frameborder="0" height="334" id="IW_frame_1438" scrolling="no" src="http://www.tvquran.com/add/index.htm" width="302"></iframe></center></div>شريط الحديث والدعاء
<iframealign="center"src="http://www.wathakker.net/outdoor-strip-marquee.html"frameborder="0" allowtransparency="1" scrolling="no" width="474"height="41" vspace="0"></iframe>
خامسا:أكواد إخبارية
أخبار BBC
<iframe name="I1" marginwidth="1" marginheight="1" height="30" width="90%" scrolling="no" border="0" frameborder="0" src="http://news.bbc.co.uk/hi/arabic/news/ticker.stm"></iframe>
شريط قناة الجزيرة
<iframe frameborder="0" height="50" marginheight="0" marginwidth="0" scrolling="no" src="http://www.faisal1.com/News_Grab/jazeera.php" width="100%"></iframe>
شريط العربية نت
<div width="600"><script src="http://www.alarabiya.net/ara_v_ticker.html"></script></div>سادسا : سكربتات متنوعة
كود وضع الفلاش
(يمكن التحكم فى الطول والعرض بتغيير قيم width,height)
<object width="150" height="340"><param value="MYFLASH.swf" name="movie"/><embed width="150" src="URL OF MYFLASH.swf" height="340"></embed> </object >
كود إضافة صفحة موقع داخل صفحة موقعك
<div dir="rtl" style="text-align: right;" trbidi="on"><iframe height="500" src="رابط الموقع" width="600"></iframe></div>/div><
سكربت طباعة الصفحة
<a href="javascript:window.print()">اطبع هذه الصفحة</a>
سكريبت آلة حاسبة
<SCRIPT>function compute(obj){obj.expr.value = eval(obj.expr.value)}var one = '1' var two = '2'4' var five = 'var three = '3' var four = '5' var six = '6' var seven = '7'zero = '0' varvar eight = '8' var nine = '9' va r plus = '+' var minus = '-' var multiply = '*'r(obj, string)var divide = '/' var decimal = '.' function ent e {obj.expr.value += string} function clear(obj)IPT> <FONT COLOR={obj.expr.value = ''} </SC R"#CC0000" face="Arial"><P><B>الألة الحاسبةFONT> <FORM name="calc">الإلكترونية</B></P>< / <DIV align="center"> <TABLE border="1" bgcolor="#0033CC">"4"><INPUT size=30<TR> <TD colSpan = name=expr action="compute(this.form)"></TD></TR> <TR>nter(this.form, seven)" type=button value=" 7 "><TD bgColor="#000033"> <P><INPUT onclick=" e</P></TD> <TD bgColor="#000033">rm, eight)" type=button value=" 8 "></P></TD> <TD bgColor="#000033"><P><INPUT onclick="enter(this.f o <P><INPUT onclick="enter(this.form, nine)" type=button value=" 9 "></P></TD> <TD bgColor="#000033"><TD bgColor="#000033"> <P><INPUT onclick="enter(this.form, fo<P><INPUT onclick="enter(this.form, divide)" type=button value=" / "></P></TD></TR> <TR> ur)" type=button value=" 4 "></P></TD> <TD bgColor="#000033"> <P><INPUT onclick="enter(this.form, five)" type=button value=" 5 "></P></TD> <TD bgColor="#000033">=" * "></P></TD></TR> <TR> <TD bgColor="#000033"><P><INPUT onclick="enter(this.form, six)" type=button value=" 6 "></P></TD> <TD bgColor="#000033"> <P><INPUT onclick="enter(this.form, multiply)" type=button valu e <P><INPUT onclick="enter(this.form, one)" type=button value=" 1 "></P></TD> <TD bgColor="#000033"> <P><INPUT onclick="enter(this.form, two)" type=button value=" 2 "></P></TD> <TD bgColor="#000033"><TD bgColor="#000033" colSpan=2> <P><INPUT onclick="enter(thi<P><INPUT onclick="enter(this.form, three)" type=button value=" 3 "></P></TD> <TD bgColor="#000033"> <P><INPUT onclick="enter(this.form, minus)" type=button value=" - "></P></TD></TR> <TR> s.form, zero)" type=button value=" 0 "></P></TD> <TD bgColor="#000033"> <P><INPUT onclick="enter(this.form, decimal)" type=button value=" . "></P></TD> <TD bgColor="#000033"> <P><INPUT onclick="enter(this.form, plus)" type=button value=" + "></P></TD></TR> <TR>face="Courier , New tahoma , erdana, arial, helveticav" size<TD bgColor="#000033" colSpan=2> <P><INPUT onclick=compute(this.form) type=button value=" = "></P></TD> <TD bgColor="#000033" colSpan=2> <P><INPUT onclick=clear(this.form) type=reset value=AC> </P></TD></TR></TABLE></DIV></FORM> <P align="center"> <FONT ="2" color="#0000FF"><B><A target="_blank"
بقلم عاشق النات
بسم الله الرحمان الرحيم
