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

 

بسم الله الرحمن الرحيم
الحمد لله خالق الأولين والآخرين وغافرذُنوب المُذنبين ومهلك الطغاة والجبارين الحمد لله أولاً وآخرا مبتدءاً ومنتهيا الحمد لله فى كل مكان وعلى أى حال وفى كل الأزمان والصلاة والسلام على النذير البشير صلى الله عليه وسلم .. أما بعد



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


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


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

النموذج الاول : كود اعلانات تتغير مع تحديث الصفحة :

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

بقلم العماد

عماد البدري : غالباً ما يفشل معظم الناس في الحديث عند التعريف بأنفسهم، ويعجبني في هذا المقام أن أنضم لمعظم الناس، فقد حاولت استفزاز نرجسيتي أكثر من مرة لمعرفة من أنا، أو على الأقل لأفتح المجال أمام (الأنا) لتعبّر عن ذاتها , صدقاً لم أجد الكثير لأخطه عن نفسي، إلا بعض عادات أداوم بين الفينة والأخرى على فعلها، وشخصيات أحب تبني أفكارها وآرائها، وأعتقد أن الإنسان يعرف بأقرانه، ومن خلال اهتماماته يمكنك سبر أغواره، ربما هي طريقة جميلة أن تعرفني من خلال ما أحب وما أكره، يمكنكم متابعتي والتواصل معي على صفحتي بتويتر @ ALEMAD5 أو عبر الفيسبوك AL EMAD