4 كيفية وضع خلفية للمواضيع او الادوات اوالاكواد






السلام عليكم اليوم اطرح موضوعا قد يحتاجه كل مدون وهو عبارة عن كود لوضع خلفية للادواة اوالاكواد او المواضيع ... بالمدونة اذا تابعوا الشرح
اذا اعجبتك الاضافه وترغب بتركيبها اكمل القراءه

افتح موضوع جديد واضفها في مكان عنوان الموضوع
او حول الموضوع الي html واكتب الكلام او الكود ثم انشر الموضوع

الكود



<div dir="rtl" style="text-align: right;" trbidi="on"><div dir="rtl" style="text-align: right;" trbidi="on"><div style="-webkit-box-shadow: #F0860D 0px 0px 0px 4px, rgba(10, 10, 0, 0.496094) 2px 1px 4px 4px; background-attachment: initial; background-clip: initial; background-color: #13b0b2; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-color: #ffffff; border-image: initial; border-style: dashed; border-top-left-radius: 3px; border-top-right-radius: 3px; border-width: 2px; box-shadow: #13B0B2 0px 0px 0px 4px, rgba(10, 10, 0, 0.496094) 2px 1px 6px 4px; color: white; font-size: 21px; line-height: 1.3em; margin: 10px; padding-bottom: 5px; padding-left: 10px; padding-right: 10px; padding-top: 5px; text-align: center; text-shadow: #13B0B2 -1px -1px;">هنا الكلمة المرادة</div>

غير اللذي باللون الاحمر #13b0b2 الي اي كود تريده

استبدل الاخضر
(هنا الكلمة المرادة) الي الكلمات التي تريديها


إقرأ المزيد Résuméabuiyad

2 اضافة تأثير الدوران على الصور بالمدونة





السلام عليكم ورحمة الله,اليوم جئتكم بإضافة جميلة بتقنية css تضيف لصور المدونة حركة دوران عند مرور الماوس عليها

معـــاينة





1)تسجيل الدخول الى بلوجر

2) خيارات> تحرير القالب > ضع علامة على توسيع القالب 

3) ابحث عن الكود التالي بإستعمال مفتاحي ctrl+f
]]></b:skin>
4) ضع الكود التالي فوق الكود السابق الذي ةجدته

.post img{
transition: transform .5s ease-in;
-moz-transition: -moz-transform .5s ease-in;
-o-transition: -o-transform .5s ease-in;
-webkit-transition: -webkit-transform .5s ease-in;
}
.post img:hover{
transform: rotate(5deg);
-moz-transform: rotate(5deg);
-o-transform: rotate(5deg);
-webkit-transform: rotate(5deg);


ليصبح في الاخير هكذا:
contoh:
.post img{
transition: transform .5s ease-in;
-moz-transition: -moz-transform .5s ease-in;
-o-transition: -o-transform .5s ease-in;
-webkit-transition: -webkit-transform .5s ease-in;
}
.post img:hover{
transform: rotate(5deg);
-moz-transform: rotate(5deg);
-o-transform: rotate(5deg);
-webkit-transform: rotate(5deg);

 ]]></b:skin>


7) وأخيرا اضغط على حفظ القالب

إقرأ المزيد Résuméabuiyad

3 ازرار رائعة بتقنية css...حصريا


السلام عليكم ورحمة الله وبركاته،اليوم احببت ان اعرض عليكم هذه الاضافة الرائعة والتي هي عبارة عن ازرار يمكن استعمالها في العديد من الاماكن داخل المدونة وما يميزها هو امكانية التحكم في حجمها واللون الذي تختاره وايضا انها تعمل بتقنية  CSS والتي تعطي للمدونة مظهرا جميلا وبدون ان اطيل عليكم تابعوا الشرح 

معاينة مباشــرة ↓



طريقة تركيب هذه الاضافة بالمدونة؟

 اول خطوة هي اضافة الكود التالي للمدونة

تسجبل الدخول الى المدونة.
تحرير القالب.
اضغط على زر توسعة القالب. 
 ثم ابحث عن الكود التالي باستعمال مفتاحي  ctrl+f 

]]></b:skin>


اضف الكود التالي فوقه مباشرة

