Trang chủ / Cài đặt phần trăm thanh cuộn (Scrollbar) cho Blogspot

Cài đặt phần trăm thanh cuộn (Scrollbar) cho Blogspot

ToiDICodeDao 12:12 7 Bình luận
Cài đặt phần trăm thanh cuộn (Scrollbar) cho Blogspot
“Thanh cuộn” (scrollbar) là một biểu ngữ không quá xa lạ phải không các bạn? Nó cũng chiếm một vị trí khác quan trọng trong một Blog/Website.

Thủ thuật “Thêm phần trăm vào thanh cuộn cho Blogger ” chúng ta sử dụng nó như một công cụ xác định vị trí chúng ta đang ở trong một trang Blog/Website, trên hay dưới hay là một vị trí bất kỳ nào đó ở thân trang (hiện thị phần trăm cụ thể trên thanh cuộn).

Đọc thêm:



Hi vọng hiệu ứng phần trăm vào thanh cuộn giúp Blog/Website của bạn tạo nên sự khác biết biệt và đẹp hơn đồng thời tạo cảm giác thích thú hơn cho người đọc, từ đó người đọc sẽ có cảm tình và theo dõi blog của bạn nhiều hơn. Ngoài ra DEMO bài này mình thực hiện trực tiếp ở bài viết này các bạn kéo thanh cuộn để xem nhé!

☼ Bắt đầu thủ thuật

Bước 1: Vào Blog => Mẫu => Chỉnh sửa HTML. Nhấn tổ hợp phím Ctrl + F và tìm đến thẻ </b:skin>. Sau đó dán đoạn mã Code sau ở phía dưới thẻ </b:skin>.

#scroll {
  display:none;
  position:fixed;
  top:0;
  right:15px;
  z-index:500;
  padding:3px 8px;
  background-color:#369fcf;
  color:#fff;
  border-radius:3px;
  font-size:14px;  
}
#scroll:after {
  content: " ";
  position: absolute;
  top:50%;
  right:-10px;
  height:0;
  width:0;
  margin-top:-6px;
  border:6px solid transparent;
  border-left-color:#369fcf; 
Bước 2: Tiếp đó nhấn tổ hợp phím Ctrl + F và tìm đến thẻ <head>. Sau đó dán đoạn mã Code sau ở phía dưới thẻ <head>.

<div id='scroll'></div>  
Bước 3: Sau đó nhấn tổ hợp phím Ctrl + F và tìm đến thẻ </body>. Sau đó dán đoạn mã Code sau ở phía trên thẻ </body>Lưu mẫu.

<script type='text/javascript'>
//<![CDATA[
var scrollTimer = null;
$(window).scroll(function() {
   var viewportHeight = $(this).height(),
       scrollbarHeight = viewportHeight / $(document).height() * viewportHeight,
       progress = $(this).scrollTop() / ($(document).height() - viewportHeight),
       distance = progress * (viewportHeight - scrollbarHeight) + scrollbarHeight / 2 - $('#scroll').height() / 2;
    $('#scroll')
        .css('top', distance)
        .text(' (' + Math.round(progress * 100) + '%)')
        .fadeIn(600);
    if (scrollTimer !== null) {
        clearTimeout(scrollTimer);
    }
    scrollTimer = setTimeout(function() {
        $('#scroll').fadeOut(600);
    }, 1000);
});
//]]>
</script>  
Trở lại Blog/website để xem kết quả nhé !

Nếu bạn thích bài viết này, hãy subscribe blog của tôi để thường xuyên cập nhật những bài viết hay nhất, mới nhất qua email nhé. Cảm ơn rất nhiều. JJJ


Quá trình cài đặt gặp vấn đề gì cứ để lại Comment !
Share:

Bài viết liên quan

Thảo luận

Unknown
lúc 15:32 14 tháng 11, 2015

Cảm ơn bạn nhé

Hoàng Nhân Khôi
lúc 21:38 14 tháng 11, 2015

:) ^^!

Hoàng Nhân Khôi
lúc 03:45 16 tháng 11, 2015

:)) đã đặt liên kết cho bạn :)

Hoàng Nhân Khôi
lúc 07:05 16 tháng 11, 2015

Em buồn :( cho mấy Bác quá ---Mấy Bác chả xem trang em gì hết--- cứ đặt liên kết sau 1 khoảng thời gian rùi mới xem hay sao á :) ___ Từ trước đến giờ em đặt liên kết ở 123tailieufree.com chỉ hiển ở trang chủ thui mà ... Đều này đồng nghĩa nếu với nếu ai Click nào đó để xem thì người đó phải rất hứng thú với Blog đó thế ko tốt hơn hay sao :) .... Nếu hiện thị nhiều mà người khác vừa vô lại nhảy ra thì lúc đó lại khổ....

Mộc
lúc 23:44 16 tháng 11, 2015

Trước khi đặt liên kết mình luôn xem xét site, dù đk không có gì, nhưng bác nói không vào bao giờ thì sao em biết bác mua gà đặt lên đó,
còn việc đặt backlink để làm gì thì chác bác cũng biết
nếu chỉ để ở mình trang chủ thì mình sẽ chỉ nhận được 1 backlink từ site bạn, nhưng bạn đặt ở full trang thì mình sẽ nhận được gấp n lần số đó. cái này là rất cơ bản mà@@@@

Mộc
lúc 01:34 17 tháng 11, 2015

Bác đã nói như vậy thì có lẽ bác khá am hiểu về SEO.
Tuy nhiên, bác cũng biết rằng, trong SEO không phải chỉ mình dofollow là đủ. Bác cần biết cần đối giữa dofollow và nofollow sao cho thật hợp lý để có thể có kết quả tốt nhất.
À, cảm ơn vì câu trả lời của bác, em xin rút lại backlink này :)

Hoàng Nhân Khôi
lúc 01:41 17 tháng 11, 2015

Oh, ko sao :)