الخميس، 7 فبراير 2013

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



أهلا و سهلا بكم زوار ومتتبعي مدونة أفكار Pro. 

في هذا الموضوع سنقوم بتركيب إضافة رائعة جدااا، وهي عبارة عن صندوق معجبي صفحة الفيسبوك عائمة بوسط مدونة البلوجر "Popup Facebook LikeBox".



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


الخطوة الأولى :

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

2- ثم أدخل إلى تحرير HTML, وضع علامة في خانة توسيع عناصر واجهة القالب "Expand Widget Template".

3- ابحث عن السطر أسفله بالضغط على CTRL+F. 
</head>

4- و ألصق فوقه الكود التالي :
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>


5- ثم قم بحفظ القالب

 الخطوة الثانية :

1- من لوحة تحكم البلوجر الخاصة بك قم بالدخول على تصميم القالب ثم اضغط على إضافة أداة واختر HTML/JavaScript.

2- ثم قم بنسخ الكود التالي وألصقه بالمكان المخصص له
<style type='text/css'>
#makingdifferentpopup{
position:absolute;
top:100px;
z-index:999;
display:none;
padding:0px;
right:600px;
border:10px solid #3B5998;
-webkit-border-radius:8px 8px 8px 8px;
-moz-border-radius:8px 8px 8px 8px;
border-radius:8px 8px 8px 8px;
width:400px;
height:360px;
overflow:hidden;
}
#makingdifferentpopup h1{
background:#6d84b4 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLtJTnKemTEqK8Oj3zFrn3lE1qJlZtb9rPjLZflbtaVTWeBywqZAL3K9lqsIJcSBIZ_tInrVskzDaf2KoWwpdTVrr3vqk4iv8uK1KxQsrd7qqLdtFR49fLkmm6CMCSWBeD6LZm_UbmNZzN/s1600/%5Bwww.afkarpro.blogspot.com%5Dh1.png) 98% no-repeat;
border:1px solid #3b5998 !important;
color:#FFFFFF !important;
font-size:20px !important;
font-weight:700 !important;
padding:5px !important;
margin:0 !important;
font-family:'"lucida grande",tahoma,verdana,arial,sans-serif !important;overflow:hidden !important;
}
.htmlarea{
font-size:12px !important;
font-weight:normal !important;
height:265px !important;
padding:1px !important;
background:#fff !important;
border-bottom:2px solid #ddd;
overflow:hidden !important;
}
#mdfooter{
background:#F2F2F2 !important;
height:56px !important;
padding:10px 10px 10px 10px !important;
overflow:hidden !important;
}
#mdclose{
float:right;
background-color:#eee !important;
border:1px solid #ccc !important;
color:#111 !important;
font-weight:bold !important;
padding:5px 8px 5px 8px !important;
text-decoration:none !important;
display:inline-block !important;
font-family:'"lucida grande",tahoma,verdana,arial,sans-serif !important;
outline:none !important;
position:relative !important;
font-size:14px !important;
margin:1px !important;
}
#mdclose:active{
top:1px;
left:1px;
}
.htmlarea span{
bottom:80px;
font:8px "lucida grande",tahoma,verdana,arial,sans-serif;
position:absolute;
right:6px;
text-align:right;
z-index: 99999;
}
.htmlarea span a{
color: #000;
text-decoration:none;
}
.htmlarea span a:hover{
text-decoration:underline;
}
</style>
<script type='text/javascript'>
jQuery(document).ready(function() {
function makingdifferent_ppopup()  {
var mdwh = jQuery(window).height();
var mdpph = jQuery("#makingdifferentpopup").height();
var mdfromTop = jQuery(window).scrollTop()+50;
 jQuery("#makingdifferentpopup").css({"top":mdfromTop});
}jQuery(window)
.scroll(makingdifferent_ppopup)
.resize(makingdifferent_ppopup)
//alert(jQuery.cookie('sreqshown'));
//var mdww = jQuery(window).width();
//var mdppw = jQuery("#makingdifferentpopup").width();
//var mdleftm = (mdww-mdppw)/2;
var mdleftm = 500;
//var mdwh = jQuery(window).height();
//var mdpph = jQuery("#makingdifferentpopup").height();
//var mdfromTop = (jQuery(window).scrollTop()+mdwh-mdpph) / 2;
jQuery("#makingdifferentpopup").animate({opacity: "1", left: "0" , left:
 mdleftm}, 0).show();
     jQuery("#mdclose").click(function() {
jQuery("#makingdifferentpopup").animate({opacity: "0", left: "-5000000"}, 1000).show(); });});
</script>

