مجموعة أكواد html والبلوجر ~ تحميل جميع البرامج

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

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

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

هذه مجموعة هامة من أكواد java script و 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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgu7H1vI46D_VgfVIKm1LXU1hBhJm_PWVwyJhYKOpRL1gvkQ_dwQyKTN6PH2sUxBH3TBBCLC0S0F4IGo6sY6xSTGFNbLDb4BB3-ntG93QQxl04OiYwCkbhBdVuFbPU27KUC3TAw0JpkTnqd/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>

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

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

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