34513703109690600
recent
أخبار ساخنة

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

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

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


اول خطوة هو البحث عن هذا الكود وبعد ذللك تضع الاكواد التالية فوقة ]]></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>

    نتمنى في نهاية ان يكون استفدتم بهذه التدوينة وانتظرو المزيد ان شاء الله 

    ليست هناك تعليقات
    إرسال تعليق

    إرسال تعليق

    لاتنسي ان تترك بصمتك بالتعليق

    نموذج الاتصال
    الاسمبريد إلكترونيرسالة