رسالة انبثاقية تظهر للزائر مرة واحدة بتقنية الجيكيوري

type="html">

بسم الله، سأستعرض معك اليوم طريقة تركيب صندوق منبثق يحتوي على رسالة تظهر لزائر مدونتك لمرة واحدة فقط، وذلك اعتماداً على إضافة صندوق الضوء Colorbox التي أعتبرها الأفضل في مجالها لتأثير lightbox وقد شرحت استخدامها بالتفصيل أنصحك بشدة قراءة هذه التدوينة ستسهل عليك الكثير ( تأثير LightBox للصور ومقاطع اليوتيوب والفلاش والمواقع وأكثر! )، في العنوان كتبتُ وأكثر وهذه الإضافة الحالية من الأكثر. ما دفعني لشرح هذه الطريقة رغبتي في توسيع مدارك قارئ مدونة البلوقر لاستغلال الإضافات كما يجب وإدارة إضافات مدونته بشكل (مُرتب) ومنع التكرار وتحميل المدونة عبئ الارتباط بإضافات ليست ضرورية، سيتضح هذا خلال شرح هذه الإضافة!  فتابع معي ان كنت ما زلت تقرأ 

الفكرة الأساسية من الموضوع

الفكرة استغلال إضافة colorbox وتخصيصها للحصول على رسالة ترحيبية تحتوي على أزرار مشاركة الشبكات الإجتماعية مرة واحدة لزائر المدونة ( اعتماداً على الكوكيز ) ، في نفس الوقت ممكن تغيير محتوى الرسالة ليكون مقطع فيديو مثلاً أو إعلان ترويجي .. الخ. لكن التطبيق سيكون لصندوق منبثق يتضمن أزرار مشاركة للقيسبوك وقوقيل بلس وقائمة بريدية لظني أنها الأكثر طلباً ، التطبيق سيكون كما في الصورة التالية:

البناء الأساسي لإضافة رسالة الترحيب

يمكن تخصيص الإضافة لتكون قابلة لحمل أي محتوى ، هذا التخصيص عبارة عن كود يمكن حفظه كقالب رئيسي يمكن تغذيته بأي محتوى في المستقبل، سأشرح بنية الإضافة لفهم أوضح وبالتالي يمكنك التعديل وفق ما تحتاجه بنفسك:

 
 




هنا أكتب ما تشاء

 

السطر (٢) : تضمين خصائص CSS للإضافة الأساسية أقصد Colorbox وان كنت جاد وقرأت الموضوع المتعلق بهذه الإضافة ستعلم أن هناك خمسة ستايلات مختلفة، يمكنك معاينتها من خلال هذه المدونة التجريبية. يمكنك التغيير بين الستايلات الخمسة بتغيير الرقم من بين ( 1 الى 5 ) مثل: style3 …. الخ

السطر (٣) : تضمين مكتبة الجيكيوري ، وهنا خطأ شائع وهو تكرار هذه المكتبة لدرجة أني وجدت بعض المدونات كُررت فيها المكتبة سبعة مرات ثم يسال عن بطئ مدونته!.

السطر (٤) : تضمين الإضافة الأساسية colorbox. هام: ان كنت استخدمت إضافة colorbox التي شرحتها سابقاً فتجاهل الأسطر 2 ، 3 ، 4  . إنك ان فعلت فكأنك تلبس قبعتين !

الأسطر (٦) إلى (١٦) : هي المفتاح المشغل للرسالة الترحيبية مع التحكم في ظهورها لمرة واحدة كل 30 يوماً أو كلما حذف الزائر الملفات المؤقتة (الكوكيز) من متصفحة. في السطر (١٠) : يخزن المتغير DaysTo  توقيت ظهور الرسالة، التعبير ( 30*24*60*60*1000) تعني ( يومxساعةxدقيقةxثانيةxميللي ثانية ) ، وبالتالي لتغير التوقيت من شهر إلى اسبوع غير الـ (30) إلى (7) وهكذا

السطر (١٣) : هذا السطر يفعل إضافة colorbox لمحتوى الرسالة التي ستظهر، هذه الرسالة موجودة في قسم div له المعرّف ( mainbox ) .

السطر (١٨) : بداية قسم div عبارة عن وعاء يُخفي محتوى الرسالة ، وقلنا يُخفي لأنه يحتوي على display:none ، وبدون هذا الوعاء المختفي ستظهر الرسالة في المدونة وتشوهها.

السطر (١٩) : بداية محتوى الرسالة وهذا سطر هام ففيه قيمة طول وعرض الرسالة ، عليك تغييرها حسب حجم الرسالة ، إذا ظهر الصندوق المنبثق باطارات مزعجة تأكد من هذه القيم !

هذا ما عليك فهمه ، الآن يمكنك كتابة أي رسالة تريدها لزوار مدونتك في موضع السطر (٢٢) ، أطلق العنان لمخيلتك!… وكمثال تطبيقي سأعرض تخصيص الإضافة لعرض صندوق مشاركة صفحة قوقيل بلس ، واعجاب الفيسبوك ، والاشتراك في القائمة البريدية …

۞مثال مباشر ◄

مثال تطبيقي: رسالة لمشاركة حسابات شبكات التواصل الاجتماعي

في هذا التطبيق سنكتب رسالة تتضمن أزرار الإعجاب والاقتراح والمتابعة للفيسبوك وقوقيل بلس بالإضافة إلى صندوق الإشتراك للقائمة البريدية، يمكنك الحصول على صندوق مشاركة قوقيل بلس من قالب مدونتك إذا كنت أضفته سابقاً أو من خلال هذه الصفحة، والحصول على صندوق إعجاب صفحة الفيسبوك من هنا ، وهناك عشرات التنسيقات لصندوق الإشتراك في القائمة البريدية …  بعد ترتيب هذه الأكواد وإضافة تنسيق للرسالة هذه النتيجة عندي:

 






تابع صفحتنا في شبكة قوقيل بلس واقترحها :
 

* كيف أغير مقاسات الرسالة لامنبثقة ؟
بتغيير قيمة العرض والطول في السطر 19 من الكود الأساسي ( الأول ) أي من هذا السطر:

* ظهور صورة ( visit imgboot.com ) !

لا أستخدم في الإضافات التي أقدمها والقوالب مواقع صور إلا بيكاسا، وقوقل كود. إذا ظهرت هذه الصورة فهذا يعني أن ثمة إضافة Lightbox أخرى على مدونتك. جرب على مدونة جديدة !

* كيف أضيف أداة متابعي صفحة المدونة في قوقيل بلس ؟

راجع هذا الموضوع: أداة متابعي Google+ لغير مدونات البلوقر

تحياتي العاطرة 

التسميات : الجيكيوري , انبثاقية , بتقنية , رسالة , للزائر , واحدة

• twitter
• share
• plus