مأ هي افضل لعبة متصفح


قبل المشاركه تدكر قول الله تعالى .ما يلفض من قول الا لديه رقيب عتيد
Get your own Chat Box! Go Large!

السلام عليكم

سيرفر نشيط
اضغط هنا للدخول

‏إظهار الرسائل ذات التسميات إضافات بلوجر. إظهار كافة الرسائل
‏إظهار الرسائل ذات التسميات إضافات بلوجر. إظهار كافة الرسائل

1
اكواد للمدونات javascriptو html

javascript,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>
<script language="JavaScript">
var sizes = new Array("0px", "1px", "2px", "3px", "4px");
sizes.pos = 0;
function elast() {
var el = document.all.elastic;
if (null == el.direction)
   el.direction = 1;
else if ((sizes.pos > sizes.length - 4) || (0 == sizes.pos))
   el.direction *= -1;
   el.style.letterSpacing = sizes[sizes.pos += el.direction];
}
setInterval('elast()', 100)
</script>
</HEAD>
<BODY>
<h1 align="center" id="elastic"><font size="3">مدونة كن داعيا للخير</font></hi>
</BODY>
</HTML></td></tr></table>

كود نص متأرجح يميناً ويسارا

<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()
tickercontents[0]='مدونة كن داعيا للخير <a href="http://conda3ianllkhir.blogspot.com/">text</a>'
tickercontents[1]='اكتب هنا نص عادي رقم 1 دون روابط <a href="الرابط الذي سيوضع فوق النص التالي">text</a>'
tickercontents[2]='اكتب هنا نص عادي رقم 2 دون روابط <a href="الرابط الذي سيوضع فوق النص التالي">text</a>'
tickercontents[3]='اكتب هنا نص عادي رقم 0 دون روابط <a href="الرابط الذي سيوضع فوق النص التالي">text</a>'
var tickdelay=3000 //delay btw messages
var highlightspeed=10 //10 pixels at a time.

////Do not edit pass this line////////////////

var currentmessage=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
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-1) currentmessage=0
else currentmessage++
setTimeout("changetickercontent()",tickdelay)
}
}