.button, .button:visited {
 background: #222 url(http://helperblogger.googlecode.com/svn/overlay.png) repeat-x;
 display: inline-block;
 padding: 5px 10px 6px;
 color: #fff;
 text-decoration: none;
 -moz-border-radius: 6px;
 -webkit-border-radius: 6px;
 -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
 -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
 text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
 border-bottom: 1px solid rgba(0,0,0,0.25);
 position: relative;
 cursor: pointer;
 font-family: calibri;
}

.button:hover {
 background-color: #111;
 color: #fff;
}

.button:active {
 top: 1px;
}

.small.button, .small.button:visited {
 font-size: 11px
}

.button, .button:visited,
.medium.button, .medium.button:visited {
 font-size: 13px;
 font-weight: bold;
 line-height: 1;
 text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
}

.medium.button, .medium.button:visited {
 font-size: 14px;
 padding: 8px 14px 9px;
}

.large.button, .large.button:visited {
 font-size: 34px;
 padding: 8px 14px 9px;
}

.pink.button, .magenta.button:visited {
 background-color: #e22092;
}

.pink.button:hover {
 background-color: #c81e82;
}

.green.button, .green.button:visited {
 background-color: #91bd09;
}

.green.button:hover {
 background-color: #749a02;
}

.red.button, .red.button:visited {
 background-color: #e62727;
}

.red.button:hover {
 background-color: #cf2525;
}

.orange.button, .orange.button:visited {
 background-color: #ff5c00;
}

.orange.button:hover {
 background-color: #d45500;
}

.blue.button, .blue.button:visited {
 background-color: #2981e4;
}

.blue.button:hover {
 background-color: #2575cf;
}

.yellow.button, .yellow.button:visited {
 background-color: #ffb515;
}

.yellow.button:hover {
 background-color: #fc9200;
}

واخيرا احفظ القالب

والان نأتي الى اختيار الازرار المناسبة

طريقة استعمال الازرار؟


يمكنك استعمال هذه الازرار في اي مكان حنى داخل المواضيع ولادراج الازرار في اداة الجافا اتبع التالي

  1. اختر الكود الذي يعجبك من الاسفل
  2. قم بإضافة اداة الجافا سكربت فأي مكان تريده
  3. الصق الكود داخل هذه الاداة 

  1. كود الازرار كبيرة الحجم
<center><a href="LINK HERE" class="large button pink" >LINK TEXT HERE</a></center>

<center><a href="LINK HERE" class="large button blue" >LINK TEXT HERE</a></center>

<center><a href="LINK HERE" class="large button green" >LINK TEXT HERE</a></center>

<center><a href="LINK HERE" class="large button orange" >LINK TEXT HERE</a></center>

<center><a href="LINK HERE" class="large button red" >LINK TEXT HERE</a></center>

<center><a href="LINK HERE" class="large button yellow" >LINK TEXT HERE</a></center>


2.كود ازرار متوسطة الحجم

<center><a href="LINK HERE" class="medium button pink" >LINK TEXT HERE</a></center>

<center><a href="LINK HERE" class="medium button blue" >LINK TEXT HERE</a></center>

<center><a href="LINK HERE" class="medium button green" >LINK TEXT HERE</a></center>

<center><a href="LINK HERE" class="medium button orange" >LINK TEXT HERE</a></center>

<center><a href="LINK HERE" class="medium button red" >LINK TEXT HERE</a></center>

<center><a href="LINK HERE" class="medium button yellow" >LINK TEXT HERE</a></center>

  • غير كلمة LINK HEREبالرابط الذي تريد
  • غير كلمة LINK TEXT HERE بالجملة او الكلمة التي ستظهر داخل الازرار.
  • ويمكن اختيار الون عن طريق تغيير اسماء الالوان 



إقرأ المزيد Résuméabuiyad

2 كيفية عمل سكرول متحرك لاداة الارشيف في مدونة بلوجر



معاينة


