إضافة صندوق فيسبوك مع صندوق جوجل بلس قد تغنيك عن الإضافات القديمة والتي إما توضع في في السيدبار أو تكون عن صندوق يظهر تلقائيا فور الدخول للموقع ، مايميز إضافتنا لليوم أنها لا تأخذ متسع في المدونة كما انها مخفية وتظهر فور مرور الموس عليها أي تنزلق منسقة كليا وواضحة مايتبقى عليك إلى مشاهدتها مباشرة بعدها نمر لشرح طريقة
تركيبها
تركيبها
1. داخل القالب ابحث عن ]]></b:skin> وضع الكود التالي فوقه أو ضعه بين <style> </style> فوق </head>
.socialbox{ position:fixed; top:100px; right:-286px; height:250px; width:285px; background:#efefef;border:1px solid #bbb;border-right:0;transition:all 400ms ease-in-out;border-radius:0 0 0 3px;}
.fbicon-box{ width:30px;height:35px;position:absolute;top:-1px;left:-30px;background:#405D9B;border-radius:3px 0 0 3px;color:#fff;font-family:Arial;font-size:30px;font-weight:700;text-align:center;padding-top:2px;}
.socialbox:hover{ right:0;z-index:2;}
.socialbox2{position:fixed;top:145px;right:-279px;height:230px;width:258px;background:#efefef;border:1px solid #bbb;border-right:0; transition:all 400ms ease-in-out; border-radius:0 0 0 3px;padding:10px;}
.gpicon-box{ width:30px;height:32px;position:absolute;top:-1px;left:-30px;background:#DD4B39;border-radius:3px 0 0 3px;color:#fff;font-family:Georgia;font-size:20px;font-weight:700; text-align:center;padding-top:5px;}
.socialbox2:hover, .socialbox2:active{right:0;}
<div id='fb-root'/>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;js.async=true;
js.src = "//connect.facebook.net/ar_Ar/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<script type='text/javascript'>
(function() {
var po = document.createElement('script');
po.type = 'text/javascript';
po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
5. اضف اداة Html/Javascript وضع بها الكود التالي
<div class="socialbox">
<div class="fbicon-box">f</div>
<div class="fb-like-box" data-href="https://www.facebook.com/arabe1web" data-width="290" data-height="240" data-show-faces="true" data-header="false" data-stream="false" data-show-border="false"></div>
</div>
<div class="socialbox2">
<div class="gpicon-box">g+</div>
<div class="g-plus" data-action="followers" data-height="240" data-href="https://plus.google.com/+iHussam" data-source="blogger:blog:followers" data-width="260"></div>
</div>
* غير iHussam بإسم صفحتك على جوجل بلس