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

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

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

معاينة

أولا قم بالبحث عن الوسم `]]></b:skin>` ثم قم بوضع الأكواد التالية فوقة مباشرة.

123456789101112131415161718

* {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>` ثم قم بوضع الأكواد التالية فوقة مباشرة.

12345678910111213141516171819

<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/>` سوف تجدة مكرر أكثر من مرة الأخير هو المقصود ،ثم قم بوضع الأكواد التالية فوقة مباشرة .

12345678910111213141516171819

<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>

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

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

أولا قم بالبحث عن الوسم `]]></b:skin>` ثم قم بوضع الأكواد التالية فوقة مباشرة.

ثانيا: قم بالبحث عن الوسم `</body>` ثم قم بوضع الأكواد التالية فوقة مباشرة.

ثالثا ومع الكود : قم بالحبث عن `<data:post.body/>` سوف تجدة مكرر أكثر من مرة الأخير هو المقصود ،ثم قم بوضع الأكواد التالية فوقة مباشرة .

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

إرسال تعليق

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

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

أولا قم بالبحث عن الوسم ]]></b:skin> ثم قم بوضع الأكواد التالية فوقة مباشرة.

ثانيا: قم بالبحث عن الوسم </body> ثم قم بوضع الأكواد التالية فوقة مباشرة.

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

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

آخر المشاركات

تعليقات: 0

إرسال تعليق

أولا قم بالبحث عن الوسم `]]></b:skin>` ثم قم بوضع الأكواد التالية فوقة مباشرة.

ثانيا: قم بالبحث عن الوسم `</body>` ثم قم بوضع الأكواد التالية فوقة مباشرة.

ثالثا ومع الكود : قم بالحبث عن `<data:post.body/>` سوف تجدة مكرر أكثر من مرة الأخير هو المقصود ،ثم قم بوضع الأكواد التالية فوقة مباشرة .