إضافة مربع الفيسبوك بشكل عائم و منزلق Fan Box

بسم الله الرحمن الرحيم

 

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

facebook 

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

 

أتركك الأن مع معاينة الإضافة و شرح التركيب

 

view demo

1- توجه إلى لوحة تحكم المدونة

2- تصميم ثم تحرير HTML

3- إبحث عن الوسم التالي </head>

4- ثم ضع فوقه مباشرة الكود التالي

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript">
jQuery.noConflict();
jQuery(function (){
jQuery(".slide_likebox").hover(function(){
jQuery(".slide_likebox").stop(true, false).animate({right:"0"},"medium");
},function(){
jQuery(".slide_likebox").stop(true, false).animate({right:"-250"},"medium");
},500);
return false;
});
</script>

5- بعد ذالك إبحث عن الكود التالي ]]></b:skin>

6- و ألصق هذا الكود فوقه مباشرة

.slide_likebox {
float:right;
width:288px;
height:345px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMaw60OkeM1SCwJVwqgmheNDLkqBzSpOG_Hzub9KaRGDOFAGw48j1N44wY7ivyxZzWWAgObHt1zbJhR9BemFVZtd3Qaz_hyphenhyphenlkkZfDVB1KdauQm5f6kCOG19hjAQNJ437GoMDPY6Q-uNoI/) no-repeat !important;
display:block;
right:-250px;
padding:0;
position:fixed;
top: 130px;
z-index:1002;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
div.likeboxwrap {
margin-top:2px;
margin-left:-5px;
width:238px;
height:325px;
background-color:#fff;
overflow:hidden;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
div.likeboxwrap iframe {margin:-1px}

7- قم بحفظ القالب الأن

 

بعد وضع هذه الأكواد توجه إلى تصميم عناصر الصفحة و قم بإضافة أذاة Html/JavaScript و ضع بها الكود التالي

<div class="slide_likebox"> <div style="color: rgb(255, 255, 255); padding: 8px 5px 0pt 50px;"><span><div class='likeboxwrap'><iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com/Psi.Arabe&amp;width=238&amp;colorscheme=light&amp;connections=15&amp;stream=false&amp;header=false&amp;height=350" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:228px; height:320px;" allowtransparency="true"></iframe></div></span></div></div>

الأن قم بتغير ما هو باللون الأحمر بإسم صفحتك على ال Facebook ثم إحفظ الأداة و تمتع بالإضافة الرائعة.

 

أتمنى أن يكون موضوع اليوم قد نال إعجابك، و إن فعل فلا تبخل علينا بتعليقاتك

إذا أعجبك الموضوع فشاركه مع أصدقائك فلن يأخد منك الأمر سوى 5 ثوان :)

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

  1. درس أكثر روعة شكرا لك أخي منير.

    ردحذف
  2. @الباشق الإسلاميالعفو أخي الباشق

    و الله إشتقنا لتعليقاتك فلا تطل غيبتك عنا

    تحياتي لك

    ردحذف
  3. بسـ الله الرحمن الرحيم ـم

    مجهود رائه ما شاء الله وإستفدت من دروسك كتير
    وبارك الله فيك
    قمت بإضافة النافذة الجانبية المنزلقة
    وفعلاً ظهرة النافذة
    وإستبدلت اللون الأحمر مرة بعنوان المجموعة ومرة بعنوان الفيسبوك
    لكن دائما النافذة تظهر بدون عنوان
    بها رسالة خطأ معين
    وهذا عنوان المدونة
    http://ladybird199.blogspot.com/
    وشكراً

    ردحذف
  4. انا ايظا وضعتها وضهرت عندي لكن نفس مشكله زهره الصبار تضهر بدون محتوى فارغه
    http://shehryar-group.blogspot.com/

    اتمنى الرد

    ردحذف
  5. @زهرة الصبار شكرا لك أختي الكريمة على هذا الكلام الجميل.

    و بخصوص المشكلة إن شاء الله سأبحث عن الحل و أضيفه هنا أو في موضوع مستقل.

    فأرجوا أن تمنحوني القليل من الوقت

    ردحذف
  6. @waleed sabr أهلا بك أخي الكريم

    و سيثم البحث عن الحل في القريب إن شاء الله

    ردحذف
  7. شكرااا على الاضافة الجميلة
    تم التركيب فى مجلة ليالى

    http://laialee.blogspot.com

    ردحذف
  8. @Asmaa Fayez
    أهلا بك أختي أسماء و شكرا على كلام اللطيف.

    ردحذف
  9. @mgffahim مبروك عليك الإضافة و المدونة منورة بمرورك.

    ردحذف
  10. مشكور ووتم الاضااأفة فيس بوك عن طريق مدونتي
    المدونة اسمها الاساطير لاخبار المصارعة
    http://legend-wwe24.blogspot.com
    صفحة المدونة لايك ي شباب
    http://www.facebook.com/alasatyr.news.wwe
    ....
    والله موقعكم افضل موقع ع الاطلاق حقيقة الموقع ذا افادني كثير ولايك لصفحتكم
    تحياتي ..
    شادي

    ردحذف
  11. Salam, Khouya Ma3rftch 3llach Mni kandir had fun box, slider f page diyalli makayb9ach ikhdam. Et Merci

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

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

    ردحذف
  14. كل ما ساقوله في حقكم قليل وبالتالي ادعوا الله ان يجعله في ميزان حسناتكم اتشرف باعطاءكم لي رايكم في مدونتي فرايكم يهمني عسى ان لا يكون فيها خطا ما وشكرا جزيلا لكم

    http://almaghribiat.blogspot.com/

    ردحذف
    الردود
    1. شكرا اختي الكريمة

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

      تحياتي

      حذف
  15. عناية المحترام
    في البدء أحب أن اشكرك علي مجهودك الرائع والمبدع ، وهذا أن دل يدل علي انسان لديه حس الابداع والعلم .
    أخي العزيز لقد قمت بتحميل الكود بنجاح وتم خروج المربع المنزلق ، ولكن توجد مشكلة وهي أن المرابع فارغ بدون اي رابط اي (( ابيض )) .
    نرجو منكم فضلا لا أمراً مساعدتنا في حل هذا الخطأ .
    ولك منا فائق الاحترام

    ردحذف
  16. شكرا .. ولكن فيه مشكلة في ذر مشاركة :]

    ردحذف