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

أولا: الدخول الى لوحة التحكم ثم تخطيط وإضافة أداة 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%;
}
#MorganAndMen {
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/AVvXsEjohgM6pvTysZ9E6onmksdT6wemtUs5mVkPL5l91_Hl05Py88RYPoiEZ-Np04sJm4zbgh-TuZ_HpMiSvl9SOoS1RZC60tVWiZRIpCrrIYJi1YLy2pTU1hcLti4CAmlOkasnuUjG8nfeB_Mu/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='MorganAndMen'>
<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/abuiyad007&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">Powered by <a href="http://abu-iyad.com">Blog</a> - <a href="http://www.abu-iyad.com">Abu iyad Blog</a></span></center>
</div>
</div>

مدونة عراقي محترف

1- يمكنك التغيير فى إعدادات الكود التالى للتحكم فى وقت ظهور الصندوق للزوار. الـ 20000 تعادل 20 ثانية فاذا أحببت ظهوره بعد 1 ثانية عليك تغيير 20000 الى 1000 أو مثلا 3 ثوانى تغيره الى 3000 وهكذا.

(delay(20000.

مدونة عراقي محترف

2- يمكنك إظهار الصندوق للزائر عند زيارته لمدونتك فى كل مرة يدخل الى موضوع جديد حتى ولو قام بالإعجاب بها! وأنا اعتبرها طريقة تزعج الزائر منك ولا أنصح بها ولكن الخيار بيدك أنت. لتقوم بإلغاء ظهور الصندوق مع كل تحديث للزائر داخل صفحات مدونتك لا تحذف الكود التالى واذا أردت ظهوره مع كل تحميل لصفحات مدونتك قم بحذفه

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

مدونة عراقي محترف

3- يمكنك أيضا تغيير عرض وطول الصندوق من خلال width و height.

4- يجب عليك تغيير abuiyad007 الى اسم صفحة مدونتك على الفيسبوك.

هناك البعض سيريد إظهار صندوق الإعجاب عند زيارة الصفحة الرئيسية فقط فكيف ذلك؟ تابع الخطوة التالية لتعرف :)

<b:if cond='data:page.type == "index"'>
ضع هنا كود الإضافة بعد تعديله
</b:if>

مدونة عراقي محترف

بعد إضافة كود الإضافة قم بنسخة والذهاب الى تحرير HTML وابحث عن الوسم التالى وضع الكود فوقه أو قبله.

</body>

مدونة عراقي محترف

تنبية: تظهر مشكلة وهو مع الوقت لا يظهر الصندوق لك وستلاحظ ذلك والحل لهذه المشكلة هو حذف الكوكيز من متصفحك ولتفعل ذلك يجب عليك الاطلاع على هذا الرابط بعنوان (كيفية حذف الكوكيز من مختلف المتصفحات)

هناك إعدادات غير ذلك كلون خلفية الصندوق وكذلك صورة علامة X لاغلاق الصندوق وأيضا لون وحجم بعض الخطوط موجودة بمقدمة الكود يمكنك تغييرها كما تحب. شكر خاص للرائع James Morgan على نشر الإضافة.

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

مواضيع ذات صلة