Kênh Tên Miền chuyên cung cấp tên miền đẹp, giá rẻ! Hãy liên hệ kỹ thuật: 0914205579 - Kinh doanh: 0912191357 để được tư vấn, hướng dẫn miễn phí, Cảm ơn quý khách đã ủng hộ trong thời gian qua!
kiem tien, kiem tien online, kiem tien truc tuyen, kiem tien tren mang
Friday, April 15, 2016

Có rát nhiều kiểu dáng để tạo nút Back to top cho Blogger/Blogspot. Tên gọi của nó, nói nôm na dùng để dịch chuyển cửa sổ giao diện Blog/Web về đầu màn hình.
Một số Source Code mình tổng hợp như sau, bạn có thể làm thử và tùy theo ý thích mà sử dụng:
Cách làm:
Tất nhiên phải có Account Google. Bạn mỡ vào Blogger, vào tiếp phần thiết kế Bố cục cho Blog và Click chuột mỡ một Widget tiện ích, chọn Html/JavaScript và chép một trong các Source Code dưới đây vào khung soạn thảo Code
Kiểu 1: Kiểu nầy không phải tạo Widget, vào thẳng trong Template, mỡ Edit HTML. nhấn Ctrl +F tìm </Body> và chép Source code vào phía trước:
<!-- Back to top button -->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script><script type='text/javascript'>$(function(){$(window).scroll(function(){if($(this).scrollTop()!=0){$("#rb-top").fadeIn()}else{$("#rb-top").fadeOut()}});$("#rb-top").click(function(){$("body,html").animate({scrollTop:0},800);return false})});</script><a href="http://gi2get.blogspot.com/"></a><a id='rb-top' style='display: none; position: fixed; bottom: 5px; right: 5px; cursor:pointer;font:12px arial;'><img src='http://4.bp.blogspot.com/-tk4vfkGD35A/T_lotWXXISI/AAAAAAAAAjw/ln3rm57w1og/s1600/rb+back+to+top+3.png' width="50px" height="50px"/></a>

Save lại và xem kết quả

Kiểu 2: Kiểu nầy không phải tạo Widget, vào thẳng trong Template, mỡ Edit HTML. nhấn Ctrl +F tìm </Body> và chép Source code vào phía trước:
<!-- BACK TO TOP -->
<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 type='text/javascript'>$(function(){$(window).scroll(function(){if($(this).scrollTop()!=0){$(&#39;#bttop&#39;).fadeIn();}else{$(&#39;#bttop&#39;).fadeOut();}});$(&#39;#bttop&#39;).click(function(){$(&#39;body,html&#39;).animate({scrollTop:0},800);});});</script>
<!-- BACK TO TOP Ends -->



Save lại và xem kết quả
Kiểu 3: Kiểu nầy không phải tạo Widget, vào thẳng trong Template, mỡ Edit HTML. nhấn Ctrl +F tìm </Body> và chép Source code vào phía trước:

<a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#" title="Back to Top"><img src="http://2.bp.blogspot.com/- ExomXm9BGFw/UmFqgFo-rFI/AAAAAAAAAE4/JMc1KSveWco/s1600/Top.png"/></a>

Save lại và xem kết quả
Kiểu 4: Kiểu nầy không phải tạo Widget, vào thẳng trong Template, mỡ Edit HTML. nhấn Ctrl +F tìm </Body> và chép Source code vào phía trước:
<a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#" title="Back to Top"><img src="http://3.bp.blogspot.com/-gjSXwM5eyjU/TZa3mvhqdBI/AAAAAAAABY4/c6t0LcUeu6o/s1600/vers-haut-icone-7320-48.png" /></a> 

Save lại và xem kết quả.
Kiểu 5: Kiểu nầy không phải tạo Widget, vào thẳng trong Template, mỡ Edit HTML. nhấn Ctrl +F tìm </Body> và chép Source code vào phía trước:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script>
jQuery(document).ready(function() {
var offset = 220;
var duration = 500;
jQuery(window).scroll(function() {
if (jQuery(this).scrollTop() > offset) {
jQuery('.back-to-top').fadeIn(duration);
} else {
jQuery('.back-to-top').fadeOut(duration);
}
});

jQuery('.back-to-top').click(function(event) {
event.preventDefault();
jQuery('html, body').animate({scrollTop: 0}, duration);
return false;
})
});
</script>

<style>
div#page {
max-width: 900px;
margin-left: auto;
margin-right: auto;
padding: 20px;
}

.back-to-top {
position: fixed;
bottom: 2em;
right: 0px;
text-decoration: none;
color: #000000;
background-color: rgba(235, 235, 235, 0.80);
font-size: 12px;
padding: 1em;
display: none;
font-weight: bold;
}

.back-to-top:hover {
background-color: rgba(135, 135, 135, 0.50);
text-decoration: none;
}
</style>

<a class="back-to-top" href="#">Len dau trang</a>


Save lại và xem kết quả.
Các bạn thấy có đơn giản không. Chỉ là những Source Code mình tìm kiếm, tổng hợp lại thôi. Một lúc khác, hy vọng rãnh rỗi hơn, thoãi mái hơn sẽ tìm được nhiều hơn nữa. Chúc các bạn vừa làm, vừa học, vừa Vọc thành công nhiều hơn thế nữa.
Minh Nguyễn

0 comments:

Post a Comment

Popular Posts