مجموعة أكواد html والبلوجر

مجموعة أكواد html والبلوجر

أكواد HTML - مجموعة أكواد HTML - مجموعة متكاملة  من أكواد HTML


 بسم الله الرحمن الرحيم

هذه مجموعة هامة من أكواد java script و html لمصممى المواقع والمدونات

javascript,Html
مجموعة أكواد 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
<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.ela
sizes.pos = 0; function elast() { var el = d ostic; if (null == el.direction) el.direction = 1;
.pos)) el.direction *= -1; el.style.letterSpacing = si
else 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">مدونة كن داعيا للخير</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 curre
tickercontents[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.offsetWidth
1) currentmessage=0 else
if (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 Mozilla
crosstickParent=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"> <marq
u0%" height="20"direction="right" onmouseover="this.stop()" onmouseout="this.start()" scrolldelay="0" scrollamount="5">مدونة كن داعيا للخير </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="مدونة كن داعيا للخير" va
va rr neonbasecolor="gray"
w" var flashspeed=100 //i
var neontextcolor="yell on milliseconds
t below this line///// var n=0 if (doc
///No need to ed iument.all||document.getElementById){
ecolor+'">') for (m=0;m<message.length;m++) docume
document.write('<font color="'+neonba snt.write('<span id="neonlight'+m+'">'+message.charAt(m)+'</span>')
rossref(number){ var cros
document.write('</font>') } else document.write(message) function
csobj=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.col
for (m=0;m<message.length;m++) //eval("document.all.neonlight"+m).style.color=neon bor=neonbasecolor } //cycle through and change individual letters to neon color
rInterval(flashing) setTimeout("begin
crossref(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
// ****** *="مدونة كن داعيا للخير"
الالوان // ********** لا تعدل شي
var speed=80 // سرعه تغير هنا if (document.all||document.getElementById){
pan>') var storetext=document.getElementById? document.get
document.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]+he
var 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/javascr
background-color: white; } </style> < sipt"> /*Example message arrays for the two demo scrollers*/
rc="https://lh6.googleuserco
var 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 information
if it is) this.hiddendivpointer=1 //index of message array
this.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 scrollerins
document.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.hiddendiv
function(){ var scrollerinst
this.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>



 كود صور متحركة


<img
src="رابط الصورة المتحركة"
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="مدونة كن داعيا للخير" width="115" src="http://img12.imageshack.us/img12/914/75539242.png" height="115" /></a>
<br/>
f="http://conda3ianllkhir.blogspot.com/" rel="nofollow"><img border="0" alt="مدونة كن داعيا للخير" width="115" src="
<a hr e
https://lh6.googleusercontent.com/-MzjplMi8KoQ/TtZvZy6ociI/AAAAAAAAAu4/QarCCQhJFaI/s125/%2525D8%2525A8%2525D8%2525A7%2525D9%252586%2525D8%2525B1-%2525D8%2525AC%2525D8%2525AF%2525D9%25258A%2525D8%2525AF.gif"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>

شريط الحديث والدعاء

<iframe
align="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>






  1. سادسا:سكربتات متنوعة





كود وضع الفلاش


(يمكن التحكم فى الطول والعرض بتغيير قيم 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' var
var 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"









اتمنى ان اكون قد افدتكم باذن الله 

للاستفسار المرجو ترك التعليقات



________________________________________________________________________

التسميات















6 التعليقات