صندوق الإعجاب الخاص بالفيسبوك روعة

مرحبا أصدقاء في مدونة برو ريراكـ. إضافة رائعة لصندوق الإعجاب الخاص بالفيسبوك تظهر لزائر مدونتك عند انتهاء تحميل المدونة وتخفي محتواها لمدة 20 ثانية وتختفي بعدها الى حين اعادة تحميل المدونة،

+ طريقة الإضافة :

لوحة التحكم ==> القالب ==> تحرير HTML 

يمكنك اضافته في المكان الذي تريد في الإضافات فهو دائما يظر وسط المدونة

الأن أضف الكود التالي في المكان الذي تريد

<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%;
}
#JasperRoberts {
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;
}
#TheBlogWidgets {
float:right;
cursor:pointer;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj79ZOWg0hlCLYlAqGZAOPXSDdtsOWQLoX9p8FMwbJKoU0mWsvXGIA77HF9w4GmpUFp5P0gZzQNNliOj1Ysjr73-xdXEkovcwPKf7GehXUKtOMKGZEQS1VlGS06hAUkaNVelh0IxQ503_80/s1600/TheBlogWidgets.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');
$('#TheBlogWidgets, #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='JasperRoberts'>
<div id='TheBlogWidgets'>
</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/hrirak1&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 style="color:#a8a8a8;font-size:8px;" id="linkit">Powered by <a rel="nofollow" style="color:#a8a8a8;font-size:8px;" href="http://jasperroberts.com">Jasper Roberts Consulting</a> - <a style="color:#a8a8a8;font-size:8px;" href="http://www.theblogwidgets.com">Widget</a></span></center>
</div>
</div>

ابحث عن http://www.facebook.com/hrirak1 في هذه الإضافة واتبدلها برابط صفحتك 

 يمكنك تغيير 20 ثانية الى الوقت الذي تريد 
ابحث عن 

.delay(20000)

وغير القيمة 20000 علما أنها تساوي 20 ثانية
لأن الثانية الواحدة تساوي 1000
و10 ثواني تساوي 10000
و 60 ثانية تساوي 60000

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

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

الى هنا ينتهي الشرح وبالتوفيق للجميع