الصفحة الرئيسية >> الدروس >> دروس بناء المواقع >> دروس تقنية تهمك في بناء موقعك ! >>

نافذة الماسنجر .. مساحة إعلانية جديدة في موقعك !

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

اضــــغـــط هـــــنــــــا لـــتــحـــمـــيـــل  الــســكـــربــــت

حجم البرنامج : 10.8 KB

 اترككم الآن مع الشرح ..


أولاً .. قم بفتح الملف المضغوط الذي قمت بتحميله قبل قليل .. ستجد فيه ثلاثة ملفات .. وهي :

1- code.txt ( وفيه الكود الذي تضعه في صفحتك )

2- msn.gif ( وهي الصورة التي تظهر أسفل يسار الصفحة )

3- staticlogo.js ( وهو الملف الذي تقوم بالتعديلات عليه بما يتناسب مع موقعك )

 


قم بفتح ملف code.txt ثم انسخ الكود الموجود فيه .. ثم افتح برنامج الفرنت بيج .. ومن قائمة :

أدوات >> مكوّن ويب

 


بعد ذلك ستظهر لك نافذة .. طبّق عليها مافي الصورة التالية .

ثم أضغط على زر ( إنهاء ) .


بعد ذلك ستظهر لك نافذة فيها مساحةٌ خاصة لوضع النص فيها .. قم بلصق الكود فيها ..

ثم اضغط على زر ( موافق )


بعد ذلك قم بنقل ملف msn.gif وملف staticlogo.js إلى نفس المجلد الذي يحوي الصفحة التي وضعت فيها الكود قبل قليل .

مثال توضيحي : قـُمتَ بتنفيذ الخطوات السابقة .. وبعد أن ادرجت الكود في صفحتك .. قمت بحفظها في مجلد My .. فعليك الآن أن تنقل ملف msn.gif وملف staticlogo.js إلى مجلد My .


قم بفتح ملف staticlogo.js بواسطة برنامج المفكرة .. .. ستجد فيه الكود التالي : ( قم بتغيير النصوص الملونة باللون الأحمر لما يناسبك )  ( النصوص الملونة باللون البنفسجي هي شرح للمراد تغييره وهي ليست موجودة في الملف .. انما انا قمت بإضافتها هنا )

///////////////////////////////////////////////////////////////////
/*Site Logo Script (Geocities Watermark)
© Dynamic Drive (www.dynamicdrive.com)
For full source code, installation instructions,
100's more DHTML scripts, and TOS, visit http://www.dynamicdrive.com/ */
///////////////////////////////////////////////////////////////////

//edit the below 5 steps

// 1) substitute 116 and 42 with the width and height of your logo image, respectively
var logowidth=196 (عرض  الصورة.. اتركه كما هو )
var logoheight=120 ( طول الصورة .. اتركه كما هو )
var logoimage=new Image(logowidth,logoheight)

// 2) change the image path to reflect the path of your logo image
logoimage.src="http://aborenaz.net/images/msn2.gif" ( رابط الصورة )

// 3) Change url below to the target URL of the logo
var logolink="http://aborenaz.net/e3lane.htm" ( رابط الموقع الذي يذهب اليه الزائر )

// 4) change the alttext variable to reflect the text used for the "alt" attribute of the image tag
var alttext="Click here" ( النص الذي يظهر على الصورة عند وقوف مؤشر الماوس عليها )

// 5) Finally, below variable determines the duration the logo should be visible after loading, in seconds. If you'd like the logo to appear for 20 seconds, for example, enter 20. Entering a value of 0 causes the logo to be perpectually visible.
var visibleduration=30 ( مدة بقاء البنر بالثانية )

// Optional parameters
var Hoffset=5 //Enter logo's offset from left edge of window (edit only if you don't like the default offset)
var Voffset=10 //Enter logo's offset from bottom edge of window (edit only if you don't like the default offset)

///////////////////////////Do not edit below this line/////////////////////////

var ie=document.all&&navigator.userAgent.indexOf("Opera")==-1

var watermark_obj=ie? document.all.watermarklogo : document.getElementById? document.getElementById("watermarklogo") : document.watermarklogo

function insertimage(){
if (ie||document.getElementById)
watermark_obj.innerHTML='<a href="'+logolink+'"><img src="'+logoimage.src+'" width="'+logowidth+'" height="'+logoheight+'" border=0 alt="'+alttext+'"></a>'
else if (document.layers){
watermark_obj.document.write('<a href="'+logolink+'"><img src="'+logoimage.src+'" width="'+logowidth+'" height="'+logoheight+'" border=0 alt="'+alttext+'"></a>')
watermark_obj.document.close()
}
}

function positionit(){
var dsocleft=ie? document.body.scrollLeft : pageXOffset
var dsoctop=ie? document.body.scrollTop : pageYOffset
var window_height=ie? document.body.clientHeight : window.innerHeight

if (ie||document.getElementById){
watermark_obj.style.left=parseInt(dsocleft)+5+Hoffset
watermark_obj.style.top=parseInt(dsoctop)+parseInt(window_height)-logoheight-Voffset
}
else if (document.layers){
watermark_obj.left=dsocleft+5+Hoffset
watermark_obj.top=dsoctop+window_height-logoheight-Voffset
}
}

function hidewatermark(){
if (document.layers)
watermark_obj.visibility="hide"
else
watermark_obj.style.visibility="hidden"
clearInterval(watermarkinterval)
}

function beingwatermark(){
watermarkinterval=setInterval("positionit()",50)
insertimage()
if (visibleduration!=0)
setTimeout("hidewatermark()",visibleduration*1000)
}

if (ie||document.getElementById||document.layers)
window.onload=beingwatermark

 


 


بعد ان تنتهي من عمل التعديلات في ملف staticlogo.js .. قم برفع الثلاث ملفات إلى موقعك مع الصفحة التي قمت بوضع الكود فيها .. ثم اذهب وشاهدها .. ستجد نافذة الماسنجر تظهر اسفل يسار الصفحة !

لكن .. قد تسأل وتقول .. كيف أقوم بصنع تصميم خاص مثل هذا :

لمعرفة ذلك .. اتجه إلى درس [ طريقة صنع نافذة الماسنجر ! ] في قسم دروس التصميم .


أعلى الصفحة

انتهى الدرس

كاتب الدرس / ابو ريناز

الإستفسارات التي وصلتني على الإيميل : -

( اضغط هنا إذا كان عندك أي استفسار على الدرس )

لايوجد استفسارات  ..

 جــــمـــــ الحقوق محفوظة ــــــيـع لـ موسوعة ابو ريناز للدروس التقنية ©

w w w . a b o r e n a z . c o m