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

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

معاينة

شرح طريقة التركيب

1 . توجه لقالب >> تحرير

2. ابحث بإستعمال CTRL+F عن : ]]></b:skin>

3. ضع الكود التالي فوقه

/* CSS Box Sc Ar1web */
.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;}

4. ابحث عن <body> ضع أسفله الكود الأتي

<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 = &quot;//connect.facebook.net/en_Us/all.js#xfbml=1&quot;;
  fjs.parentNode.insertBefore(js, fjs);
}(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));</script>

5. ابحث عن </body> ضع فوقه الكود التالي

<script type='text/javascript'>
 (function() {
  var po = document.createElement(&#39;script&#39;);         
  po.type = &#39;text/javascript&#39;;         
  po.async = true;         
  po.src = &#39;https://apis.google.com/js/plusone.js&#39;;         
  var s = document.getElementsByTagName(&#39;script&#39;)[0];  s.parentNode.insertBefore(po, s);
 })(); 
</script>

6. قم بحفظ النموذج ثم توجه إلى التخطيط

7. اضف اداة 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>

* غير arabe1web بإسم صفحتك على الفيسبوك

* غير iHussam بإسم صفحتك على جوجل بلس

جزيرة التدوين العربى

المشاركات الشائعة

أرشيف المدونة الإلكترونية

التسميات