هذا الكود مفيد جدا لجميع المدونات حيث يمكن تحصيص اداة في القائمة الجانبية او في اي مكان في المدونة بعنوان اعمالي او تصاميم او بنرات تدل على مواضيع مميزة في المدونة و هو كود جافا سكربت بسيط و لا يؤثر على سرعة تصفح المدونة و يستخدمه الكثير من اصحاب المدونات المميزة و يعمل على الووردبريس و بلوقر .
و هناك نموذجين الاول يعمل بشكل تلقائي عند كل تحديث للصفحة حيث يظهر بنر مختلف عن الذي كان قبله .
و الثاني يعمل على شكل بنر متحرك بنفس الصفحة حيث كل بنر يدل الرابط الخاص به .
مثال على النموذجين هنا .
اما الان ساضع كلا النموذجين و طريقة عمل كل منهما .
طبعأً بإستبدال http://aaa2.com , http://aaa1.com , ... الخ بالروابط الصحيحة
و إستبدال http://aaa1.com/pic.jpg و http://aaa2.com/pic.jpg .. الخ بروابط الصور الصحيحة
و إستبدال وصف 1 , وصف 2 ... الخ بوصف الروابط الصحيح
حيث1 من كل حقل مرتبطة بالأخرى من الحقل التالي بمعنى أن الرابط 1 تخصه الصورة 1 و الوصف 1
ادخل الى لوحة التحكم ثم الى تصميم ثم عناصر الصفحة و بعدها اضافة اداة و اختر HTML/JavaScript و ضع فيه الكود التالي مع مراعاة روابط الصور و المواضيع .
انتهى .
طريقة استخدامه:
يجب ان تصمم مجموعة بنرات بالمقاسات التي تحتاجها و يجب ان تكون بنفس الابعاد و تخصص الروابط التي تدل عليها .و هناك نموذجين الاول يعمل بشكل تلقائي عند كل تحديث للصفحة حيث يظهر بنر مختلف عن الذي كان قبله .
و الثاني يعمل على شكل بنر متحرك بنفس الصفحة حيث كل بنر يدل الرابط الخاص به .
مثال على النموذجين هنا .
اما الان ساضع كلا النموذجين و طريقة عمل كل منهما .
النموذج الاول : كود اعلانات تتغير مع تحديث الصفحة :
ادخل الى لوحة التحكم ثم الى تصميم ثم عناصر الصفحة و بعدها اضافة اداة و اختر HTML/JavaScript و ضع فيه الكود التالي مع مراعاة روابط الصور و المواضيع .<script language="Javascript">
<!--
var currentdate = 0;
var core = 0;
function initArray() {
this.length = initArray.arguments.length;
for (var i = 0; i < this.length; i++) {
this[i] = initArray.arguments[i];
}
}
link = new initArray(
"http://aaa1.com",
"http://aaa2.com",
"http://aaa3.com",
"http://aaa4.com"
);
image = new initArray(
"http://aaa1.com/pic.jpg",
"http://aaa2.com/pic.jpg",
"http://aaa3.com/pic.jpg",
"http://aaa4.com/pic.jpg"
);
text = new initArray(
"وصف 1",
"وصف 2",
"وصف 3",
"وصف 4"
);
var currentdate = new Date();
var core = currentdate.getSeconds() % image.length;
var ranlink = link[core];
var ranimage = image[core];
var rantext = text[core];
document.write('<a href=\"' +ranlink+ '\" target=\"_blank\"><img src=\"'+ranimage+'\" border="0" alt=\"'+rantext+'\"></a>');
//-->
</script>
مع مراعاة ما يلي:طبعأً بإستبدال http://aaa2.com , http://aaa1.com , ... الخ بالروابط الصحيحة
و إستبدال http://aaa1.com/pic.jpg و http://aaa2.com/pic.jpg .. الخ بروابط الصور الصحيحة
و إستبدال وصف 1 , وصف 2 ... الخ بوصف الروابط الصحيح
حيث1 من كل حقل مرتبطة بالأخرى من الحقل التالي بمعنى أن الرابط 1 تخصه الصورة 1 و الوصف 1
النموذج الثاني :كود اعلانات متغيرة في نفس الوقت على شكل بنر متحرك .
ادخل الى لوحة التحكم ثم الى تصميم ثم عناصر الصفحة و بعدها اضافة اداة و اختر HTML/JavaScript و ضع فيه الكود التالي مع مراعاة روابط الصور و المواضيع .
<script language="JavaScript1.2">
/***********************************************
* Flexi Slideshow- © Dynamic Drive (www.dynamicdrive.com)
* This notice must stay intact for use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/
var variableslide=new Array()
//variableslide[x]=["path to image", "OPTIONAL link for image", "OPTIONAL text description (supports HTML tags)"]
variableslide[0]=['رابط الصورة الاولى', 'رابط الموضوع الاول', '']
variableslide[1]=['رابط الصورة الثانية', 'رابط الموضوع الثاني', '']
variableslide[2]=['رابط الصورة الثالثة', 'رابط الموضوع الثالث', '']
//configure the below 3 variables to set the dimension/background color of the slideshow
var slidewidth='280px' //عرض الصورة
var slideheight='80px' //ارتفاع الصورة
var slidebgcolor='#f5f5f5'
//configure the below variable to determine the delay between image rotations (in miliseconds)
var slidedelay=3000
////Do not edit pass this line////////////////
var ie=document.all
var dom=document.getElementById
for (i=0;i<variableslide.length;i++){
var cacheimage=new Image()
cacheimage.src=variableslide[i][0]
}
var currentslide=0
function rotateimages(){
contentcontainer='<center>'
if (variableslide[currentslide][1]!="")
contentcontainer+='<a target="_blank" href="'+variableslide[currentslide][1]+'">'
contentcontainer+='<img src="'+variableslide[currentslide][0]+'" border="0" vspace="3">'
if (variableslide[currentslide][1]!="")
contentcontainer+='</a>'
contentcontainer+='</center>'
if (variableslide[currentslide][2]!="")
contentcontainer+=variableslide[currentslide][2]
if (document.layers){
crossrotateobj.document.write(contentcontainer)
crossrotateobj.document.close()
}
else if (ie||dom)
crossrotateobj.innerHTML=contentcontainer
if (currentslide==variableslide.length-1) currentslide=0
else currentslide++
setTimeout("rotateimages()",slidedelay)
}
if (ie||dom)
document.write('<div id="slidedom" style="width:'+slidewidth+';height:'+slideheight+'; background-color:'+slidebgcolor+'"></div>')
function start_slider(){
crossrotateobj=dom? document.getElementById("slidedom") : ie? document.all.slidedom : document.slidensmain.document.slidenssub
if (document.layers)
document.slidensmain.visibility="show"
rotateimages()
}
if (ie||dom)
start_slider()
else if (document.layers)
window.onload=start_slider
</script>
الكود اعلاه واضح فقط اذا اردت ان تغير سرعة تقلب صور البنرات غير الرقم 3000 الى مثلا 4000 او 2000 حيث كلما زاد الرقم قلت سرعة تقلب الصور و بالعكس .انتهى .
كود مميز وإضافة مميزة جاري التجريب ولي عودة إن شاء الله
ردحذفمدونة الباسم
ماشاء الله دائما تدهشنا بإبداعاتك أخي أحمد
ردحذفبارك الله فيك
لقد راسلتك في الخاص مايقرب من4 مرات ولاكن لا تجيب .
ردحذفاخي الغالي الادريسي لا اعرف فيما اذا راسلتني على الخاص و لو مرة واحدة لاني لا اعرف ايميلك و لا اسمك و عجيب منك انك تقول بانني لا اجيب علما اني لم اترك رسالة الا و قد اجبت عليها و لماذا تلقي بالتهم علي و انت لا تعرفني و تتكلم بكلام تقشعر له القلوب .. اسال يا اخي و كلي اذان صاغية و للتاكيد اكثر هذا ايميلي.
ردحذفalazawi.ahmed@gmail.com
فقد تكون قد اخطات الايميل عند مراسلتي .
أشكرك على المجهود
ردحذفلكن أرجوك ضع مثالا على الأكواد
موضوع رائع
ردحذفأشكرك أخى على الموضوع
Allah is with you ... :)
ردحذف