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

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

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

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

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

2- ثم قم بنسخ الكود التالي ولصقه بالمكان المخصص بكود.

<style type='text/css'>
.newmdfbplikebox span{bottom: 0;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 0px;text-align: right;z-index: 99999;}.newmdfbplikebox span a{color: #808080;text-decoration:none;}.newmdfbplikebox span a:hover{text-decoration:underline;}</style>
<script>
function makingdifferentfbcode(show_tbl,hide_tbl){
        document.getElementById(show_tbl).style.display='';
document.getElementById(hide_tbl).style.display='none';
}
</script><div class="newmdfbplikebox">
<div id="mdfaceid1" style="position: fixed; bottom: 0; right: 10px; width:300px; background-color:#ffffff;">
<div style="background-color:#46629d; height:26px;" onclick="javascript:makingdifferentfbcode('mdfaceid2','mdfaceid1')" >
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhy3yqzLp4Bcf1DuV4cjYd_FNDehHRoYYrlpdWSRoMAoojW6ets-QLG7Qj7SbJ9rDU11ICQfQtX9HjZxX77XSQvkI0Zm1SkRSRzGAfpTetQdRsU12qFTFpX3lCLHck-3ipcyEZ4wmCxKP36/s1600/%5Bwww.afkarpro.blogspot.com%5Dfacebook.gif" border="0" width="80" height="24"/>
    </td>
    <td width="10px">
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMUTqQi3VSo6ypsw6ktkHakRNXf0H2aKwHV8oMbE3bNSpOPOpamUxU12R8VKSe-EzmJuYsfvucCcgd3tIYiiUB6VQpSDbTgCyLAPj82H64fG7YfhLOw0a6sD9Gcg3SUTzDf9TfjuwjuUVr/s1600/%5Bwww.afkarpro.blogspot.com%5Dfacebook2.gif" width="20" height="24" onclick="javascript:makingdifferentfbcode('mdfaceid2','mdfaceid1')" />
    </td>
  </tr>
</table>
</div>
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<fb:like-box href="https://www.facebook.com/afkarpro.ap" width="300" show_faces="true" stream="false" header="false"></fb:like-box>
<span>
By <a href="http://afkarpro.blogspot.com/">AfkarPro</a> / <a href="http://afkarpro.blogspot.com/2013/02/-Minimizable-floating-facebook-like-box-widget-for-blogger.html">+Get This!</a>
</span>
</div>
<div id="mdfaceid2" style="position: fixed; bottom: 0; right: 10px; width:300px; background-color:#FFFFFF; display:none;" onclick="javascript:makingdifferentfbcode('mdfaceid1','mdfaceid2')">
<div style="background-color:#46629d;height:24px;">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhy3yqzLp4Bcf1DuV4cjYd_FNDehHRoYYrlpdWSRoMAoojW6ets-QLG7Qj7SbJ9rDU11ICQfQtX9HjZxX77XSQvkI0Zm1SkRSRzGAfpTetQdRsU12qFTFpX3lCLHck-3ipcyEZ4wmCxKP36/s1600/%5Bwww.afkarpro.blogspot.com%5Dfacebook.gif" width="80" height="24" onclick="javascript:makingdifferentfbcode('mdfaceid1','mdfaceid2')" />
</div>
</div>
</div>

3- قبل حفظ الإضافة سنقوم ببعض التعديلات على الكود.

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

width="300" : من هنا يمكنك التحكم بعرض الصندوق.

position: fixed; bottom: 0; right: 10px; : من هذه القيم يمكنك التحكم في موضع الصندوق في أي مكان (مثل أسفل اليسار أو أسفل اليمين).

4- لا تنسى أن تقوم بحفظ الإضافة.

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