Cách cài đặt nút Đi lên và Xuống trên Blog


Lần này Hùng Coder sẽ chia sẻ các mẹo về cách cài đặt các nút Đi lên và Đi xuống trên Blog . Nút Lên và Xuống là gì? Các nút Đi lên và Đi xuống là các nút hoạt động cả hai cách để nhảy lên xuống dễ dàng và ngắn gọn, thay vì di chuyển chúng bằng chuột. Đây là một cách để khuyến khích người dùng dễ dàng duyệt nội dung khác.


Các nút Đi lên và Đi xuống có vai trò quan trọng đối với một trang web có nội dung có một trang dài. Đối với các trang web có nhiều thông tin trên trang của họ, họ sẽ làm cho nội dung khác không được chú ý để cuộn xuống trang.

Được rồi, đối với những người muốn cài đặt nó, xin vui lòng làm theo các bước dưới đây

Cách cài đặt nút Đi lên và Xuống trên Blog

Bước đầu tiên, mở Blogger > Nhấp vào menu Chủ đề > Nhấp vào Chỉnh sửa HTML

Mã mà tôi sẽ chia sẻ đang sử dụng các biểu tượng từ Fontawemme, nếu không được thêm. Thêm mã dưới đây trước </head> trong trình chỉnh sửa mẫu.

<script type='text/javascript'>
//<![CDATA[
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");
//]]>
</script>

Sau khi thêm mã Fontawgie, vui lòng thêm mã bên dưới ngay trước </head>

Phiên bản 1
<style type='text/css'>
/* Go Up and Down */
#scrollToTop{display:none;list-style:none;position:fixed;bottom:49%;right:20px;cursor:pointer;-webkit-transform:translateZ(0);transform:translateZ(0);z-index:99}
#scrollToTop a{display:inline-block;background:#fff;color:#222;font-size:.8rem;margin:5px auto;padding:12px 14px;border-radius:99em;box-shadow:0 2px 3px rgba(0,0,0,0.06),0 2px 3px rgba(0,0,0,0.1)}
#scrollToTop a:hover{color:#222;box-shadow:0 10px 21px rgba(0,0,0,0.15),0 6px 6px rgba(0,0,0,0.12)}
#top{position:absolute;top:0}
</style>

Phiên bản 2 đơn giản hơn
<style type='text/css'>
/* Go Up and Down ver 2 */
#scrollToTop{display:none;list-style:none;position:fixed;bottom:49%;right:10px;cursor:pointer;-webkit-transform:translateZ(0);transform:translateZ(0);z-index:99}
#scrollToTop a{color:rgba(0,0,0,0.2);font-size:16px}
#scrollToTop a:hover{color:rgba(0,0,0,0.5)}
#top{position:absolute;top:0}
</style>

Sau đó thêm hai mã dưới đây trước </body>

<ul id='scrollToTop'>
  <li><a href='#top'><i class='fa fa-chevron-up' title='Go up'/></a></li>
  <li><a href='#bottom'><i class='fa fa-chevron-down' title='Go down'/></a></li>
</ul>
<div id='top'/>
<div id='bottom'/>

<script type='text/javascript'>
//<![CDATA[
jQuery(document).ready(function(){var o=220,r=600;jQuery(window).scroll(function(){jQuery(this).scrollTop() > o?jQuery("#scrollToTop").fadeIn(r):jQuery("#scrollToTop").fadeOut(r)})});
$(function(){$("a[href*=#]:not([href=#])").click(function(){if(location.pathname.replace(/^\//,"")==this.pathname.replace(/^\//,"")&&location.hostname==this.hostname){var t=$(this.hash);if(t=t.length?t:$("[name="+this.hash.slice(1)+"]"),t.length)return $("html,body").animate({scrollTop:t.offset().top},600),!1}})});
//]]>
</script>

Lưu chủ đề và xem kết quả trên blog của bạn.

DEMO



Related Posts