ورقة مطوية بتقنية JQuery
في أحيان كثيرة، و نحن نجول بين صفحات الإنترنت، ما يجذب انتباهنا شيء ما داخل هذا الموقع أو ذاك،
و ربما يكون هذا الشيء سببا في قضائنا وقتا إضافيا داخل هذا الموقع، و هذا أمر إن دل على شيء،
فإنما يدل على أن صاحب هذا الموقع قد نجح في مهمته، و بالتالي ساهم في تحسين أداء موقعه.
و من الأشياء الجميلة، التي تساهم في جذب انتباه الزائر لأمر معين داخل موقعك، استعمال تقنية الورقة المطوية،
و هي عبارة عن ورقة، أو جزء صغير من ورقة يظهر بالجانب الأيمن أو الأيسر بأعلى الموقع، يفتح عند مرور الماوس،
يؤدي إلى رابط آخر أنت تحدده، فيمكنك استعمال هذه التقنية مثلا للترويج لمنتوج معين، أو إشهار موقع، أو إضافة إعلان…
اليوم إن شاء الله، شأشرح لكم طريقة إضافة ورقة مطوية داخل موقعك باستخدام تقنية الـ jQuery، على بركة الله.
أولا شاهد المثال أسفله – انظر أعلى الصفحة جهة اليمين.
معاينة مباشرة
طريقة الاستخدام :
إضافة ورقة مطوية بموقعك أمر في غاية البساطة، فما عليك إلا أن :
1 - تحميل الملف من هنا ...
2 - فك الضغط عن الملف، ثم ارفع المجلد المسمى peelback إلى الدليل الرئيسي لموقعك،
ليكون بهذا الشكل :www.sitename.com/peelback على أن sitename تمثل اسم موقعك.
3 - الآن ضع الكود التالي بمنطقة الرأس، أي بين الوسمين
<head/>الكود هنا<head>
الكود هنا :
<!-- بداية كود صفحة مطوية -->
<script src="peelback/jquery-1.5.2.min.js"></script>
<script src="peelback/peelback.js"></script>
<script>
$(function() {
$('body').peelback({
adImage : 'peelback/imgs/maktoob.png',
peelImage : 'peelback/imgs/peel.png',
clickURL : 'http://forum.maktoob.ma/',
smallSize: 50,
bigSize: 500,
gaTrack : true,
gaLabel : '#1 Stegosaurus',
autoAnimate: true
});
});
</script>
<!-- نهاية كود صفحة مطوية -->
إشارة : إذا كنت تستخدم منتديات vBulletin أو PBBoard، ضع الكود في آخر ملف الـ Header.
هام : إذا أردت استخدام هذه التقنية داخل منتدى، أو مدونة مثلا، و كان هذا المنتدى أو المدونة على مجلد فرعي،
مثلا sitename.com/vb ارفع الملف peelback داخل هذا المجلد الفرعي.
شرح الكود :
adImage : يمثل رابط الصورة المخفية وراء الورقة المطوية، يفضل أن يكون حجم الصورة 600 بيكسل عرض، و 450 بيكسل ارتفاع.
peelImage : رابط صورة الورقة المطوية.
clickURL : هنا ضع رابط الإعلان، المنتدى، المدونة…
انتهى الشرح، أليس الأمر في غاية البساطة. إذا واجهتك أي مشكلة في التركيب،
فقط اترك تعليقا على الموضوع توضح فيه مشكلتك، و أنا بعون الله سأساعدك في حلها.
بالتوفيق للجميع.
