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

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

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

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

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

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

<!--  الإضافة الأساسية colorbox -->
<link href='http://alblogger-gen.googlecode.com/svn/trunk/colorbox/style3/colorbox.css' media='screen' rel='stylesheet'/>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js'/>
<script src='http://alblogger-gen.googlecode.com/svn/trunk/colorbox/colorbox.js'/>
<!-- تشغيل رسالة الترحيب -->
<script type='text/javascript'> 
//<![CDATA[
jQuery(document).ready(function(){ 
if (document.cookie.indexOf('visited=true') == -1) { 
var DaysTo = 1000*60*60*24*30; 
var expires = new Date((new Date()).valueOf() + DaysTo ); 
document.cookie = "visited=true;expires=" + expires.toUTCString(); 
$.colorbox({ inline:true, href:"#mainbox"}); 
} }); 
//]]>
</script>     
<!-- محتوى الرسالة  -->  
<div style='display:none;'>
<div id='mainbox' style='width:400px; height:650px; '>
<center>

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

</center></div> </div>

السطر (٢) : تضمين خصائص 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 ، وبدون هذا الوعاء المختفي ستظهر الرسالة في المدونة وتشوهها.

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

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

۞مثال مباشر ◄

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

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

<link href='http://alblogger-gen.googlecode.com/svn/trunk/colorbox/style3/colorbox.css' media='screen' rel='stylesheet'/>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js'/>
<script src='http://alblogger-gen.googlecode.com/svn/trunk/colorbox/colorbox.js'/>
<script type='text/javascript'> 
//<![CDATA[
jQuery(document).ready(function(){ 
if (document.cookie.indexOf('visited=true') == -1) { 
var Days = 1000*60*60*24*30; 
var expires = new Date((new Date()).valueOf() + Days); 
document.cookie = "visited=true;expires=" + expires.toUTCString(); 
$.colorbox({ inline:true, href:"#mainbox"}); 
} }); 
//]]>
</script>     
<div style='display:none;'>
<div id='mainbox' style='width:400px; height:600px; '>
<center><br/><br/>
<style type='text/css'>
/* تنسيق بدن الرسالة */
#mainbox h3 { background-color: #F7F7F7; border-bottom: 1px solid silver; border-right: 10px solid silver; color: orange; font-family: Tahoma; font-size: 11pt; font-weight: lighter; height: 25px; padding: 5px; margin-bottom: 7px; }
/* تنسيق صندوق اشتراك القائمة البريدية */
#mailbox { border-radius: 10px 10px 10px 10px; box-shadow: 0 0 30px silver inset; height: 50px; margin: 10px 0; padding: 25px 10px 10px; width: 300px; }
#mailbox-txt { background: none repeat scroll 0 0 #FFF!important; border: 1px solid #D2D2D2; color: #A19999; float: right; font-size: 12px; height: 25px; text-align: center; width: 200px; margin: 0; padding: 0 8px; }
#submitbutton { background: none repeat scroll 0 0 #F66303; border: 1px solid #F66303; color: #FFF; cursor: pointer; font: lighter 10pt/27px tahoma,sans-serif; height: 27px; text-shadow: 1px 1px 1px #333; margin: 0 0 0 5px; padding: 0 12px; }
</style>
<h3>تابع صفحتنا في شبكة قوقيل بلس واقترحها :</h3>
<script src='https://apis.google.com/js/plusone.js' type='text/javascript'/>
<g:plus href='https://plus.google.com/106675122873738446344'/>
<h3>تابع صفحتنا في الفيسيبوك:</h3>
<iframe allowTransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Falblogger.blog&amp;width=300&amp;height=180&amp;show_faces=true&amp;colorscheme=light&amp;stream=false&amp;border_color=%23DCDCDC&amp;header=false&amp;appId=100378033397966' style='border:none; overflow:hidden; width:300px; height:180px;'/>
<h3>ليصل جديدنا إلى بريدك تفضل بالاشتراك</h3>
<div id='mailbox'>
<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=alblogger&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
<input id='mailbox-txt' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;ادخل عنوان بريدك...&quot;;}' onfocus='if (this.value == &quot;ادخل عنوان بريدك...&quot;) {this.value = &quot;&quot;;}' type='text' value='ادخل عنوان بريدك...'/>
<input name='uri' type='hidden' value='alblogger'/>
<input name='loc' type='hidden' value='en_US'/>
<input id='submitbutton' type='submit' value='اشترك'/>
</form></div>
</center></div> </div>

قم بنسخ هذا الكود في القالب ويفضل يكون قبل إغلاقة وسم body أي قبل </body> ، والنتيجة ستكون كما في هذه المدونة التجريبية:  مــثـــال مبـاشــر . إذا واجهتك صعوبة تفضل باستخدام الكود السابق مع تغيير قيم مدونة البلوقر وصفحاتها إلى تلك الخاصة بمدونتك وهي:

١ غير معرّف صفحة مدونة البلوقر في قوقيل بلس (106675122873738446344) في السطر (28) بمعرّف صفحة مدونتك.

٢ غير اسم صفحة مدونة البلوقر في الفيسبوك ( alblogger.blog ) باسم صفحة مدونتك من السطر (30).

٣ غير معرّف حساب فيدبرنر الخاص بمدونة البلوقر ( alblogger ) بحساب مدونتك من السطرين (33) و (35).

الرسالة الترحيبية لم تعد تعمل ؟

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

سؤال وجواب !

* كيف أجعل الرسالة تظهر كل مرة للزائر ؟

حقاً هذه الطريقة مزعجة ولكن هي ممكنه، سأشرحها لتظهر كلما فتح الزائر الصفحة الرئيسية، ضع الكود التالي قبل إغلاق الوسم Body أي </body> :

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<script type='text/javascript'>
//<![CDATA[
jQuery(document).ready(function(){
$.colorbox({ inline:true, href:"#mainbox"});
});
//]]>
</script> 
</b:if>

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

<div id='mainbox' style='width:400px; height:650px; '>

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

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

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

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

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