الهجان مستر وليد فريد
ادعية لوجة الله : عدد المساهمات : 4697 تاريخ الميلاد : 04/07/1975 تاريخ التسجيل : 21/09/2009 العمر : 48
| موضوع: طريقة إضافة صندوق إعجاب الفيسبوك منبثق و عائم - لمدونات البلوجر الجمعة مايو 02 2014, 16:10 | |
| أهلا و سهلا بكم زوار ومتتبعي مدونة أفكار 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="http://1.bp.blogspot.com/-804huAndVM8/URLNsICQexI/AAAAAAAACj4/V4HQKB7jQn8/s1600/%5Bwww.afkarpro.blogspot.com%5Dfacebook.gif" border="0" width="80" height="24"/> </td> <td width="10px"> <img src="http://4.bp.blogspot.com/-PYOKriPN2-E/URLOeg-6GeI/AAAAAAAACkA/ZG32q6QB_v8/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="http://1.bp.blogspot.com/-804huAndVM8/URLNsICQexI/AAAAAAAACj4/V4HQKB7jQn8/s1600/%5Bwww.afkarpro.blogspot.com%5Dfacebook.gif" width="80" height="24" onclick="javascript:makingdifferentfbcode('mdfaceid1','mdfaceid2')" /> </div> </div> </div>
3- قبل حفظ الإضافة سنقوم ببعض التعديلات على الكود.
afkarpro.ap [size=18]: [/size]استبدلها بيوزر صفحتك على الفيسبوك. width="300" : من هنا يمكنك التحكم بعرض الصندوق. position: fixed; bottom: 0; right: 10px; : من هذه القيم يمكنك التحكم في موضع الصندوق في أي مكان (مثل أسفل اليسار أو أسفل اليمين). 4- لا تنسى أن تقوم بحفظ الإضافة. [size=18]*! أتمنى أن أكون قد وفقت في إيصال المعلومة لكم بدون تعقيدات , و إذا واجهت أي مشكل أو لديك أي استفسار لا تتردد في طرح سؤالك وذلك بالرد بتعليق، سأجيب بالتأكيد! إن شاء الله ...[/size]
| |
|