السلام عليكم ورحمة الله وبركاتة متابعي ومحبي مدونة نقطة ويب الأعزاء ، أقدم لكم اليوم إضافة يحتاجها الكثير من المدونين وهي إضافاة مشاركة المواضيع علي مواقع التوصل الإجتماعي ، حيث أن الإضافة الأضافة تتميز بشكل إحترافي جدا وجذاب مما سوف تزيد التفاعل علي مدونتك إن شاء الله
وقبل الولوج إلي الشرح يمكنك معاينة الإضافة عبر الرابط التالي :
أولا قم بالبحث عن الوسم ]]></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>
إلي هنا أكون قد انتهيت من الشرح وإن واجهتك اي مشكلة يمكنك تركها في التعليقات والله الموفق.
