ازرار المشاركة بتأثير الانزلاق



السلام عليكم ورحمة
الله وبركاته


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






طريقة التركيب:

    1. توجه الى القالب ثم تحرير html
    2. ضع الكود التالي اسفل post-footer-line post-footer-line-1
    3. ان لم تجده ضع الكود فوق صندوق تعريف الكاتب
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='pastme'/>
<div id='mba-social-sharing'>
<div class='closethis'><i class='fa fa-times'/></div>
<h1>شارك التدوينة</h1>
<p>ان أعجبتك التدوينة شاركها مع أصدقائك!</p>
<ul>
<li class='fb'><a expr:href='&quot;https://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot;+ data:post.title' rel='nofollow' target='_blank' title='Facebook'><i class='fa fa-facebook'/><br/>Facebook</a></li>
<li class='tw'><a expr:href='&quot;https://twitter.com/share?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Twitter'><i class='fa fa-twitter'/><br/>Twitter</a></li>
<li class='gp'><a expr:href='&quot;https://plus.google.com/u/0/share?url=&quot; + data:post.url' rel='nofollow' target='_blank' title='Google+'><i class='fa fa-google-plus'/><br/>Google Plus</a></li>
<li class='re'><a expr:href='&quot;https://reddit.com/submit?&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Reddit'><i class='fa fa-reddit'/><br/>Reddit</a></li>
<li class='in'><a expr:href='&quot;https://www.linkedin.com/shareArticle?mini=true&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title + &quot;&amp;source=&quot; + data:blog.title' id='linkedin' rel='nofollow' target='_blank' title='Linkedin'><i class='fa fa-linkedin'/><br/>Linkedin</a></li>
<li class='st'><a expr:href='&quot;https://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Delicious'><i class='fa fa-delicious'/><br/>Delicious</a></li> 
</ul></div></b:if>


      1. ابحث عن </head> وضع فوقه الكود التالي
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <style>
    #mba-social-sharing ul{display:table;float: left;
        width: 74%;position:relative;line-height:2em!important}#mba-social-sharing{z-index: 9999999999;
        position: fixed;
        ransition: all .2s;
        -moz-transition: all .2s;
        -webkit-transition: all .2s;
        -o-transition: all .2s;
        bottom: -240px;
        right: -400px;
        width: 100%;
        height: 101px;
        display: block;
        background: #ffffffbf;
        padding: 10px 15px;
        font-size: 12px;
        color: #666;}#mba-social-sharing h1{font-size: 28px;
        font-weight: 400;
        line-height: 18px;
        padding: 0!important;
        margin: 18px 32px 0 5px!important;
        float: right;}#mba-social-sharing p{margin: 1.5em 34px !important;
        float: right;
        position: absolute;
        bottom: 0;}#mba-social-sharing ul li{float:left;display:inline-block;margin:5px}#mba-social-sharing ul li a{font-size:12px;color:#fff;width:111.6px;padding:10px 0 5px;text-align:center;display:block;border-radius:3px}#mba-social-sharing ul li a:hover{text-decoration:none;opacity:.9}#mba-social-sharing ul li a i{font-size:16px;padding:10px;border-radius:100%;background:rgba(0,0,0,.1)}#mba-social-sharing ul li.fb a i{padding:10px 14px}#mba-social-sharing ul li.fb a{background:#38559b}#mba-social-sharing ul li.tw a{background:#00aaf2}#mba-social-sharing ul li.gp a{background:#d74628}#mba-social-sharing ul li.re a{background:#f04a24}#mba-social-sharing ul li.in a{background:#12689b}#mba-social-sharing ul li.st a{background:#f04f23}.come-in{transform:translate(-400px,-240px);-moz-transform:translate(-400px,-240px);-webkit-transform:translate(-400px,-240px);-o-transform:translate(0px,0px)}.come-back{transform:translate(0,0);-moz-transform:translate(0,0);-webkit-transform:translate(0,0);-o-transform:translate(0,0)}.closethis{    position: absolute;
        right: 0px;
        top: 0;
        cursor: pointer;
        padding: 3px 10px;
        background: #d74628;
        color: white;}
    </style></b:if>
    <script type='text/javascript'>
    //<![CDATA[
    jQuery(document).ready(function(o){var a=o("#pastme").offset().top
    setInterval(function(){o(window).scrollTop()>=a&&o("#mba-social-sharing").addClass("come-in")},0)
    o(".closethis").click(function(){o("#mba-social-sharing").addClass("come-back")})})//]]>
      </script>


      1. اذا واجهت اي مشكلة ضعها بتعليق




    ليست هناك تعليقات:

    إرسال تعليق