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

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

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

وقبل الولوج إلي الشرح يمكنك معاينة الإضافة عبر الرابط التالي :

معاينة

أولا قم بالبحث عن الوسم ]]></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}

اقرا ايضا :حصريا حماية حقوق قالبك 2018 على مدونة حصرى ويب

ثانيا: قم بالبحث عن الوسم </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='&quot;http://twitter.com/share?url=&quot; + data:post.url' rel='noopener' target='_blank' title='Twitter Tweet'><i class='fa fa-twitter'/></a></li><li><a class='facebook' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url' rel='noopener' target='_blank' title='Facebook Share'><i class='fa fa-facebook'/></a></li><li><a class='google' expr:href='&quot;http://plus.google.com/share?url=&quot; + 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='&quot;https://pinterest.com/pin/create/button/?url=&quot; + data:post.canonicalUrl + &quot;&amp;media=&quot; + (data:post.firstImageUrl ? data:post.firstImageUrl : &quot;https://3.bp.blogspot.com/-KwmN4jf70kk/VjEnrjuF-7I/AAAAAAAABq0/0ga5WDnDjZI/s1600-r/alt%2Bimage.png&quot; ) + &quot;&amp;description=&quot; + data:post.title' onclick='window.open(this.href,&quot;_blank&quot;,&quot;width=640,height=320&quot;); return false;' rel='noopener' target='_blank'><i class='fa fa-pinterest'/></a></li></ul></div></div>

إلي هنا أكون قد انتهيت من الشرح وإن واجهتك اي مشكلة يمكنك تركها في التعليقات والله الموفق.