السلام عليكم و رحمة الله وبركاته ..  كثير من اصحاب المدونات يرغب في وضع اداه الارشيف في القائمه الجانبيه والغالبيه العظمي تلجأ الي جعل الاداه تعمل علي شكل قائمه منسدله من خلال الاختيارت التي تمنحها الاداه . غير ان الكثير يود ان يتم عرض الارشيف علي شكل اسبوعي او شهري او يومي ولكن بوضعه الطبيعي والافتراضي وليس كقائمه منسدله وما يمنع تلك الرغبه  هي المساحه التي ياخذها الارشيف لو وضعناه بتلك الطريقه فلو كانت المدونه تحتوي علي موضوعات كثيره فغالبا اداه الارشيف ستحتل القائمه الجانبيه باكملها وحلا لتلك الاشكاليه سيتم عمل هذا التعديل البسيط ... ولعمل مثل هذا التعديل يلزمك تسجيل الدخول الي لوحة تحكم مدون بلوجر  ثم الذهاب الي عناصر تصميم الصفحه ووضع اداة الارشيف في القائمه الجانبيه لمدونتك من خلال انشاء اداه جديده ثم اذهب بعد ذلك الي  تحرير HTML  وابحث عن الكود التالي <div id='ArchiveList'> ستجد فوقه مباشرة <div class='widget-content'> قم بتظليل الكود الاخير واستبدله بالكود التالي


<div class='widget-content' style='overflow:auto; height:200px'>
 
معاينة التعديل


والسلام مسك الختام



إقرأ المزيد Résuméabuiyad

2 إظهار أو إخفاء أداة على الصفحة الرئيسية أو على صفحة محددة على بلوجر




مرحبا بكم إخواني الكرام ،عادة جميع الأدوات التي يتم إدراجها في المدونة تظهر على الصفحة الرئيسية وكذلك على جميع صفحات المدونة ،لكن في بعض الأوقات نرغب في إظهار بعض هذه الأدوات فقط على الصفحة الرئيسية أو فقط على جميع التدوينات بإستثناء الصفحة الرئيسية أو فقط على صفحة معينة يمكنك إختيارها ،هذه العملية ليست بالمستحيلة بل هي بسيطة جدا،عليكم سوى تحديد إسمالأداة المراد إظهارها أو إخفاؤها ثم بعد ذلك يتم إإضافة بعض الأكواد حسب العملية المراد القيام بها ،بدون إطالة أعزائي الكرام .
نتقل إلى لوح تحكم مدونتك،إختر "تصميم" ،ثم "تحريرHTML " ثم ضع علامة في خانة توسيع قوالب عناصر واجهة المستخدم.
قم بالبحث عن الكود التالي بالإستعانة بلوحة التحكم (CTRL+F ).


تذكير:لا تنسى أخي المدون أن تأخد نسخة إحتياطية لمدونتك تجنبا لأي أخطاء.
<b:widget id='HTML
والآن نحتاج إلى القليل من التركيز حيث يجب عليك تحديد أو تعليم الأداة المراد تعديلها (إظهارها أو إخفاؤها)،وهذا المثال يوضح كيفية
البحث عن هذا الكود :
<b:widget id='HTML3' locked='false' title='إسم الأداة ' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>
والآن مباشرة بعد تحديد إسم الأداة كما هو موضح باللون الأحمر ،ولإظهارها فقط على" الصفحة الرئيسية" ،قم بإضافة الكودين باللون الأحمر.كما هو موضح في الكود التالي:


<b:widget id='HTML3' locked='false' title='إسم الأداة ' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>
ولإضافة هذه الأداة في جميع صفحات المواضيع فقط  ،قم بإضافة الكودين باللون الأحمر كما هو موضح في الكود التالي :

<b:widget id='HTML3' locked='false' title='إسم الأداة ' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "item"'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>
ولإضافة هذه الأداة فقط على صفحة محددة ،قم بإضافة الكودين باللون الأحمر كما هو موضح في الكود التالي :

<b:widget id='HTML3' locked='false' title='إسم الإضافة ' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == " أدخل رابط الصفحة المحددة "'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

ولإضافة هذه الأداة فقط على صفحات التسمية ،قم بإضافة الكود باللون الأحمر كما هو موضح في الكود التالي مع تحديد إسم التسمية :
<b:widget id='HTML3' locked='false' title='إسم الإضافة ' type='HTML'>
<b:includable id='main'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.name == &quot;التسمية&quot;'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>
 ولإضافة هذه الأداة في كل الصفحات بإستثناء الصفحة الرئيسية  ،قم بإضافة الكودين باللون الأحمر كما هو موضح في الكود التالي :
 <b:widget id='HTML3' locked='false' title='إسم الأداة ' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url != data:blog.homepageUrl'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

 ولإضافة هذه الأداة في كل الصفحات بإستثناء  صفحات المواضيع ،قم بإضافة الكودين باللون الأحمر كما هو موضح في الكود التالي :
