-->

اضافة ازرار لمشاركة الموضوع على واتساب و فيسبوك بشكل بسيط ومتجاوب لموقعك

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

    فكما ترون فالاضافة بسيطة جدا ومتجاوبة مع جميع الأجهزة. كما انها سهلة التنصيب.
     
     
    الإضافة سهله جدا
    اولا تقوم باضافة اكواد CSS فوق الترويسة </head> مباشرة.
    <style>
    /* Share Button */
    .bottomshare{display:block;padding:0 20px;margin:auto;text-align:center;    width: 100%;}
    .sharede,.sharesimp{position:relative;    width: 100%;}
    .sharesimp{margin:20px auto 0 auto;}
    .sharesimp a.fb,.sharesimp a.gp,.sharesimp a.tw,.sharesimp a.wa{position:relative;display:inline-block;margin:auto;color:#fff;text-shadow:none;padding:8px 0;width:24%;font-size:14px;font-weight:700;overflow:hidden;text-transform:uppercase;transition:all .3s}
    .sharesimp a.gp {background:#f20000;}
    .sharesimp a.fb {background:#516ca4;}
    .sharesimp a.wa {background:#25D366;}
    .sharesimp a.tw {background:#00baff;}
    .fbtea,.gotea,.plustea,.twtea{vertical-align:middle;margin-left:5px;transition:all .3s}
    .sharesimp a.fb:hover,.sharesimp a.gp:hover,.sharesimp a.tw:hover,.sharesimp a.wa:hover{color:#fff;opacity:.9}
    .sharesimp a.fb:active,.sharesimp a.gp:active,.sharesimp a.tw:active,.sharesimp a.wa:active{box-shadow:inset 0 1px 0 rgba(0,0,0,.16)}
    </style>
     
      ثم تضع هذا الكود فالمكان الذي تريد ان تظهر فيه الأزرار.
    <span class='bottomshare'>
    <script type='text/javascript'>
    //<![CDATA[
    var siteurl = window.location.href;
      document.write('<div class="sharesimp"><div class="sharede"> \
    <a class="wa social-popup" href="https://api.whatsapp.com/send?l=ar&amp;text=' + siteurl + '" target="_blank" title="Share on Whatsapp">\
        <i class="fa fa-whatsapp"></i> واتساب </a> \
    <a class="fb social-popup" href="https://www.facebook.com/sharer/sharer.php?u=' + siteurl + '" target="_blank" title="Share to Facebook">\
        <i class="fa fa-facebook fbtea"></i> فيسبوك</a> \
    <a class="tw social-popup" href="https://twitter.com/intent/tweet?text='+encodeURIComponent(document.title)+'&url='+siteurl+'" target="_blank" title="Share to Twitter">\
        <i class="fa fa-twitter twtea"></i> تويتر</a> \
    <a class="gp social-popup" href="https://plus.google.com/share?url=' + siteurl + '" target="_blank" title="Share to Google+">\
        <i class="fa fa-google-plus gotea"></i> جوجل</a> \
    </div><div class="clear"></div></div> \
    ');
    //]]>
    </script>
    <div class='clear'/>
    </span>
     
     

    Derniers articles

    Commentaires: 0

    Enregistrer un commentaire