Tạo Tính Năng Trượt Trang Và Thông Báo Cho Blogspot

Xin chào mọi người, hôm nay vừa bắt đầu vô học lại rồi ! nên thời gian củng không có nhiều để đăng bài thường cho mọi người được. Thì nay mình chia sẻ một tiện tích trên thanh trượt của trang cực ngon. Mọi người cài vào Blog/Web dùng nha.

Các bước thực hiện

Thêm toàn bộ đoạn Code sau lên trên thẻ đóng </body>

<script type='text/javascript'>
//<![CDATA[
// Code by Sĩ Ben - site: www.siblog.net
jQuery(document).ready(function () {
    var o = 220,
        r = 600;
    jQuery(window).scroll(function () {
        jQuery(this).scrollTop() > o ? jQuery("#siben-scrollToTop").fadeIn(r) : jQuery("#siben-scrollToTop").fadeOut(r)
    })
});
$(document).ready(function() {
    $(document).ready(function() {
        $(".siben-lentop").click(function() {
   var sibenscroll = $('#top').offset().top;
            return $("html,body").animate({
                scrollTop: sibenscroll
            }, 1000)
        })
        $(".siben-xuongtop").click(function() {
   var sibenscroll = $('#bottom').offset().top;
            return $("html,body").animate({
                scrollTop: sibenscroll
            }, 1000)
        })
    })
}.call(this));
$(function () {
    $(".notif-show").on("click", function () {
        $("#disqus-notif").addClass("active").focus()
    });
    $(".close-1").on("click", function () {
        $("#disqus-notif").removeClass("active")
    })
});
$(function () {
    $(".notif-show").on("click", function () {
        $("#overlay-1").addClass("active").focus()
    });
    $(".close-1").on("click", function () {
        $("#overlay-1").removeClass("active")
    })
});
//]]>
</script>
<style>
/* Code by Sĩ Ben - site: www.siblog.net */
#siben-scrollToTop{display:none;list-style:none;font-size:0;position:fixed;bottom:49%;right:0;cursor:pointer;-webkit-transform:translateZ(0);transform:translateZ(0);z-index:2}#siben-scrollToTop a{position:relative;overflow:hidden;display:inline-block;background:#fff;color:#222;font-size:.9rem;margin:0 auto;padding:14px 16px;box-shadow:0 1px 2px rgba(0,0,0,0.06),0 1px 2px rgba(0,0,0,0.1)}#siben-scrollToTop a:hover{color:#747d8c}#top{position:absolute;top:0}#siben-scrollToTop li:nth-child(1){animation:slideInTop .5s}#siben-scrollToTop li:nth-child(2){animation:slideInRight .5s}#siben-scrollToTop li:nth-child(3){animation:slideInDown .5s}
.header-1{background:#2e9eff;color:#fff;height:auto;padding:15px;overflow:hidden}.header-1 h4{font-size:18px;float:left;color:#fff}#siben-scrollToTop .notif-show{color:#54a0ff;transition:all .6s}#siben-scrollToTop .notif-show:hover{color:#2e86de}.notif-show:hover i{animation:rubberBand 1s}#disqus-notif{position:fixed;background:#fff;z-index:999;width:23.5%;top:0;right:-769px;bottom:0;transition:all .5s}#disqus-notif.active{right:0}#overlay-1.active{background:rgba(53,58,61,.92);position:fixed;z-index:998;overflow:hidden;width:100%;height:100%;top:0;left:0}#disqus-notif .close-1{position:fixed;margin-left:-40px;margin-top:16px;color:#fff;transition:all .3s}#disqus-notif .close-1 i{font-family:fontawesome;font-size:20px;font-weight:normal;font-style:normal;transform:rotate(270deg);transition:all .3s}#disqus-notif .close-1:hover i{transform:rotate(360deg)}#RecentComments{display:block;width:100%;margin:0 auto;padding:0;height:100%}#RecentComments ul.siben-widget-list{background:#f6f7f9;text-align:left;max-height:95%;overflow:auto;overflow-x:hidden}#RecentComments img.siben-widget-avatar{margin:0 10px 0 0;width:32px;height:32px;padding:0;float:left;border-radius:3px;clear:both;display:block}#RecentComments p.siben-widget-meta{clear:both;font-size:80%;margin-top:5px;font-weight:400}#RecentComments p.siben-widget-meta a{display:inline-block;width:48%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#ced6e0;font-size:12px}#RecentComments p.siben-widget-meta a:hover{color:#a4b0be}#RecentComments li.siben-widget-item{background:#fff;margin:10px;padding:10px;clear:both;color:#888;border-radius:5px;border-bottom:2px solid rgba(0,0,0,0.08)}#RecentComments a.siben-widget-user{display:table;color:#22a6b3;font-weight:400;font-size:14px;margin:7px 0 0 0}#RecentComments a.siben-widget-user:hover{color:#2e87e7}#RecentComments span.siben-widget-comment{display:block;clear:both;margin:20px 10px 10px 0}#RecentComments .siben-widget-comment p{display:inline-block;font-size:13px;margin:0;font-weight:400;color:#444;line-height:1.5}#RecentComments .siben-widget-item pre{position:relative;background-color:#f1f2f6;color:#000;font-family:monospace;line-height:normal;overflow:hidden;text-overflow:ellipsis;padding:10px;margin:5px 0;border-radius:3px;font-size:12px}#RecentComments .siben-widget-item pre code{color:#000;padding:0}#disqus-notif.active #RecentComments li.siben-widget-item{animation:bounceInLeft 1.5s}#RecentComments .siben-widget-comment p a{color:#3498db}#RecentComments .siben-widget-comment p a:hover{color:#2980b9}
@media screen and (max-width:1366px){#disqus-notif{width:35%}}@media screen and (max-width:768px){#disqus-notif{width:100%}#disqus-notif .close-1{background:#535c68;display:block;text-align:left;margin:0;padding:0 15px;position:relative;font-size:35px;font-weight:500;color:#fff}}
.kotak_iklanpost{margin:20px auto;text-align:center}#st-4{z-index:70!important}.kotak_iklanpost img{margin:auto;-webkit-touch-callout:initial;-webkit-user-select:initial;-khtml-user-select:initial;-moz-user-select:initial;-ms-user-select:initial;user-select:auto;pointer-events:auto;width:100%}
@keyframes slideInRight{from{transform:translate3d(100%,0,0);visibility:visible;-webkit-backface-visibility:hidden}to{transform:translate3d(0,0,0)}}@keyframes slideInDown{from{transform:translate3d(0,100%,0);visibility:visible;-webkit-backface-visibility:hidden}to{transform:translate3d(0,0,0)}}@keyframes slideInTop{from{transform:translate3d(0,-100%,0);visibility:visible;-webkit-backface-visibility:hidden}to{transform:translate3d(0,0,0)}}
.siben-widget ul.siben-widget-list{padding:0;margin:0;text-align:left}
img.siben-widget-avatar{width:32px;height:32px;border:0;margin:0;padding:0 3px 3px 0;float:left}
a.siben-widget-user{font-weight:bold}
a.siben-widget-thread{font-weight:bold}
p.siben-widget-meta{clear:both;font-size:80%;padding:0;margin:0}
li.siben-widget-item{margin:15px 0;list-style-type:none;clear:both}
span.siben-widget-clout{padding:0 2px;background-color:#ff7300;color:#fff}
table.siben-widget-horiz td{padding-right:15px}
.siben-widget-comment p{display:inline}
</style>
<div id='overlay-1'></div>
<div id='disqus-notif'>
<a class='close-1' href='javascript:void(0);' title='Close'><i class='fa fa-times'></i></a>
<div class='header-1'><h4>Thông báo của Admin</h4></div>
<div class='siben-widget' id='RecentComments'>
<ul class='siben-widget-list'>
<li class='siben-widget-item'>
<a href='https://fb.com/dangtiensi.it' rel='nofollow' target='_blank' class='imglink'>
<img class='siben-widget-avatar' src='//graph.facebook.com/1536501797/picture?type=small'/></a>
<a class='siben-widget-user' href='https://fb.com/dangtiensi.it' rel='nofollow' target='_blank'>Đặng Tiến Sĩ</a>
<span class='siben-widget-comment'><p>Hiện tại mình đang đi học ! và thời gian rất ít để có thể đăng bài nhiều cho các bạn được nhé. Thông cảm cho mình !</p></span>
<p class='siben-widget-meta'>11-02-2019</p>
</li>
<li class='siben-widget-item'>
<a href='https://fb.com/dangtiensi.it' rel='nofollow' target='_blank' class='imglink'>
<img class='siben-widget-avatar' src='//graph.facebook.com/1536501797/picture?type=small'/></a>
<a class='siben-widget-user' href='https://fb.com/dangtiensi.it' rel='nofollow' target='_blank'>Đặng Tiến Sĩ</a>
<span class='siben-widget-comment'><p>Xin chào các bạn ! Mình là Sĩ Ben :P rất vui khi bạn đang đọc Blog của mình !</p></span>
<p class='siben-widget-meta'>10-02-2019</p>
</li>
</ul>
</div>
</div>
<ul id='siben-scrollToTop'>
<li><a class='siben-lentop ripple' href='javascript:void(0);' title='Go up'><i class='fa fa-chevron-up'></i></a></li>
<li><a class='notif-show ripple' href='javascript:;' title='Notifications'><i class='fa fa-bell'></i></a></li>
<li><a class='siben-xuongtop ripple' href='javascript:void(0);' title='Go down'><i class='fa fa-chevron-down'></i></a></li>
</ul>
<div id='top'></div>
<div id='bottom'></div>

Sau đó lưu code và xem thành quả nhé.

Demo

Blog mình đang dùng, kéo xuống cuối trang sẽ xuất hiện bên thanh trượt bên phải nhé.

Lời kết

Chúc các bạn thành công nhé. Nhớ không xóa những ghi chú trong Code nhé, vì Code do mình tìm ra và edit đó :D