JQuery và CSS lên đầu trang siêu đẹp cho blogspot

Xêm Thêm : SEO BlogspotTemplates Blogspot Thủ Thuật Blogspot

Lên đầu trang hay còn gọi Black To Top là một tính năng khá cần thiết cho blogspot hay wedsite, bởi vì đối với những bài viết có độ dài khủng thì việc lăn chuột hay cuộn thanh trượt rất là phiền phức đối với người đọc.

JQuery và CSS lên đầu trang siêu đẹp cho blogspot

Vậy làm sao để thêm tính năng này vào blogspot? Hôm nay Thuthuatblogger.org sẽ giúp các bạn làm điều này với 2 cách đó là dùng JQuery và CSS cho các bạn lựa chọn nhé.

Cách thứ nhất : Dùng JQuery

Bước 1 : Đăng nhập vào templates blogspot -> Mẫu -> Chỉnh sửa HTML
Bước 2 : Dán đoạn code sau trên thẻ đóng </body>

<style type='text/css'> #bttop{border:1px solid #4adcff;background:#24bde2;text-align:center;padding:5px;position:fixed;bottom:35px;right:10px;cursor:pointer;display:none;color:#fff;font-size:11px;font-weight:900;} #bttop:hover{border:1px solid #ffa789;background:#ff6734;} </style> <div id='bttop'>BACK TO TOP</div> <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script> <script type='text/javascript'>$(function(){$(window).scroll(function(){if($(this).scrollTop()!=0){$('#bttop').fadeIn();}else{$('#bttop').fadeOut();}});$('#bttop').click(function(){$('body,html').animate({scrollTop:0},800);});});</script>

Bước 3 : Lưu mẫu (templates) lại và quay lại trang chủ blogspot xem kết quá

Cách thứ hai : Dùng CSS

Bước 1 : Đối với cách dùng CSS các bạn có thể làm bước 1 như ở bước dùng  JQuery là thêm code vào cuối templates blogspot. Hoặc có thể đơn giản hơn là các bạn vào Bố cục -> Thêm tiện ích HTML
Bước 2 : Ở đây hộp thoại mở ra các bạn dán vào đoạn code bên dưới

<a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#" title="Back to Top"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxO3pPqofFaYn1svVwRpr16v1cowRGWlKaRJ2cOe-xWe0cALEz84iJDZHWC-L2ZOkQkLgQEya5Una2R3BMd3r34fcwGvc3J0xiK4a_7Qp-FzvcP-LalfJflS_AstiO0UtZW2Rn255hgQ/s1600/go-to-top.png"/></a>

Bước 3 : Các bạn có thể thay link ảnh bằng bất cứ link ảnh nào các bạn thấy đẹp nhé, lưu tiện ích lại và xem thành quả vừa làm được..
Kết luận : Đối với cách hướng dẫn trên thì các bạn có thể thay chữ Back to Top thành bất cứ chữ gì bạn thích, đây là một tiện ích rất phù hợp với các blogspot hay wedsite tin tức đem lại sự thân thiện cho người đọc.