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

Đặng Tiến Sĩ Tác giả:
Xuất bản: Thứ Hai, 11 tháng 2, 2019 -

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.


Tạo Nút Lên Top, Nút Lên Đầu Trang, Nút Xuống Cuối Trang, Tiện Ích Trượt Trang, Tiện Ích Thông Báo, Tạo Tính Năng Trượt Trang Và Thông Báo Cho Blogspot

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

Tag:
0 Like
6 Comment More Emoticon
6 Nhận xét
Sắp xếp theo

Bài Viết Có Thể Xem

THÔNG BÁO

Biên tập nội dung: Đặng Tiến Sĩ
Sĩ Ben IT Blogger giữ bản quyền nội dung trên website này
Chỉ được phát hành lại nội dung khi có sự đồng ý của chủ sở hữu
Mọi thư từ góp ý vui lòng gửi về địa chỉ dangtiensi.vn@gmail.com

Đóng Liên hệ

Thông báo của Admin