اضافة صندوق اعجاب منبثق

اضافة صندوق اعجاب منبثق

السلام عليكم ورحمة الله وبركاته يا زوار ومتتبعي مدونة

اليوم جئت لكم باضافة رائعة وإنشاء الله ستفيد كل من له مدونة ويريد زيادة متابعيه, الإضافة عبارة عن صندوق اعجاب فيسبوك منبثق, تظهر "تنبثق" الاضافة بعد 20 ثانية من تحميل الصفحة ويمكن تعديل على هذه الخاصية, وميزة الأخرة التي اعجبتني بهذه الاضافة هي عدم تكرار ظهورها لزائر نفسه إلى بعد اسبوع لكي لا ينزعج زائر من كثرة ظهورها وطبعا يمكن محواها إن لم تكن تريد هذه الخاصية,

شرح تنصيب 

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script> <style> #fanback { display:none; background:rgba(0,0,0,0.8); width:100%; height:100%; position:fixed; top:0; left:0; z-index:99999; } #fan-exit { width:100%; height:100%; } #fanbox { background:white; width:420px; height:270px; position:absolute; top:58%; left:63%; margin:-220px 0 0 -375px; -webkit-box-shadow: inset 0 0 50px 0 #939393; -moz-box-shadow: inset 0 0 50px 0 #939393; box-shadow: inset 0 0 50px 0 #939393; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; margin: -220px 0 0 -375px; } #fanclose { float:right; cursor:pointer; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh258FvbP6cGmStbbyS_IydUQrGQ9OlLZsw1ljDqpoa-pTyj-yeBloSnffYwTqzkd0SeW4N2CS1pAkXejwcAHHRTPFdfAl_r3cth6bApWEJZHC0G2azLnkBtArU96Xj7rsS9DEezDH0jHoE/s1600/fanclose.png) repeat; height:15px; padding:20px; position:relative; padding-right:40px; margin-top:-20px; margin-right:-22px; } .remove-borda { height:1px; width:366px; margin:0 auto; background:#F3F3F3; margin-top:16px; position:relative; margin-left:20px; } #linkit,#linkit a.visited,#linkit a,#linkit a:hover { color:#80808B; font-size:10px; margin: 0 auto 5px auto; float:center; } </style> <script type='text/javascript'> //<![CDATA[ jQuery.cookie = function (key, value, options) { // key and at least value given, set cookie... if (arguments.length > 1 && String(value) !== "[object Object]") { options = jQuery.extend({}, options); if (value === null || value === undefined) { options.expires = -1; } if (typeof options.expires === 'number') { var days = options.expires, t = options.expires = new Date(); t.setDate(t.getDate() + days); } value = String(value); return (document.cookie = [ encodeURIComponent(key), '=', options.raw ? value : encodeURIComponent(value), options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE options.path ? '; path=' + options.path : '', options.domain ? '; domain=' + options.domain : '', options.secure ? '; secure' : '' ].join('')); } // key and possibly options given, get cookie... options = value || {}; var result, decode = options.raw ? function (s) { return s; } : decodeURIComponent; return (result = new RegExp('(?:^|; )' + encodeURIComponent(key) + '=([^;]*)').exec(document.cookie)) ? decode(result[1]) : null; }; //]]> </script> <script type='text/javascript'> jQuery(document).ready(function($){ if($.cookie('popup_user_login') != 'yes'){ $('#fanback').delay(20000).fadeIn('medium'); $('#fanclose, #fan-exit').click(function(){ $('#fanback').stop().fadeOut('medium'); }); } $.cookie('popup_user_login', 'yes', { path: '/', expires: 7 }); }); </script> <div id='fanback'> <div id='fan-exit'> </div> <div id='fanbox'> <div id='fanclose'> </div> <div class='remove-borda'> </div> <iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php? href=http://www.facebook.com/theblogwidgets&width=402&height=255&colorscheme=light&show_faces=true&show_border=false&stream=false&header=false' style='border: none; overflow: hidden; margin-top: -19px; width: 402px; height: 230px;'></iframe><center> <span id="linkit"><a href="http://www.theblogwidgets.com/2013/08/facebook-popup-widget-with-lightbox.html">Facebook Like Box</a> <a href="http://www.theblogwidgets.com">Widget</a></span></center> </div> </div>

أولا انسخ الكود و افتح حساب بلوجر الخاص بك ثم ادهب إلى تخطيط

 وانقر اضافة أداة بعدها اختر "HTML/Javascript" الأن الصق كود الذي نسخته سابقا

ضبط الاضافة

أبحث عن http://www.facebook.com/theblogwidgets واستبدلها برابط صفحة فيسبوك خاصة بك

ة

بضبط الافتراضي تظهر الاضافة بعد 20ثانية من تحميل الصفحة ولكن يمكن تغير ذلك ابحث عن كود تالي استبدله بأي رقم تريد, 60ثوانية=60000. 10ثواني=10000. 1ثانية واحدة =1000

.delay(20000)

لو كنت تريد حذف خاصية عدم تكرار ظهور لكل زائر على حدة فيمكنك ذالك, 

ابحث عن كود تالي وقم بحذفه تماما وسيظهر صندوق كل مرة

$.cookie('popup_user_login', 'yes', { path: '/', expires: 7 });

لو كان عندكم مشاكل في تركيب الاضافة أو أي مشاكل أخرة مع هذه الاضافة فلا تترددوا بكتابتها كتعليق فمساعدتكم تسرني