[Blogspot] Nút Back To Top hình dây móc cá cực thú vị cho blogger

Đối với các loại nút Back To Top trước đây thì hầu như đều là loại truyền thống, hiệu ứng đơn giản. Nhưng hôm nay mình sẽ giới thiệu cho các bạn một loại mới có hình móc câu cá cực kì thú vị và độc đáo cho blog.

Nút Back To Top hình dây móc cá cực thú vị cho blogger

Cách thực hiện: Bước 1: Truy cập quản trị blogger - Chủ đề - Chỉnh sửa HTML.
Bước 2: Dán đoạn Css dưới đây trước thẻ ]]></b:skin>:

/* Back To Top tsmblogger.com */
.tsmbacktotop{background-image:url(https://3.bp.blogspot.com/-cYh1IxsmhD4/VyLubMGA9gI/AAAAAAAADAw/v5_BdKLkkrwVosuBC8gTlXYSN_l0Qo_NwCLcB/s1600/umpanikan.png);background-repeat:no-repeat;position:relative}
#tsmbacktotop{cursor:pointer;width:30px;height:530px;background-size:41px;position:fixed;top:-700px;left:7%;transition:all .7s ease-in-out;-webkit-transition:all .7s ease-in-out;z-index:21}
#tsmbacktotop-bubble{background:#fff;border-radius:50px;color:#06f;display:block;font-size:12px;line-height:14px;opacity:0;overflow:visible;padding:5px;position:absolute;top:445px;left:20px;text-align:center;transition:all .3s ease-in-out;-webkit-transition:all .3s ease-in-out;visibility:hidden;width:60px;height:auto;z-index:99}
#tsmbacktotop:hover > #tsmbacktotop-bubble,#tsmbacktotop:hover > #tsmbacktotop-bubble:after{opacity:1;transition:all .3s ease-in-out;-webkit-transition:all .3s ease-in-out;visibility:visible}
#tsmbacktotop-bubble:after{border-bottom:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #fff;border-left:5px solid #fff;content:"";display:block;position:absolute;top:0%;left:10px;width:0;height:0;z-index:99}

Bước 3: Dán đoạn Jquery bên dưới trước thẻ </body>:

<script type='text/javascript'>
//<![CDATA[
jQuery(document).ready(function(n){n(window).on("scroll",!1,function(){var o=n(window).scrollTop();o>700?n("#tsmbacktotop").css("top","0"):n("#tsmbacktotop").css("top",o-700+"px")}),n("#tsmbacktotop").unbind("click").click(function(){n("html,body").animate({scrollTop:n("#tsmbacktotopTOP").offset().top},"slow")})});
//]]>
</script>

Bước 4: Tiếp tục dán đoạn HTML hiển thị button sau thẻ <body> (nếu như bạn không tìm thấy thẻ <body> thì hãy ấn Ctrl+F và tìm <body thôi là sẽ ra)

<div id="tsmbacktotopTOP"></div>
<div class="tsmbacktotop" id="tsmbacktotop">
<div id="tsmbacktotop-bubble">Về đầu trang</div>
</div>

Thay chữ Về đầu trang bằng chữ khác bạn muốn khi rê chuột vào nút nó sẽ hiện ra.
Bước 5: Lưu template lại.
Kết luận: Rất đơn giản phải không nào?! Vậy là bạn đã vừa sở hữu cho mình một nút Back To Top cực kì thú vị và độc đáo cho blog rồi đấy.

Chúc các bạn thành công :)

#Blogspot #Thủ thuật

TSM Blogger

Chào mừng các bạn đến với TSM. Blog chia sẻ thủ thuật blogspot, tin tức công nghệ, thể thao, kho template blogspot và nhiều thứ khác. Mong các bạn luôn ủng hộ để blog luôn vững mạnh!