إضافة نافذة منبثقة للإنضمام إلى متابعي المدونة

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

مراحل تركيب الإضافة

1. أدخل إلى لوحة تحكم المدونة في بلوجر.
2. إختر قالب المدونة التي تود تطبيق الشرح فيها.
3. إضغط على تحرير HTML ( قم بأخد نسخة إحتياطية للقالب ).
4. إبحث عن الوسم ]]></b:skin> و أضف الكود التالي قبله مباشرة :

#teq_popup { position: fixed; top: 100px; z-index: 9999; display: none; padding: 0px; right: 600px; border: 10px solid rgba(82, 82, 82, 0.7); -webkit-background-clip: padding-box; /* for Safari */ background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */ -webkit-border-radius: 8px 8px 8px 8px; -moz-border-radius: 8px 8px 8px 8px; border-radius: 8px 8px 8px 8px; width: 400px; height: 375px; overflow: hidden; }
#teq_popup span { font-size: 20px !important; font-weight: bold !important; }
#teq_popup h1 { background: #6d84b4 url(https://sites.google.com/site/intoarb/images/locker.png) 98% no-repeat; border: 1px solid #3b5998 !important; color: #FFFFFF !important; font-size: 20px !important; font-weight: 700 !important; padding: 5px 19px !important; margin: 0 !important; overflow: hidden !important; }
.b4p_area { font-size: 12px !important; font-weight: normal !important; height: 265px !important; padding: 1px !important; background: #fff !important; border-bottom: 2px solid #ddd; overflow: hidden !important; }
#b4p_footer { text-align: right; background: #F2F2F2 !important; height: 56px !important; padding: 10px !important; overflow: hidden !important; }
#b4p_close { float: left; background-color: #eee !important; border: 1px solid #ccc !important; color: #111 !important; font-weight: bold !important; padding: 5px 8px 5px 8px !important; text-decoration: none !important; display: inline-block !important; outline: none !important; position: relative !important; font-size: 18px !important; margin: 1px !important; }
#b4p_close:active { top: 1px; right: 1px; }

5. إبحث عن الوسم <body... و أضف الكود التالي أسفله مباشرة :

<script type='text/javascript'>
jQuery(document).ready(function() {

function makingdifferent_ppopup()  {
  var sec = 10
  var timer = setInterval(function() {$(&#39;#b4p_footer span&#39;).text(sec--);if (sec == 0) {$(&#39;#teq_popup&#39;).fadeOut(&#39;slow&#39;);clearInterval(timer);}},1000);
  var p_wh = jQuery(window).height();
  var p_pph = jQuery(&#39;#teq_popup&#39;).height();
  var p_fromtop = jQuery(window).scrollTop()+50;
  jQuery(&#39;#teq_popup&#39;).css({&#39;top&#39;:p_fromtop});
 }

if (document.cookie.indexOf(&#39;RunOnce=true&#39;) == -1) {
 var expires = new Date((new Date()).valueOf() +  1000 * 60 * 60 * 24 * 30);
 document.cookie = &quot;RunOnce=true;expires=&quot; + expires.toUTCString();

 jQuery(window).fadeIn(makingdifferent_ppopup).resize(makingdifferent_ppopup)
    var p_leftm = 500;
    jQuery(&#39;#teq_popup&#39;).animate({opacity: &#39;1&#39;, left: &#39;0&#39; , left:  p_leftm}, 0).show();
    jQuery(&#39;#b4p_close&#39;).click(function() {jQuery(&#39;#teq_popup&#39;).animate({opacity: &#39;0&#39;, left: &#39;-5000000&#39;}, 1000).show();}); 
}
});
</script>
<div id='teq_popup'>
<h1>إنظم لصفحتنا على الفيسبوك</h1>
<div class='b4p_area'>
<iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/teqniweb&amp;width=375&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23fff&amp;stream=false&amp;header=false&amp;height=250' style='border:none; overflow:hidden; width:375px; height:250px;'/>
</div>
<div id='b4p_footer'>
من فضلك إنتظر قليلا...<span>10</span> ثوان
<a href='#' id='b4p_close' onclick='return false;'>إغلاق النافدة</a>
</div>
</div>

بعض التوضيحات البسيطة وما يجب تغييره :

• ما باللون البرتقالي : رابط صفحة الفيسبوك الخاص بك.
• ما باللون الأخضر : العداد التنازلي بالثواني (يبدأ بالعدد 10)
• ما باللون الأصفر : وهو خاص بتاريخ صلاحية الكوكيز (Cookies)، في الكود الخاص بنا أضفنا للوقت فتح الموقع (أي الأحد 21 يوليوز 2019) شهرا كاملا والذي يعني 1000 * 60 * 60 * 24 * 30 (أي يوم الثلاثاء 20 غشت 2019)، كما هو موضح بالصورة أسفله.
• year: For 0 ≤ year ≤ 99, 1900 is added.
• month: 0–11 (0 is January, 1 is February, etc.)
• date: 1–31
• hours: 0–23
• minutes: 0–59
• seconds: 0–59
• milliseconds: 0–999

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