الثلاثاء، يوليو 06، 2010

نموذجين لكود اعلانات متغيرة .

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

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

اما الان ساضع كلا النموذجين و طريقة عمل كل منهما .

النموذج الاول : كود اعلانات تتغير مع تحديث الصفحة :
ادخل الى لوحة التحكم ثم الى تصميم ثم عناصر الصفحة و بعدها اضافة اداة و اختر 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 حيث كلما زاد الرقم قلت سرعة تقلب الصور و بالعكس .
انتهى .

هناك 7 تعليقات:

  1. كود مميز وإضافة مميزة جاري التجريب ولي عودة إن شاء الله

    مدونة الباسم

    ردحذف
  2. ماشاء الله دائما تدهشنا بإبداعاتك أخي أحمد

    بارك الله فيك

    ردحذف
  3. لقد راسلتك في الخاص مايقرب من4 مرات ولاكن لا تجيب .

    ردحذف
  4. اخي الغالي الادريسي لا اعرف فيما اذا راسلتني على الخاص و لو مرة واحدة لاني لا اعرف ايميلك و لا اسمك و عجيب منك انك تقول بانني لا اجيب علما اني لم اترك رسالة الا و قد اجبت عليها و لماذا تلقي بالتهم علي و انت لا تعرفني و تتكلم بكلام تقشعر له القلوب .. اسال يا اخي و كلي اذان صاغية و للتاكيد اكثر هذا ايميلي.
    alazawi.ahmed@gmail.com
    فقد تكون قد اخطات الايميل عند مراسلتي .

    ردحذف
  5. أشكرك على المجهود
    لكن أرجوك ضع مثالا على الأكواد

    ردحذف