مرحبا بكم من جديد في موضوع من مواضيع اضافات بلوجر.
حيت سنتطرق اليوم الى كيفية اضافة ازرار المشاركة على مواقع التوصال الإجتماعي و واتساب.
فكما ترون فالاضافة بسيطة جدا ومتجاوبة مع جميع الأجهزة. كما انها سهلة التنصيب.
كيف اضيفها الى موقعي/مدونتي :
اولا تقوم باضافة اكواد CSS فوق الترويسة </head> مباشرة.
<style>
/* Share Button */
.bottomshare{display:block;padding:0 20px;margin:auto;text-align:center; width: 100%;}
.sharede,.sharesimp{position:relative; width: 100%;}
.sharesimp{margin:20px auto 0 auto;}
.sharesimp a.fb,.sharesimp a.gp,.sharesimp a.tw,.sharesimp a.wa{position:relative;display:inline-block;margin:auto;color:#fff;text-shadow:none;padding:8px 0;width:24%;font-size:14px;font-weight:700;overflow:hidden;text-transform:uppercase;transition:all .3s}
.sharesimp a.gp {background:#f20000;}
.sharesimp a.fb {background:#516ca4;}
.sharesimp a.wa {background:#25D366;}
.sharesimp a.tw {background:#00baff;}
.fbtea,.gotea,.plustea,.twtea{vertical-align:middle;margin-left:5px;transition:all .3s}
.sharesimp a.fb:hover,.sharesimp a.gp:hover,.sharesimp a.tw:hover,.sharesimp a.wa:hover{color:#fff;opacity:.9}
.sharesimp a.fb:active,.sharesimp a.gp:active,.sharesimp a.tw:active,.sharesimp a.wa:active{box-shadow:inset 0 1px 0 rgba(0,0,0,.16)}
</style>
الان تضع هذا الكود فالمكان الذي تريد ان تظهر فيه الأزرار.
<span class='bottomshare'>
<script type='text/javascript'>
//<![CDATA[
var siteurl = window.location.href;
document.write('<div class="sharesimp"><div class="sharede"> \
<a class="wa social-popup" href="https://api.whatsapp.com/send?l=ar&text=' + siteurl + '" target="_blank" title="Share on Whatsapp">\
<i class="fa fa-whatsapp"></i> واتساب </a> \
<a class="fb social-popup" href="https://www.facebook.com/sharer/sharer.php?u=' + siteurl + '" target="_blank" title="Share to Facebook">\
<i class="fa fa-facebook fbtea"></i> فيسبوك</a> \
<a class="tw social-popup" href="https://twitter.com/intent/tweet?text='+encodeURIComponent(document.title)+'&url='+siteurl+'" target="_blank" title="Share to Twitter">\
<i class="fa fa-twitter twtea"></i> تويتر</a> \
<a class="gp social-popup" href="https://plus.google.com/share?url=' + siteurl + '" target="_blank" title="Share to Google+">\
<i class="fa fa-google-plus gotea"></i> جوجل</a> \
</div><div class="clear"></div></div> \
');
//]]>
</script>
<div class='clear'/>
</span>
الابتساماتالابتسامات