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

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

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

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

مواضيع مفضلة

الأربعاء، 19 ديسمبر 2018

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