function start_ticking(){
crosstick=document.getElementById? document.getElementById("highlighter") : document.all.highlighter
crosstickParent=crosstick.parentNode? crosstick.parentNode : crosstick.parentElement
if (parseInt(crosstick.offsetHeight)>0)
crosstickParent.style.height=crosstick.offsetHeight+'px'
else
setTimeout("crosstickParent.style.height=crosstick.offsetHeight+'px'",100) //delay for Mozilla'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>
<font size="4" color="000000">
<marquee direction="right" width="100%" 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">



var message="مدونة كن داعيا للخير"
var neonbasecolor="gray"
var neontextcolor="yellow"
var flashspeed=100  //in milliseconds

///No need to edit below this line/////

var n=0
if (document.all||document.getElementById){
document.write('<font color="'+neonbasecolor+'">')
for (m=0;m<message.length;m++)
document.write('<span id="neonlight'+m+'">'+message.charAt(m)+'</span>')
document.write('</font>')
}
else
document.write(message)

function crossref(number){
var crossobj=document.all? eval("document.all.neonlight"+number) : document.getElementById("neonlight"+number)
return crossobj
}

function neon(){

//Change all letters to base color
if (n==0){
for (m=0;m<message.length;m++)
//eval("document.all.neonlight"+m).style.color=neonbasecolor
crossref(m).style.color=neonbasecolor
}

//cycle through and change individual letters to neon color
crossref(n).style.color=neontextcolor

if (n<message.length-1)
n++
else{
n=0
clearInterval(flashing)
setTimeout("beginneon()",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){
document.write('<span id="highlight">' + text + '</span>')
var storetext=document.getElementById? document.getElementById("highlight") : document.all.highlight
}
else
document.write(text)
var hex=new Array("00","14","28","3C","50","64","78","8C","A0","B4","C8","DC","F0")
var r=1
var g=1
var b=1
var seq=1
function changetext(){
rainbow="#"+hex[r]+hex[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)
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 (document.all||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;
font-family: Tahoma;
width: 250px;
height: 250px;
border: 0px solid black;
padding: 5px;
background-color: white;
}

</style>

<script type="text/javascript">

/*Example message arrays for the two demo scrollers*/

var pausecontent=new Array()
pausecontent[0]='<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDXPzPOZIE31NsqMqIWezBnLqsP3UAS6i6FJQw_jV3txyqR2gu6ysmm8NH2xwORb_vql6psvkFFBrAFI4W7-q8qALlQvRmpcAOZyzBInoDKh9PVxtwEkk0BlELNjTaj4g5ECGr9wEJy1JT/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>

<script type="text/javascript">

/***********************************************
* Pausing up-down scroller- © Dynamic Drive (www.dynamicdrive.com)
***********************************************/

function pausescroller(content, divId, divClass, delay){
this.content=content //message array content
this.tickerid=divId //ID of ticker div to display information
this.delay=delay //Delay between msg change, in miliseconds.
this.mouseoverBol=0 //Boolean to indicate whether mouse is currently over scroller (and pause it if it is)
this.hiddendivpointer=1 //index of message array for hidden div
document.write('<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 scrollerinstance=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()})
else if (document.getElementById) //if legacy DOM browsers, just start scroller after 0.5 sec
setTimeout(function(){scrollerinstance.initialize()}, 500)
}

// -------------------------------------------------------------------
// initialize()- Initialize scroller method.
// -Get div objects, set initial positions, start up down animation
// -------------------------------------------------------------------

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))
//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
document.getElementById(this.tickerid).onmouseover=function(){scrollerinstance.mouseoverBol=1}
document.getElementById(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)
}


// -------------------------------------------------------------------
// 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)-5+"px"
setTimeout(function(){scrollerinstance.animateup()}, 50)
}
else{
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
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=function(){
var scrollerinstance=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/>
<a href="http://conda3ianllkhir.blogspot.com/" rel="nofollow"><img border="0" alt="مدونة كن داعيا للخير" width="115" src="
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDXPzPOZIE31NsqMqIWezBnLqsP3UAS6i6FJQw_jV3txyqR2gu6ysmm8NH2xwORb_vql6psvkFFBrAFI4W7-q8qALlQvRmpcAOZyzBInoDKh9PVxtwEkk0BlELNjTaj4g5ECGr9wEJy1JT/s125/%2525D8%2525A8%2525D8%2525A7%2525D9%252586%2525D8%2525B1-%2525D8%2525AC%2525D8%2525AF%2525D9%25258A%2525D8%2525AF.gif"height="115" /></a>
<br/>
<a href="ضع الرابط هنا" rel="nofollow"><img border="0" alt="اسم الصورة" width="115" src="رابط الصورة" height="115" /></a>
<br/>

<a href="
ضع الرابط هنا" rel="nofollow"><img border="0" alt="اسم الصورة" width="115" src="
رابط الصورة"height="115" /></a>
<br/>

<a href="ضع الرابط هنا" rel="nofollow"><img border="0" alt="اسم الصورةرابط الصورة" height="115" /></a>
<br/>

<a href="ضع الرابط هنا/search?updated-max=2011-07-26T10%3A47%3A00-07%3A00&max-results=7
" rel="nofollow"><img border="0" alt="اسم الصورة" width="115" src="رابط الصورة
"height="115" /></a>
" width="115" src="
<p/></p></marquee></div></center>



 ثالثاً : أكواد الروابط

كود إضافة رابط

<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'
var three = '3'
var four = '4'
var five = '5'
var six = '6'
var seven = '7'
var eight = '8'
var nine = '9'
var zero = '0'
var plus = '+'
var minus = '-'
var multiply = '*'
var divide = '/'
var decimal = '.'
function enter(obj, string) 
   {obj.expr.value += string}
function clear(obj) 
   {obj.expr.value = ''}
                      </SCRIPT>
       <FONT COLOR="#CC0000" face="Arial"><P><B>الألة الحاسبة 
                        الإلكترونية</B></P></FONT>
      <FORM name="calc">
                        <DIV align="center">
       <TABLE border="1" bgcolor="#0033CC">
                          <TR>
                            <TD colSpan="4"><INPUT size=30 
                              name=expr action="compute(this.form)"></TD></TR>
                          <TR>
                            <TD bgColor="#000033">
                              <P><INPUT onclick="enter(this.form, seven)" type=button value="  7  "></P></TD>
                            <TD bgColor="#000033">
                              <P><INPUT onclick="enter(this.form, eight)" type=button value="  8  "></P></TD>
                            <TD bgColor="#000033">
                              <P><INPUT onclick="enter(this.form, nine)" type=button value="  9  "></P></TD>
                            <TD bgColor="#000033">
                              <P><INPUT onclick="enter(this.form, divide)" type=button value="   /  "></P></TD></TR>
                          <TR>
                            <TD bgColor="#000033">
                              <P><INPUT onclick="enter(this.form, four)" 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><INPUT onclick="enter(this.form, six)" type=button value="  6  "></P></TD>
                            <TD bgColor="#000033">
                              <P><INPUT onclick="enter(this.form, multiply)" type=button value="  *  "></P></TD></TR>
                          <TR>
                            <TD bgColor="#000033">
                              <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">
                              <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>
                            <TD bgColor="#000033" colSpan=2>
                              <P><INPUT onclick="enter(this.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>
                            <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 face="Courier , New tahoma , erdana, arial, helveticav" size="2"
                              color="#0000FF"><B><A target="_blank" 
  
  
  

0
كيفية ادراج اعلاناتك علي جانب المدونة

السلام عليكم و رحمة الله و بركاته.
أهلا بجميع زوار و أعضاء مدونة Tatarxwar
موضوع اليوم عن كيفية اضافة اعلانات في جوانب المدونة مثل الموجودة في مدونتي بدون استخدام أي هاكات و أو تعديل في قالب مدونتك

الطريقة:-
قم بالدخول الي الاتخطيط  ثم اضافة أداة ثم HTML/JavaScript

<div align="center">

<table border="1" height="217" width="266">
    <tbody><tr>
        <td height="125" width="125">
        <a href="رابط الاعلان 1" target="_blank">
        <img src="رابط صورة الاعلان 1" border="0" height="125" width="125" /></a></td>
        <td height="125" width="125">
        <a href="رابط الاعلان 2" target="_blank">
        <img src="رابط صورة الاعلان 2" border="0" height="125" width="125" /></a></td>
    </tr>
</tbody></table>
</div>



3
مصمم قوالب المدونات والمواقع الشهير Artisteer 3

هل تحلم بتصميم قالبك الخاص لمدونتك او موقعك مع حقوقك ومميزاتك الان مع  Artisteer 3 حلمك اصبح حقيقة

مصمم المدونات الشهير المسعر بـ 129 دولار
الأن مجانا + الكراك




للتحميل

اضغط هناااا


الكراك
Crack
اضغط هناااااا




لتفعيل الكراك اتبع الشرح












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

وفيه تصاميم جاهزه وقابله للتعديل بشكل كامل وأزيدكم ممكن يتحول واجهة البرنامج كامل للغه العربيه وداعم للكتابه باللغه العربيه
آتمنى أني وصلت لكم الرساله وإن شاء الله الكل يستفيد منه


2
إضافة بنرات إعلانية على مدونات بلوجر

إضافة بنرات إعلانية بتأثيرات jQuery على مدونات بلوجر


السلام عليكم إخواني أخواتي الكرام ،متتبعي مدونة أبو إياد ،في هذه الفقرة سوف نتعلم كيفية إضافة  بنرات إعلانية على مدونات بلوجر بتأثيرات jQuery الجميلة ،يكمن إختلاف هذه الإضافة عن باقي الإضافات الأخرى للبنرات الإعلانية في أن الإعلانات تتفاعل مع حركة الماوس ،أي عند وضع الماوس على أحد بنرات الإعلان يتم تكبيرها بطريقة جميلة ,كما هو موضح في هذه الصورة .و يمكن إستعمال هذه الخاصية ليس فقط على البنرات الإعلانية بل يمكن إستعمالها لعرض صور أخرى ,كما وضعتها على قائمة "مدوناتي"
 


انتقل إلى لوح تحكم مدونتك،إختر "تصميم" ،ثم "تحريرHTML " ثم ضع علامة في خانة توسيع قوالب عناصر واجهة المستخدم.
قم بالبحث عن الكود التالي بالإستعانة بلوحة التحكم (CTRL+F).
]]></b:skin>


ثم قم بإضافة هذا الكود قبله مباشرة :
ul.thumb {
float: left;
list-style: none;
margin: 0; padding: 10px;
width: 360px;
}
ul.thumb li {
margin: 0; padding: 5px;
float: left;
position: relative;
width: 110px;
height: 110px;
}
ul.thumb li img {
width: 100px; height: 100px;
-ms-interpolation-mode: bicubic;
border: 1px solid #ddd;
padding: 5px;
background: #f0f0f0;
position: absolute;
left: 0; top: 0;
}
ul.thumb li img.hover {
background:url(https://sites.google.com/site/lightbox007/photo/borderblogger.png) no-repeat center center; 
border: none;
}
بعد ذلك إبحث عن هذا الكود :

</head>
 ثم ألصق الكود التالي قبله :

<script src='http://code.jquery.com/jquery-latest.js'
type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){

//Larger thumbnail preview

$(&quot;ul.thumb li&quot;).hover(function() {
$(this).css({&#39;z-index&#39; : &#39;10&#39;});
$(this).find(&#39;img&#39;).addClass(&quot;hover&quot;)
.stop()
.animate({
marginTop: &#39;-110px&#39;,
marginLeft: &#39;-110px&#39;,
top: &#39;50%&#39;,
left: &#39;50%&#39;,
width: &#39;174px&#39;,
height: &#39;174px&#39;,
padding: &#39;20px&#39;
}, 200);

} , function() {
$(this).css({&#39;z-index&#39; : &#39;0&#39;});
$(this).find(&#39;img&#39;).removeClass(&quot;hover&quot;)
.stop()
.animate({
marginTop: &#39;0&#39;,
marginLeft: &#39;0&#39;,
top: &#39;0&#39;,
left: &#39;0&#39;,
width: &#39;100px&#39;,
height: &#39;100px&#39;,
padding: &#39;5px&#39;
}, 400);
});

//Swap Image on Click
$(&quot;ul.thumb li a&quot;).click(function() {

var mainImage = $(this).attr(&quot;href&quot;); //Find Image Name
$(&quot;#main_view img&quot;).attr({ src: mainImage });

});

});<font size="0"><a href=" http://www.pergola-aluminium.org"></a></font>
</script>
 والآن قم بحفظ القالب

انتقل إلى لوح تحكم مدونتك،إختر "تصميم" ثم إضافة أداة ثم اختر HTML/Javascriptولآن الصق الكود التالي :

<ul class="thumb">
<li><a href="رابط المعلن"><img src="https://sites.google.com/site/lightbox007/photo/abuiyadblogger.jpg" alt="" /></a></li>
<li><a href="رابط المعلن"><img src="https://sites.google.com/site/lightbox007/photo/abuiyadblogger.jpg" alt="" /></a></li>
<li><a href="رابط المعلن"><img src="https://sites.google.com/site/lightbox007/photo/abuiyadblogger.jpg" alt="" /></a></li>
<li><a href="رابط المعلن"><img src="https://sites.google.com/site/lightbox007/photo/abuiyadblogger.jpg" alt="" /></a></li>
</ul>
مع إدخال رابط المعلن ورابط البنر الخاص به مكان الرابط الأزرق
في إنتظار تعليقاتكم أتمنى أن تنال إعجابكم وإلى اللقاء 

4
كيفية اضافة مشغل الاغاني لمدونتك

لكن الطريقة التي سنشرحها اليوم (مشغل PlayList) لها عدة ميزات عن الطريقة السابقة وهي:
1- حرية اختيار شكل المشغل الصوتي ، وتصميمه وألوانه بما يتناسب مع المدونة وذوق المدون
2- إمكانية إضافة عدة أغنيات أو ملفات صوتية بحيث يتنقل المستخدم بينهم
3- وهو الأهم : إمكانية إضافة المشغل الصوتي في مربعات القائمة الجانبية للمدونة ، بحيث يكون الصوت أو الموسيقى مرافق لتصفح المدونة 



نأتي الآن إلى شرح الطريقة :
أولاً : نذهب إلى صفحة الموقع التالي :
اضغط هنا للدخول

تظهر صفحة فيها العديد من أشكال المشغلات ، 



نختار المشغل الذي نريده وذلك بالضغط عليه



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


بعد اختيار المشغل الصوتي تظهر صفحة مثل هذه :



إذا أردنا البحث عن الملف الصوتي في نفس الموقع ، نكتب اسمه في المكان المخصص


أما إذا كان الملف الذي نريده على رابط خاص نضغط على Add Url فتظهر صفحة كما في الصورة التالية :



نكتب فيها رابط الملف ، وعنوانه ، واسم الفنان 



وهنا ملاحظة هامة وهي أن الملف يجب أن يكون بصيغة mp3 ،



وبعد إكمال الببيانات نضغط Add track 
فيتم إضافة الملف إلى إلى المشغل الصوتي ، وتظهر على يمين الصفحة : عدد الملفات الصوتية (1)



ولإضافة ملف صوتي آخر نكرر العملية مرة ثانية ..وهكذا



وبعد الانتهاء من إضافة الملفات الصوتية إلى المشغل ننتقل إلى :
الخطوة الثانية :
تخصيص المشغل الصوتي والتحكم بألوانه وخصائصه :


نضغط على Customize :



من Skins نختار شكل المشغل 




من colors and styles نستطيع تغيير ألوان المشغل ومظهره




من settings نتحكم بخصائص المشغل ، حيث توجد الخيارات التالية :


autoplay خاصية التشغيل التلقائي للمقطع الصوتي ، أي أن المقطع الصوتي سوف يعمل تلقائياً بمجرد فتح الصفحة ،
أنا أنصح بشدة بإيقاف هذه الخاصية ، لأنها كثيراً ما تكون مزعجة للزائر ، وخاصة إذا كان مستوى الصوت مرتفع ، أو إذا كانت سرعة التحميل لدى الزائر بطيئة فسوف يصبح الصوت متقطعاً ، لذلك الأفضل جعل هذه الخاصية off
Shuffle لا أعرف تماماً عمل هذه الخاصية ، لكن أعتقد أنها تقوم بوصل نهاية المقطع الصوتي الحالي بالمقطع الذي بعده 
Loop : خاصية تكرار المقطع بعده انتهاءه
Privacy : هذه الخاصة تتعلق بمشاركة المشغل الصوتي الذي أنشأته مع المستخدمين الآخرين في الموقع
volume : مستوى الصوت يفضل أن يكون متوسطاً إذا كان المقطع الصوتي الأصلي له صوت مرتفع



لإكمال عملية إنشاء المشغل الصوتي ، يجب علينا إعطاءه اسماً خاصاً به 



بعد الضغط على Get Code تظهر لنا الصفحة التالية ، لكي نقوم بالتسجيل في الموقع :


بعد إدخال البيانات نضغط على Sign Up فتتم عملية التسجيل .


ملاحظة : عملية التسجيل نقوم بها فقط أول مرة ، أما في المرات القادمة عندما نريد إنشاء مشغل صوتي جديد فقط ندخل البريد الإلكتروني وكلمة السر في المكان المخصص على يمين الصفحة 


الآن بعد أن أتممنا عملية التسجيل تظهر لنا الصفحة التالية :




نضغط على Other Site كما في الشكل ، فتظهر صفحة أخرى نضغط على كلمة (More )



ثم نضغط على شعار وورد بريس



تظهر صفحة نكتب فيها بيانات المدونة :


ملاحظة صغيرة : يجب أن تكتب اسم المستخدم والمدونة بأحرف صغيرة 

وبالضغط على (post) يتم إرسال المشغل الصوتي إلى المدونة 

الآن انتهى مهمتنا في الموقع ، وحان وقت الذهاب إلى المدونة :
الخطوة الرابعة :


نذهب إلى المدونة ، وندخل إلى (تحرير النشرات) وذلك بالضغط على كلمة تحرير داخل مربع تدوينات كما في الصورة




فنجد أنه يوجد تدوينة جديدة بدون عنوان ، ندخل إلى نمط تحرير التدوينة (الظاهري)، فنجد كود كما في الصورة :



نقوم بتحدد الكتابات المحاطة بالإطار (آخر سطرين) ونحذفها فهي عبارة عن روابط دعاية لموقع المشغل الصوتي



الآن المشغل الصوتي الخاص بنا أصبح جاهزاً للعرض :
ننسخ الكود المتبقي ..

-إذا أردنا عرضه في تدوينة نلصقه الكود في صفحة تحرير التدوينة 
-أو إذا أردنا عرضه في مربعات القائمة الجانبية من Apperance نذهب إلى مربعات القائمة الجانبية ،ثم نسحب صندوق (نص) من القائمة اليمنى إلى القائمة اليسارية ، نكتب مكان العنوان أي عنوان نختاره ، ثم نلصق الكود بداخل الصندوق 

ثم نذهب إلى صفحة المدونة للتأكد أن المشغل الصوتي يظهر بشكل صحيح 

الشرح طويل وممل ، لكن التطبيق سهل ويحتاج لدقائق فقط
 
كل حقوق محفوضة مدونة حرب تاتار
حرب تاتار © 2012 | عودة الى الاعلى
Designed by tatarxwar