الخميس، 15 فبراير 2018

احصل على هذة الاداة من هنا

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



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


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






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

    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. اذا واجهت اي مشكلة ضعها بتعليق





    EmoticonEmoticon