اضافة صندوق الإعجاب عبر الفيسبوك لمدونة بلوجر

أهلا و سهلا بكم زوار ومتتبعي مدونة أفكار 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/AVvXsEiVTvucRY-77mUMYk5bwwf5antdDvxKrHpKrqv__MeS_DJxA-ys9EqxCnhX4sBWG7T-Ta-sXOkSIlDhzjPdj06szycHECFpXUMdr42zQOw9zAgO87qy68D1MYlY5xSuCSFQzyxJkO2eWXhB/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/AVvXsEhWQwimhNWvs1AnbXTF3g4YWT_IIRx4SI1ajAKE98_wggI38Ych8Oa4pZSEv_i1-7AHg7N1PLKboz40pVHA6052keM30ne1Wb174O8gZKwoMveFnnepfA2n2bR_VDOlRnWMMF_5MB1xep4o/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/AVvXsEiVTvucRY-77mUMYk5bwwf5antdDvxKrHpKrqv__MeS_DJxA-ys9EqxCnhX4sBWG7T-Ta-sXOkSIlDhzjPdj06szycHECFpXUMdr42zQOw9zAgO87qy68D1MYlY5xSuCSFQzyxJkO2eWXhB/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- لا تنسى أن تقوم بحفظ الإضافة.

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

Posted in: