14‏/10‏/2012

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

مجموعة أكواد 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"









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

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



________________________________________________________________________










شارك هذا الموضوع
لا تقرأ وترحل
ضع بصمتك وشاركنا برأيك
اذا اعجبك الموضوع فضلا اعمل لايك وشير حتى تصلك كل البرامج الجديدة
إشترك في القائمة البريدية

أضف تعليق

ايموشن
تكويد
😊
😉
😀
😁
😎
😍
😜
😑
😇
💖
😯
😱
😭
👍
🍻