Thấy có nhiều bạn hỏi cách tạo thanh màu xanh xanh khi đọc bài viết ở Anh Nhím Blog, nên nay mình sẻ hướng dẫn các bạn tạo nó cho blog của bạn
Mục lục:
- Mục Đích
- Thực Hiện
- Nâng Cao
- Lời Kết
Mục Đích
- Chả biết, biết tạo cho đẹp blog
- Có thể giúp đọc giả viết vị trí bái viết để xem bài viết mình đọc còn nhiều không
- ......
Thực Hiện
1. Các bạn đăng nhập Blogger >> Mẫu >> Chỉnh Sữa HTML2. Sau đó các bạn chép code sau vào trước thẻ đóng </style> hoặc ]]></b:skin>
/* Reading progress bar */
#nprogress{pointer-events:none}#nprogress .bar{background:#29d;position:fixed;z-index:1031;top:0;left:0;width:0;height:3px}#nprogress .peg{display:block;position:absolute;right:0;width:100px;height:100%;box-shadow:0 0 10px #29d,0 0 5px #29d;opacity:1;-webkit-transform:rotate(3deg) translate(0,-4px);-ms-transform:rotate(3deg) translate(0,-4px);transform:rotate(3deg) translate(0,-4px)}
3. Sau đó chèn code sau vào trước thẻ đóng </body><div id='nprogress'><div class='bar' role='bar'><div class='peg'></div></div></div>
<script>//<![CDATA[
!function(t){t.fn.viewportOffset=function(){var o=t(this).offset();return{top:o.top+t(window).scrollTop()}},t.fn.readingbar=function(){_=t(this);var o=_.outerHeight(),r=1.65*_.offset().top,n=0;t(document).on("scroll",function(){o=_.outerHeight(),n=(_.viewportOffset().top-r)/o*100,t("#nprogress .bar").css("width",n+"%"),t("#nprogress").css("opacity",n>100?"0":"1")})}}(jQuery);
jQuery(document).ready(function($) {$('.post-body').readingbar();});
loadJS('https://cdnjs.cloudflare.com/ajax/libs/fitvids/1.1.0/jquery.fitvids.min.js', function () {
jQuery(document).ready(function ($) {
var d = $("#Blog1");
d.fitVids(), d.find("img").addClass("img-responsive center-block");
});
loadJS('https://cdnjs.cloudflare.com/ajax/libs/photobox/1.9.9/photobox/jquery.photobox.min.js', function () {
$('.post-body').photobox('a[imageanchor]', {
time: 0
});
});
});
loadJS('https://npmcdn.com/social-likes-next@1.1.0/dist/social-likes.min.js');
function loadSdk(){setTimeout(function(){loadJS("https://connect.facebook.net/vi_VN/sdk.js#xfbml=1&version=v2.6&appId=458084867627529")},2000)}"complete"===document.readyState?loadSdk():window.addEventListener("DOMContentLoaded",loadSdk,!1);
//]]></script>
4. Lưu mẫu xem kết quả.Nâng Cao
Thay đổi màu thanh tiến trìnhTìm mả màu #29d rồi thay bằng mả màu của bạn
Vào đây lấy mã màu
Comments (5) Cancel reply