<b:widget id='HTML3' locked='false' title='إسم الأداة ' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

ولإضافة هذه الأداة في الصفحات الثابتة فقط ،قم بإضافة الكودين باللون الأحمر كما هو موضح في الكود التالي :
<b:widget id='HTML3' locked='false' title='إسم الأداة ' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>
 ولإضافة هذه الأداة في كل الصفحات بإستثناء الصفحات الثابتة فقط ،قم بإضافة الكودين باللون الأحمر كما هو موضح في الكود التالي :
 <b:widget id='HTML3' locked='false' title='إسم الأداة ' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

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

<b:widget id='HTML3' locked='false' title='إسم الأداة ' type='HTML'>
<b:includable id='main'>
<b:if cond='data:post.author == &quot;إسم الكاتب &quot;'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

المصدر


إقرأ المزيد Résuméabuiyad

2 طريقة تحريك الروابط داخل المدونة...جديد







معاينة:


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


1) قم بتسجيل الدخول الى blogger

2) لوحة التحكم >> التخطيط >> عناصر الصفحة >> اضافة اداة >> واضف اداة Html / Javascript

3) قم بنسخ الكود التالي والصقه في اداة Html / Javascript :

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script><script type='text/javascript'> $(document).ready(function() { $('a').hover(function() { $(this).animate({ marginLeft: '10px' }, 400); }, function() { $(this).animate({ marginLeft: 0 }, 400); }); });</script>
400 - يمكنكم التعديل على القيمة التالية والتي تمثل سرعة حركة الروابط

4) وأخيرا قم بحفظ الاداة

إقرأ المزيد Résuméabuiyad

1 تغيير لون الروابط داخل المدونة بألوان عدة وفي نفس الوقت


السلام عليكم ورحمة الله
اليوم جئتكم بكود رائع يغير لون الروابط عند تمرير الماوس عليه ويعطيه شكل رائع وفي الاخير لايسعني الا ان اترككم لتجربته




المعاينة المباشرة


طريقة تركيب كود  HTML
1) تسجيل الدخول الخاص بك المدون حساب
2) لوحة التحكم الرئيسية> التصميم> إضافة أداة> HTML / Javascript
3) انسخ الكود التالي والصقه في الاداة  HTML / Javascript


<script src="https://sites.google.com/site/tutorialcursorsparkle/rainbow.user.js" type="text/javascript">
/***********************************************
http://بfor-tek.blogspot.com/
***********************************************/
</script>

4) واخيرا قم بحفظ الاضافة 
إقرأ المزيد Résuméabuiyad

0 كريات مضيئة تنبثق من وسط المدونة...اداة رائعة





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


المعاينة المباشرة



 لوحة القيادة >>  تصميم  >>  صفحة العناصر  >> إضافة أداة الجافا سكربت

  قم بنسخ الكود التالي والصقه في الاداة:


<script type="text/javascript">
// <![CDATA[
var speed=33; // lower number for faster
var warp=3; // from 1 to 10
var stars=100; // number of stars
var colour="#66FF66"; // colour of stars
var position=0; // set to '-1' for stars to appear behind text on page

/****************************
* Star Warp Effect *
* (c) 2005 mf2fm web-design *
* http://www.mf2fm.com/rv *
* Tutorial by Polskahackrew *
****************************/
var i;
var strs=new Array();
var strx=new Array();
var stry=new Array();
var stdx=new Array();
var stdy=new Array();
var swide=800;
var shigh=600;
warp/=100;
window.onload=function() { if (document.getElementById) {
var b, s, temp;
set_width();
b=document.createElement("div");
s=b.style;
s.position="absolute";
s.zIndex=position;
b.setAttribute("id", "bod");
document.body.appendChild(b);
set_scroll();
for (i=0; i<stars; i++) {
strs[i]=document.createElement("div");
strs[i].style.backgroundColor=colour;
strs[i].style.overflow="hidden";
strs[i].style.position="absolute";
stdy[i]=Math.random()*4-2;
stdx[i]=Math.random()*6-3;
temp=Math.random()*100;
strx[i]=swide/2+temp*stdx[i];
stry[i]=shigh/2+temp*stdy[i];
if (Math.abs(stdx[i])+Math.abs(stdy[i])>2.66) {
strs[i].style.width="2px";
strs[i].style.height="2px";
}
else {
strs[i].style.width="1px";
strs[i].style.height="1px";
}
b.appendChild(strs[i]);
}
setInterval("warp_drive()", speed);
}}

