اضافة أزرار مشاركة المواضيع عبر مواقع التواصل الإجتماعي بشكل إحترافي

اهلا وسهلا بكم متابعينا الكرام اليوم نقدم لكم اضافة يحتاج اليها الكثير من المدونية وهى ازار مشاركة المواضيع داخل مواقع التواصل الاجتماعى واضافة اليوم تتميز بشكل رائع من ما يجعل الكثير من الزوار يقومون بمشاركة المواضيع

اضافة أزرار مشاركة المواضيع عبر مواقع التواصل الإجتماعي بشكل إحترافي

اول خطوة هو البحث عن هذا الكود وبعد ذللك تضع الاكواد التالية فوقة ]]></b:skin> 

* {list-style:none;text-decoration:none;margin:0;padding:0;outline:0;}
.share-inside > span{display:inline-block;background:#8539b5;padding:3px 14px;padding-bottom:8px;z-index:999999999;width:186px;position:relative;cursor:pointer;color:#fff;border-radius:2px}
.share-inside{position:relative;text-align:center;margin-top:8px}
.share-inside #share-bb ul li:nth-of-type(2){transition-delay:.1s}
.share-inside #share-bb ul li:nth-of-type(3){transition-delay:.2s}
.share-inside #share-bb ul li:nth-of-type(4){transition-delay:.3s}
.share-inside #share-bb ul li:nth-of-type(5){transition-delay:.4s}
.share-inside .selected ul li{opacity:1!important}
.share-inside .selected ul li:nth-child(5){position:absolute;right:0!important;left:-178px!important;top:58px!important}
.share-inside .selected ul li:nth-child(4){position:absolute;right:0!important;left:-95px!important;top:104px!important}
.share-inside .selected ul li:nth-child(3){position:absolute;right:0!important;left:4px!important;top:142px!important}
.share-inside .selected ul li:nth-child(2){position:absolute;right:0!important;left:95px!important;top:104px!important}
.share-inside #share-bb ul li{left:0;position:absolute;top:0;right:0;opacity:0;transition:all .4s cubic-bezier(0.935,0,0.34,1.33);-webkit-transition:all .5s cubic-bezier(0.935,0,0.34,1.33)}
#share-bb{z-index:9999999999999;display:block}
.share-inside div#share-bb ul li a{color:#fff;background:#8539b5;display:inline-block;width:50px;text-align:center;line-height:50px;font-size:16px;border-radius:50%;height:50px;position:relative!important;z-index:99999999999999999999!important}
.share-inside #share-bb ul li:nth-child(1){position:absolute;right:0;left:178px;top:58px}
.share-inside #share-bb ul li a img{width:25px;max-width:25px;margin-top:12px}

قم بالبحث عن الوسم </body> ثم قم بوضع الاكواد فوقة

<script>
//<![CDATA[
$(".share-inside > span").click(function(){$("#share-bb").toggleClass("selected")});
$( ".whatsapp-btn" ).click(function() {
var ua = navigator.userAgent.toLowerCase();
var isAndroid = ua.indexOf("android") > -1;
var Ismobile = ua.indexOf("mobile") > -1;
var isiPhone = ua.indexOf("iPhone") > -1;
if(isAndroid) {
}else if(Ismobile){
}
else if(isiPhone){
} else {
alert("لا يمكنك مشاركة التدوينة على الواتساب الا من الهاتف !");
}
});
//]]>
</script>

ثالتا واخيرا قم بالبحث عن الكود التالى <data:post.body/> ولكن يجب ان تنتبة انة مكرر عدة مرات كل ما هو عليك فعلة اختيار اخر كود يظهر ووضع الكود التالى فوقة

<div class='share-inside'>
<div class='share-inside'>
<span><i class='fa fa-share-alt'/> شارك الموضوع</span>
<div id='share-bb'>
<ul>
<li>
<a class='twitter' expr:href='"http://twitter.com/share?url=" + data:post.url' rel='noopener' target='_blank' title='Twitter Tweet'>
<i class='fa fa-twitter'/></a></li>
<li><a class='facebook' expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url' rel='noopener' target='_blank' title='Facebook Share'>
<i class='fa fa-facebook'/></a></li>
<li><a class='google' expr:href='"http://plus.google.com/share?url=" + data:post.url' rel='noopener' target='_blank' title='+1'>
<i class='fa fa-google-plus'/></a></li>
<li>
<a class='whatsapp-btn' expr:data-href='data:post.url' expr:data-text='data:post.title' href='whatsapp://send' title='Share on Whatsapp'>
<i class='fa fa-whatsapp'/></a></li>
<li><a class='pinterest' expr:href='"https://pinterest.com/pin/create/button/?url=" + data:post.canonicalUrl + "&media=" + (data:post.firstImageUrl ? data:post.firstImageUrl : "https://3.bp.blogspot.com/-KwmN4jf70kk/VjEnrjuF-7I/AAAAAAAABq0/0ga5WDnDjZI/s1600-r/alt%2Bimage.png" ) + "&description=" + data:post.title' onclick='window.open(this.href,"_blank","width=640,height=320"); return false;' rel='noopener' target='_blank'><i class='fa fa-pinterest'/></a></li>
</ul>
</div>
</div>

نتمنى في نهاية ان يكون استفدتم بهذه التدوينة وانتظرو المزيد ان شاء الله