Hướng dẫn làm widget trượt dọc 2 bên blog

Blogs có nhiều giao diển hổ trợ hiển thị rất tốt như là website, kinh nghiệm blog và hướng dẫn làm blog của mình cũng đã tử và test rất nhiều code khác nhau để có một site cực tốt theo đúng yêu cầu.,
a

THêm thanh trượt 2 bên cho blog của bạn

Hướng dẫn làm thanh trượt 2 bên cho website, hướng dẫn trượt 2 bên cho blog
1: Cài đặt jquery cho blog của bạn

Bước 1: Vào blogger → Mẫu (template) → Chỉnh sửa HTML (Edit HTML)
Bước 2: Chèn đoạn code bên dưới vào ngay sau thẻ mở <head> rồi lưu lại template

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js' type='text/javascript'></script>

Nếu template của bạn cài jquery rồi thì bỏ qua bước này để tránh xung đột code.
2:  Thêm widget trượt dọc 2 bên blog
Vào blogger → Bố cục (Layout) → Thêm widget HTML/Javascript mới vào vị trí bạn muốn sau đó dán code sau vào phần nội dung rồi lưu lại

<style type='text/css'>
#floatDivWrapper {font-size:11px}
#floatDiv.fixed {position:fixed;top:0px}
</style>
<script type='text/javascript'>//<![CDATA[
$(document).ready(function(){var documentHeight=$(document).height();if(documentHeight>2500){
//$("#floatDivWrapper").css('position','fixed');$("#floatDiv").css({'position':'fixed','top':30});
var bottomHeight=1200;var msie6=$.browser=='msie'&&$.browser.version<7;if(!msie6){var top=$('#floatDiv').offset().top-parseFloat($('#floatDiv').css('margin-top').replace(/auto/,0));$(window).scroll(function(event){var y=$(this).scrollTop();if(y>=top&&y<=(documentHeight-bottomHeight)){$('#floatDiv').addClass('fixed')}else{$('#floatDiv').removeClass('fixed')}})}}});
//]]></script>
<script type='text/javascript'>//<![CDATA[
var s=true;function doBlink(){$('.blink').css('display',function(index,val){s=!s;return (s)?'block':'none';})}
$(document).ready(function() {setInterval("doBlink()",0)});
//]]></script>
<div class='widget HTML' id='floatDiv'>
Nội dung trượt 2 bên blog của bạn
</div>


3: Bạn có thể tùy chỉnh cho widget như bên dưới :

top:0px: Khoảng cách của widget đến lề trên khi di trượt dọc.
documentHeight>2500: Nếu bài viết dài quá 2500px thì widget mới trượt dọc.
bottomHeight=1200: Cách bottom 1200px widget sẽ tự động chạy lên phía trên.
Nội dung trượt 2 bên blog của bạn đây là phần chứa những gì bạn muốn trược dọc, đó có thể là một bức ảnh, một đoạn thông báo hay bất cứ thứ gì khác bạn muốn trượt dọc cho blog của mình.

Chúc các bạn trang trí blog của mình thật đẹp và làm đúng theo hướng dẫn làm thanh trượt 2 bên cho blog

2 تعليقات

إرسال تعليق
أحدث أقدم