Đếm phần trăm khi cuộn trang cho blogger

 

Bình thường để đọc một bài viết thì bạn thường kéo chuột dọc bài viết để theo dõi được các nội dung tiếp theo của bài viết đó. Trong bài viết này mình sẽ giới thiệu cho các bạn thủ thuật hiện phần trăm còn lại khi kéo thanh cuộn Scrollbar xuống cuối chân bài viết hoặc từ chân bài viết lên đầu blog. Đây có thể sẽ hữu ích với những blog muốn tạo sự khác biệt và cá tính riêng cho blog của mình.

» Tạo số đếm phần trăm khi cuộn trang cho blogger?

1- Đăng nhập vào Blogger.

2- Chọn mẫu (Template).

3- Nhấp chọn vào Chỉnh sửa HTML (Edit HTML).

4- Thêm đoạn code bên dưới vào trước thẻ đóng ]]></b:skin>

#scroll {
  display: none;
  position: fixed;
  top: 0;
  right: 20px;
  z-index: 500;
  padding: 3px 8px;
  background-color: #2187e7;
  color: #fff;
  border-radius: 3px;
}
#scroll:after {
  content: " ";
  position: absolute;
  top: 50%;
  right: -8px;
  height: 0;
  width: 0;
  margin-top: -4px;
  border: 4px solid transparent;
  border-left-color: #2187e7;
}

5- Thêm đoạn bên dưới sau thẻ đóng </head>

<div id='scroll'/>

6- Thêm đoạn bên dưới sau thẻ đóng </body>

<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(100);
    if (scrollTimer !== null) {
        clearTimeout(scrollTimer);
    }
    scrollTimer = setTimeout(function() {
        $('#scroll').fadeOut();
    }, 1500);
});//]]>
</script>

7- Lưu mẫu của bạn lại và xem kết quả tiến hành nha.

Thêm hiệu ứng loading đẹp khi chuyển trang cho blogger

Xin chào các độc giả của Namkna! 

Mình mới gia nhập nhóm cộng tác viên của blog này. Vì là thành viên mới nên chắc còn nhiều thiếu sót về cách thức trình bày cũng như nội dung bài viết, vì vậy mong các bạn góp ý nhiệt tình nha! Và bài viết đầu tiên mình chia sẻ đến các bạn đó là làm cách nào để thêm hiệu ứng Loading khi chuyển trang cho blogger

Có rất nhiều blog đã chia sẻ thủ thuật này nhưng chủ yếu hiệu ứng họ đưa ra là 1 hình ảnh hoặc đoạn text đơn giản "Loading...". Đây cũng chính là sự khác biệt hơn so với những thủ thuật mình nói bên trên, hiệu ứng Loading mà mình giới thiệu ở bài viết này hoàn toàn được tạo bởi CSS như ví dụ bên dưới, chắc hẳn sẽ có bạn tưởng rằng đây là một hình ảnh động

Và để thêm hiệu ứng thú vị này vào blog các bạn vui lòng làm theo các bước hướng dẫn đơn giản bên dưới

CSS

Để hiển thị hình ảnh khi load trang như ở trên bạn thêm code sau vào trước thẻ ]]></b:skin>trong template

#loadhalaman {position:fixed;opacity:0.93;top:0;left:0;background-color:#000;z-index:9999;text-align:center;width:100%;height:100%;padding-top:20%;color:#000;display:none;}
.loadball {background-color: transparent;border:5px solid rgb(240 ,0 , 0);border-right:5px solid transparent;border-left:5px solid transparent;border-radius:50px;box-shadow: 0 0 35px rgb(255 ,0 , 0);width:50px;height:50px;margin:0 auto;-moz-animation:spinPulse 1s infinite ease-in-out;-webkit-animation:spinPulse 1s infinite linear;}
.loadball-2 {background-color: transparent;border:5px solid rgb(240 ,0 , 0);border-left:5px solid transparent;border-right:5px solid transparent;border-radius:50px;box-shadow: 0 0 15px rgb(255 ,0 , 0);width:30px;height:30px;margin:0 auto;position:relative;top:-50px;-moz-animation:spinoffPulse 1s infinite linear;-webkit-animation:spinoffPulse 1s infinite linear;}
@-moz-keyframes spinPulse {0% { -moz-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px rgb(255, 0, 0)}50% { -moz-transform:rotate(145deg); opacity:1; }100% { -moz-transform:rotate(-320deg); opacity:0; }}
@-moz-keyframes spinoffPulse {0% { -moz-transform:rotate(0deg); } 100% { -moz-transform:rotate(360deg);  }}
@-webkit-keyframes spinPulse {0% { -webkit-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px rgb(255, 0, 0)} 50% { -webkit-transform:rotate(145deg); opacity:1;} 100% { -webkit-transform:rotate(-320deg); opacity:0; }}
@-webkit-keyframes spinoffPulse {0% { -webkit-transform:rotate(0deg); } 100% { -webkit-transform:rotate(360deg); }}

Script

Chèn đoạn code bên dưới trước thẻ đóng </body>

<div id='loadhalaman'>
<div class='loadball'></div>
<div class='loadball-2'></div>
</div>
<script type='text/javascript'>
$(function() {
    var siteURL = "http://" + top.location.host.toString();
    var $internalLinks = $("a[href^='"+siteURL+"'], a[href^='/'], a[href^='./'], a[href^='../']");
    $internalLinks.click(function() {
        $('#loadhalaman').fadeIn(1500).delay(6000).fadeOut(1000);
    });

    // Hilangkan overlay saat diklik untuk mengatasi gangguan, terutama jika link internal diset dengan target='_blank'
    $('#loadhalaman').click(function() {
        $(this).hide();
    });
});
</script>

Mình xin được nhắc lại lời bên trên, đây là bài viết đầu tiên của mình tại Namkna blog vì vậy mong được sự đóng góp ý kiến từ các bạn để những bài viết sắp tới sẽ hoàn thiện hơn, đưa đến cộng đồng blogger Việt những thủ thuật tốt nhất. Và nếu có thời gian các bạn hãy ghé thăm blog cá nhân của mình tại địa chỉ TrollVL. Xin cảm ơn và chúc blog các bạn ngày một đẹp và phát triển!