<div id="makingdifferentpopup">
<h1>انضموا إلى صفحة أفكارPro على الفيس بوك</h1>
<div class="htmlarea">
<iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fafkarpro.ap&amp;width=400&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23fff&amp;stream=false&amp;header=false&amp;height=250" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:400px; height:250px;" allowtransparency="true">
</iframe>
<span>
By <a href="http://www.afkarpro.blogspot.com/" target="_blank">AfkarPro</a> / <a href="http://afkarpro.blogspot.com/2013/02/add-facebook-type-pop-up-for-facebook-in-blogger.html/" target="_blank">+Get This!</a>
</span>
</div>
<div id="mdfooter">
<a href="#" id="mdclose" onclick="return false;">إغلاق</a>
</div></div>


 3- قم بالتعديلات التالية :

انضموا إلى صفحة أفكارPro على الفيس بوكغير هذه العبارة بما يناسبك.

afkarpro.apاستبدله باسم صفحتك على الفيسبوك.

4- لا تنسى حفظ الإضافة.

*! أتمنى أن أكون قد وفقت في إيصال المعلومة لكم بدون تعقيدات ;) 
و إذا واجهت أي مشكل أو لديك أي استفسار لا تتردد في طرح سؤالك وذلك بالرد بتعليق، سأجيب بالتأكيد! إن شاء الله ...




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

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

  1. لو سمحت يا فندم انا مش عارف الصق الكود
    مش راضى يتاخد كوبى معايا

    ردحذف
  2. أعٍد التجربة .. النسخ يشتغل الأن بدون مشاكل

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

    ردحذف
  4. لم أفهم سؤالك أخي ! ممكن توضح أكثر ؟

    ردحذف
  5. اخي اذا امكن صندوق اعجاب الفيسبوك الخاص بمدونتك كيف اثبته في مدونتي ؟؟؟

    ردحذف
  6. أنا أستعمل صندوق إعجاب الفيسبوك عائم على الجانب الأيمن،
    وهذا رابط للدرس الذي شرحت فيه طريقة تركيب الإضافة التفصيل :
    http://afkarpro.blogspot.com/2012/12/1-jquery.html

    ردحذف
  7. ادوات الفيس بوك من اكثر ادوات اشهار المواقع علي الانترنت وانصح كل اصحاب المواقع والمدونات ان يكون لديه صفحة لموقعه علي الفيس بوك وغيرها من مواقع التواصل

    http://alyomtop.blogspot.com/

    ردحذف
  8. السلام عليكم لا اعرف يا اخي لماذا تريد ان تظهر في مدونتي
    http://faceinformatique.blogspot.com

    ردحذف
  9. Abdellah Ohmane
    ***************
    وعليكم السلام، أخي لم أفهم ما تريد قوله بالضبط !!
    ممكن توضح

    ردحذف
  10. جزاك الله كل خير أخي الحبيب
    جاري التطبيق

    ردحذف
  11. سلام عليكم، اضافة رائعة، بس عندي سلايدشو تلقائي بالمدونة، عندما قمت باضافة هذا الكود، توقف سلايدشو، ارجو الحل وشكرا

    ردحذف
    الردود
    1. وعليكم السلام، أطمئنك أخي إضافة Popup Facebook LikeBox لا تؤتر بتاتا على السلايدشو وهذا مثال حي من مدونةأحد الزوار (اضغط هــا)

      أما بخصوص مشكل توقف السلايدشو فقد يرجع إلى :
      - تغيير قالب البلوجر.
      - أو أنك قمت بمسح جزء من الكود الخاص بها عن طريق الخطأ.

      * أنصحك أن تعيد تركيب إضافة السلايدشو مع قليل من التركيز ..
      (و ستشتغل إن شاء الله)

      إن لم تتوصل إلى حل المشكل فقط اتصل بي على afkarpro.contact@gmail.com

      حذف
  12. ايقونه لا شكرا لغلق الصفحه ما تطلع عندي ولا يمكن اغلاق الصفحه

    ردحذف
    الردود
    1. تأكد من أن كود الإضافة كامل
      و أنه يحتوي على الأسطر التالية عند نهاية الكود

      <div id="mdfooter">
      <a href="#" id="mdclose" onclick="return false;">إغلاق</a>
      </div>


      * ثم قم باستبدال كلمة إغلاق بما تريد

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

    ردحذف
    الردود
    1. العفو أخي، وشكرا لك على زيارة هذه المدونة المتواضعة

      حذف
  14. انا عملتها زى ما قولت بالظبط ومظهرتش

    ردحذف
    الردود
    1. ربما لم تنسخ الكود بالشكل الصحيح، حاول مرة أخرى

      حذف
  15. شكرا علي الموضوع الجميل والمفيد
    الوافي

    ردحذف
  16. انا اريد ان اعرف شكل صندوق الاعجاب العائم وشكرا

    ردحذف
    الردود
    1. هناك صورة له في الموضوع، و عند إضافته يظهر في وسط المدونة.

      حذف
  17. انت تستحق كل الشكر والتقدير لأن ماوجدته في مدونتك لم اجدها في غيرها / تحياتي لك يارائع

    ردحذف