الأربعاء، 14 أغسطس، 2013

إضافة صندوق إعجاب فيسبوك عائم مع تأثير الإضاءة - على طريقة الـ PopUp - يظهر مرة واحدة فقط



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

تَمَّ شرح أداة مماثلة سابقا في الدرس التالي : كيفية إضافة صندوق إعجاب صفحة الفيسبوك عائم بوسط مدونة البلوجر - على طريقة PopUp لكن الجديد في الأمر هنا و الأكثر تميزا هو تأثير الإضاءة بالإضافة إلى ظهور الأداة مرة واحدة فقط للزائر بهدف عدم إزعاج زوار مدونتك / موقعك.


طريقة تركيب هذه الإضافة على مدونة البلوجر :

1- توجه إلى لوحة التحكم البلوجر لمدونتك, و اختر تخطيط.

2- ثم إضافة أداة ثم اختر HTML/Javascript والآن ألصق داخل المستطيل الكود التالي :

<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(http://3.bp.blogspot.com/-NRmqfyLwBHY/T4nwHOrPSzI/AAAAAAAAAdQ/8b9O7O1q3c8/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;
}
</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(100).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/afkarpro.ap&width=402&height=255&colorscheme=light&show_faces=true&border_color=%23E2E2E2&stream=false&header=false'


style='border: none; overflow: hidden; margin-top: -19px; width: 402px; height: 230px;'></iframe>

</div></div>

3- بعد إضافة الكود أعلاه، قم بتغيير www.facebook.com/afkarpro.ap بعنوان صفحة الفيس بوك الخاصة بك، ثم إحفظ الأداة.

هذا كل شيء، لقد قمت لتوك بتركيب الأداة.

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




ـ
روابط هذه التدوينة قابلة للنسخ واللصق
URL
HTML
BBCode

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

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

    ردحذف
    الردود
    1. السلام عليكم ورحمة الله وبركانة

      يا أخي الكريم، لقد تمكنت من تركيب الإضافة بنجاح 100% دون أن تدري :)

      فعند دخولي لمدونتك من خلال حسابك جوجل بلس رأيت صندوق إعجاب فيسبوك عائم مع تأثير الإضاءة - على طريقة الـ PopUp

      و الدليل في الرابط الآتي : http://bit.ly/15xGJct

      كما ذكرت في الموضوع الإضافة تظهر مرة واحدة لعدم إزعاج الزوار.


      *** لكن إن أردت جعلها تظهر دائما ما عليك إلا أن تغير expires: 7 بـ expires: 0 في الكود

      أرجو أن أكون قد أفدتك

      حذف
  2. ا لسلام عليكم ورحمة الله وبركاتة اخى الكريم ابوعبدالله فعلان الاضافة كنت شغالة بس بظهر مرة وحدة بس ودى حاجة جميلة جدا علشان موش تسبب ازعاج للزائر اشكرا جد وانا دايما معاك واتمنا اشوف كل الجديد دايما

    ردحذف
  3. اخي كيف اضع مواضيع قد تهمك زي الموجوده في مدونة حضرتك شكرا علي الإجابة وأيف ع الإزعاج

    ردحذف
    الردود
    1. يمكنك أخي تركيب هاك مواضيع قد تهمك أو مواضيع ذات صلة أسفل كل تدوينة مثل مدونة أفكار-برو بسهولة كبيرة بعد مشاهدة الموضوع على الرابط التالي : هــنـــــا

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

    ردحذف
    الردود
    1. و عليكم السلام و رحمة الله و بركاتة

      عليك بتغيير رابط واحد فقط في الكود ألا و هو رابط صفحة الفيس بوك.

      إذن عليك بمسح رابط صفحة الفيس بوك الخاصة بي : www.facebook.com/afkarpro.ap و وضع مكانه رابط صفحة الفيس بوك الخاصة بك.

      أرجو أن أكون قد أفدتك :)

      تحياتي :>)

      حذف
  5. اخي الكريم كيف بدي رتب المخطط عن طريق الجوال جربت ومانجح انا استخدم جوال جلكسيs3

    ردحذف
  6. شكرا لك
    طريقة إضافة صندوق إعجاب الفيس بوك منبثق ومظلل Pop-up Box
    http://hun4dred.blogspot.com/2014/03/pop-up-box.html

    ردحذف
  7. شكرا لك أخي الكريم على هده الإضافة

    ردحذف
  8. ممتاز جدآ
    اريد كيفيه اضافتهم مثل ما بمدونتك هنا

    ردحذف