نقطة ويب نقطة ويب

آخر الأخبار

random
جاري التحميل ...

  1. احمد شحاتة :: انا زين الفلسطيني متذكرني ؟ آمـــني اذا شفت التعليق ارجوك لا تحذفه وخلي احمد يشوفه ارجوك وانا مشتاقلك يااحمد

    ردحذف

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

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

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

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

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

عن الكاتب

ِAhmed Shahata

التعليقات

ADVERTISEMENT ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT

اتصل بنا

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

جميع الحقوق محفوظة

نقطة ويب