function warp_drive() {
for (i=0; i<stars; i++) {
stry[i]+=stdy[i];
strx[i]+=stdx[i];
stdx[i]*=1+warp;
stdy[i]*=1+warp;
if (stry[i]>0 && stry[i]<shigh-3 && strx[i]>0 && strx[i]<swide-3) {
strs[i].style.left=Math.floor(strx[i])+"px";
strs[i].style.top=Math.floor(stry[i])+"px"
}
else {
strx[i]=swide/2;
stry[i]=shigh/2;
stry[i]+=stdy[i]=Math.random()*4-2;
strx[i]+=stdx[i]=Math.random()*6-3;
if (Math.abs(stdx[i])+Math.abs(stdy[i])>2.66) {
strs[i].style.width="2px";
strs[i].style.height="2px";
}
else {
strs[i].style.width="1px";
strs[i].style.height="1px";
}
}
}
}

window.onresize=set_width;
function set_width() {
if (typeof(self.innerWidth)=="number") {
swide=self.innerWidth-13;
shigh=self.innerHeight-13;
}
else if (document.documentElement && document.documentElement.clientWidth) {
swide=document.documentElement.clientWidth;
shigh=document.documentElement.clientHeight;
}
else if (document.body.clientWidth) {
swide=document.body.clientWidth;
shigh=document.body.clientHeight;
}
else {
swide=800;
shigh=600;
}
swide-=2;
shigh-=2;
}

window.onscroll=set_scroll;
function set_scroll() {
var sleft, sdown;
if (typeof(self.pageYOffset)=="number") {
sdown=self.pageYOffset;
sleft=self.pageXOffset;
}
else if (document.body.scrollTop || document.body.scrollLeft) {
sdown=document.body.scrollTop;
sleft=document.body.scrollLeft;
}
else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {
sleft=document.documentElement.scrollLeft;
sdown=document.documentElement.scrollTop;
}
else {
sdown=0;
sleft=0;
}
var s=document.getElementById("bod").style;
s.top=sdown+"px";
s.left=sleft+"px";
}
// ]]>
</script>
يمكنكم التعديل على لون الكريات وذلك بتغيير الكود الذي باللون الاخضر  66FF66 ولقد ادرجت موقع اكواد الالوان بالاسفل ويمكنكم اختيار كود اللون المناسب
        
           


إقرأ المزيد Résuméabuiyad

2 نجوم صغيرة تنبثق من مؤشر الفأرة عند تحريكه



السلام عليكم ورحمة الله
لازلنا نقدم لكم اجمل الاضافات. وهاهي احدى اروع الاصافات والتي تضيف لمدونتكم لمسة جدابة وهي عبارة عن نجوم صغيرة تنبثق من مؤشر الماوس عند تحريكه واترككم مع طريقة تركيبها 



المعاينةالمباشرة

طريقة تركيب كود  HTML


1) تسجيل الدخول الخاص بك المدون حساب


2) لوحة التحكم الرئيسية> التصميم> إضافة أداة> HTML / Javascript


3) انسخ الكود التالي والصقه في الاداة  HTML / Javascript




<script type="text/javascript" src="https://sites.google.com/site/jombinabelogcursorbuih/bubble%20cursor.js"></script><script type="text/javascript">
// <![CDATA[
FFFF33FFFF33FFFF33FFFF33FFFF33// colours for top, right, bottom and left borders and background of bubbles

var bubbles=100; // maximum number of bubbles on screen
/****************************

* JavaScript Bubble Cursor *

* (c) 2010 mf2fm web-design *

* http://www.mf2fm.com/rv *

* DON'T EDIT BELOW THIS BOX *

****************************/

var x=ox=400;

var y=oy=300;

var swide=800;

var shigh=600;

var sleft=sdown=0;

var bubb=new Array();

var bubbx=new Array();

