Hướng dẫn chèn menu tiện ích khi trượt trong bài viết cho Blogspot

Mở đầu

- Hello xin chào các bạn, đã lâu rồi mình không ra thủ thuật blogspot cho anh em rồi, hôm nay nhân tiện ghé blog BacSiWindows thấy cái menu tiện ích khi trượt trong bài viết chất quá nên rip về share cho anh em.

Cách thêm menu

Thêm toàn bộ code này vào sau thẻ body
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='share-this'>
<div class='share-content'>
<div class='share-btn'>
<a class='fbs ripple' expr:href='&quot;//m.facebook.com/sharer/sharer.php?u=&quot; + data:blog.url' onclick='window.open(this.href, &quot;_blank&quot;, &quot;height=430,width=640&quot;); return false;' target='_blank' title='Chia sẻ bài viết lên Facebook'><i class='fab fa-facebook-f'/><span>Share</span></a>
<a class='gps ripple' expr:href='&quot;//plus.google.com/share?url=&quot; + data:blog.url' onclick='window.open(this.href, &quot;_blank&quot;, &quot;height=430,width=640&quot;); return false;' title='Chia sẻ bài viết lên Google Plus'><i class='fab fa-google-plus-g'/><span>Share</span></a>
<a class='tws ripple' expr:href='&quot;//twitter.com/share?url=&quot; + data:blog.url' target='_blank' title='Chia sẻ bài viết lên Twitter'><i class='fab fa-twitter'/><span>Share</span></a>
<a class='emails ripple' href='&amp;target=email' target='_blank' title='Gửi bài viết cho bạn bè bằng Email'><i class='fa fa-envelope'/><span>Send by Email</span></a>
<a class='bloggers ripple' href='javascript:;' onclick='CopyLink()' title='Sao chép link bài viết'><i class='fa fa-clipboard'/><span>Copy URL</span></a>
<a class='to-tops ripple' href='javascript:;' id='bacsiwindows-go-top' title='Về đầu trang'><i class='fa fa-arrow-up'/><span>Lên trên!</span></a>
</div>
</div>
</div>
<script>
//<![CDATA[
jQuery(document).ready(function($) {
    var lastScrollTop = 0;
    jQuery(window).scroll(function() {
        var scrollTop = jQuery(this).scrollTop();
        if (scrollTop > lastScrollTop && jQuery(this).scrollTop() > 200) {
            jQuery('nav').addClass('after');
            jQuery('.share-this').addClass('after')
        } else {
            jQuery('nav').removeClass('after');
            jQuery('.share-this').removeClass('after');
        }
        lastScrollTop = scrollTop
    })
});
//]]>
</script>
<style>.share-this.after{bottom:0}
.share-this{position:fixed;bottom:-70px;left:0;z-index:99;background:#fff;width:100%;box-shadow:0 0 50px rgba(0,0,0,.1);transition:bottom .35s}
.share-this .share-content{width:1200px;max-width:100%;margin:auto;padding:5px 0}
.share-this .copy-url{border:1px solid #eee;padding:5px 10px;margin:10px 0 0;user-select:all}
.share-this .share-btn a i{margin:0 6px 0 0}
.share-this .share-btn a{background:#555;color:#fff!important;padding:6px 20px;font-family:Roboto,sans-serif;font-weight:500;font-size:14px;display:inline-block;border-radius:4px}
.share-this .share-btn a:hover{opacity:.8}
.share-this .share-btn a.fbs{background:#3b5998}
.share-this .share-btn a.gps{background:#d34836}
.share-this .share-btn a.bloggers{background:#ff7043}
.share-this .share-btn a.tws{background:#1da1f3}
.share-this .share-btn a.emails{background:#d54b3e}
.share-this .share-btn a.to-tops{background:#d621c9;float:right}</style>
<script type='text/javascript'>
$(&quot;#bacsiwindows-go-top&quot;).on(&quot;click&quot;,function(o){o.preventDefault(),$(&quot;html,body&quot;).animate({scrollTop:0},999)});
</script>
     </b:if>

Vậy là xong chúc các bạn thành công

Nhận xét

Đăng nhận xét

Bình luận sao cho dễ thương xíu nhé :3