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

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


أولا: الدخول الى لوحة التحكم ثم تخطيط وإضافة أداة HTML 
ثانيا: نضع بداخل الأداة (وتكون غير معنونة) الكود التالى بعد اجراء بعض التعديلات التى سنذكرها بعد الكود

<!-- Facebook Popup Widget START --><!-- Brought to you by www.abu-iyad.com - www.abu-iyad.com -->
<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(http://3.bp.blogspot.com/-NRmqfyLwBHY/T4nwHOrPSzI/AAAAAAAAAdQ/8b9O7O1q3c8/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>
<!-- Facebook Popup Widget END. Brought to you by www.abu-iyad.com - www.abu-iyad.com -->
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 على نشر الإضافة.

هناك 17 تعليقًا:

  1. شكرا أخي على الخاصية
    لو سمحت طريقة تحويل واجهة المشاركات على الصفحة الرئيسية في blogger لتظهر كما في مجلة myegy

    ردحذف
  2. الف شكر يا باشمهندس محمد رابنا يخليك لينا ودائما الى الاحسن

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

    ردحذف
  4. @برمجيات
    شكرا جزيلا على تعليقك واعجابك بالموضوع. وبالنسبة لسؤالك تم الرد عليه خلال رسالة على البريد من قبل. وللتوضيح هنا.. هذخ ليست طريقة أو اضافة هذا الشكل فى تصميم القالب نفسه ويجب عليك البحث عن قالب يؤدى شكل شبيه له وبالتالى يمكنك استخدام الوقالب الديناميكية من بلوجر شاهد تلك المدونة

    http://iglal.blogspot.com/?view=flipcard

    ردحذف
  5. @Said Ebeid
    صديقى الصدوق أهلا بك وتشرفنا دائما وأبدا ..

    ردحذف
  6. @naser shalby

    عليكم السلام ورحمة الله وبركاته
    أهلا وسهلا أستاذى العزيز ناصر. سيتم البحث عن حل مشكلة الأن . ونعتذر على الخطأ

    ردحذف
  7. السلام عليكم
    الكود لم يعمل معي
    http://jeddahsouk.blogspot.com/

    ردحذف
  8. @المتجر الالكتروني للعدسات اللاصقة

    هل قمت بقرائة التنبيه بأسفل التدوينة؟

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

    ردحذف
  9. شكرا لكم علي الموضوع
    www.al-wafe.com

    ردحذف
  10. شكرا
    www.egycool.com

    ردحذف
  11. thanks

    http://physiquetlemcen.blogspot.com/

    ردحذف
  12. http://sinjiechadid.blogspot.com/ هذه مدةنتي هل يمكنك مساعدتي في بعض التفاصيل اذا كان ممكنا

    ردحذف
  13. لم تعمل الأضافة
    http://www.video-2lak.com/

    ردحذف
  14. الصندوق مش راضي يظهر في مدونتي

    ردحذف

مدونة أبو إياد تصميم بلوجرام جميع الحقوق محفوظة 2016

اعلان مخفى فى الرئيسية