var bubby=new Array();

var bubbs=new Array();

window.onload=function() { if (document.getElementById) {

var rats, div;

for (var i=0; i<bubbles; i++) {

rats=createDiv("3px", "3px");

rats.style.visibility="hidden";

div=createDiv("auto", "auto");

rats.appendChild(div);

div=div.style;

div.top="1px";

div.left="0px";

div.bottom="1px";

div.right="0px";

div.borderLeft="1px solid "+colours[3];

div.borderRight="1px solid "+colours[1];

div=createDiv("auto", "auto");

rats.appendChild(div);

div=div.style;

div.top="0px";

div.left="1px";

div.right="1px";

div.bottom="0px"

div.borderTop="1px solid "+colours[0];

div.borderBottom="1px solid "+colours[2];

div=createDiv("auto", "auto");

rats.appendChild(div);

div=div.style;

div.left="1px";

div.right="1px";

div.bottom="1px";

div.top="1px";

div.backgroundColor=colours[4];

div.opacity=0.5;

if (document.all) div.filter="alpha(opacity=50)";

document.body.appendChild(rats);

bubb[i]=rats.style;

}

set_scroll();

set_width();

bubble();

}}

function bubble() {

var c;

if (x!=ox || y!=oy) {

ox=x;

oy=y;

for (c=0; c<bubbles; c++) if (!bubby[c]) {

bubb[c].left=(bubbx[c]=x)+"px";

bubb[c].top=(bubby[c]=y)+"px";

bubb[c].width="3px";

bubb[c].height="3px"

bubb[c].visibility="visible";

bubbs[c]=3;

break;

}

}

for (c=0; c<bubbles; c++) if (bubby[c]) update_bubb(c);

setTimeout("bubble()", 40);

}

function update_bubb(i) {

if (bubby[i]) {

bubby[i]-=bubbs[i]/2+i%2;

bubbx[i]+=(i%5-2)/5;

if (bubby[i]>sdown && bubbx[i]>0) {

if (Math.random()<bubbs[i]/shigh*2 && bubbs[i]++<8) {

bubb[i].width=bubbs[i]+"px";

bubb[i].height=bubbs[i]+"px";

}

bubb[i].top=bubby[i]+"px";

bubb[i].left=bubbx[i]+"px";

}

else {

bubb[i].visibility="hidden";

bubby[i]=0;

return;

}

}

}

document.onmousemove=mouse;

function mouse(e) {

set_scroll();

y=(e)?e.pageY:event.y+sleft;

x=(e)?e.pageX:event.x+sdown; }

window.onresize=set_width;

function set_width() {

if (document.documentElement && document.documentElement.clientWidth) {

swide=document.documentElement.clientWidth;

shigh=document.documentElement.clientHeight;

}

else if (typeof(self.innerHeight)=="number") {

swide=self.innerWidth;

shigh=self.innerHeight;

}

else if (document.body.clientWidth) {

swide=document.body.clientWidth;

shigh=document.body.clientHeight;

}

else {

swide=800;

shigh=600;

}

}

window.onscroll=set_scroll;

function set_scroll() {

if (typeof(self.pageYOffset)=="number") {

sdown=self.pageYOffset;

sleft=self.pageXOffset;

}

else if (document.body.scrollTop || document.body.scrollLeft) {

sdown=document.body.scrollTop;

sleft=document.body.scrollLeft;

}

else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {

sleft=document.documentElement.scrollLeft;

sdown=document.documentElement.scrollTop;

}

else {

sdown=0;

sleft=0;

}

}

function createDiv(height, width) {
var div=document.createElement("div");
div.style.position="absolute";
div.style.height=height;
div.style.width=width;
div.style.overflow="hidden";
return (div);
}

// ]]>
</script>
يمكنكم تغيير لون النجوم من خلال تغير الرمز المظلل باللون الاصفر في الاعلى وهذا موقع يقدم خدمة رموز الالوان هنا 

4) واخيرا قم بحفظ الاضافة 

إقرأ المزيد Résuméabuiyad

 

جدونا على التويتر

Ping your blog, website, or RSS feed for Free

فكرة،سؤال،ملاحظة...

Ping your blog, website, or RSS feed for Free

جدونا على الفيس بوك

Ping your blog, website, or RSS feed for Free