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

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

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



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

كود HTML:

<!--  الإضافة الأساسية 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>

الآن رسالة لمشاركة حسابات شبكات التواصل الإجتماعي:

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

كود HTML:

<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/>:

كود HTML:

<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 من الكود الأساسي (ألاول) أي من هذا السطر:

كود HTML:

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

إنتهى موضوعنا اليوم

أتمنى أن ينال إعجابكم فلا تبخلوا علينا بتعليقاتكم المشجعة 

ولاتنسوا مشاركة أصدقائكم للإفادة فقط