Trước đây mình đã giới thiệu một code làm cho widget trượt theo blog nhưng không có giới hạn nhưng hôm nay mình sẽ giới thiệu một thủ thuật giúp cho khi widget cách bottom một khoảng cách nhất định sẽ tự động trượt lên để không làm ảnh hưởng về mặt thẩm mỹ cho footerCài đặt jquery cho blog
Bước 1: Vào blogger → Mẫu → Chỉnh sửa HTMLBước 2: Chèn đoạn code bên dưới vào sau thẻ <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>
Thêm widget chạy dọc theo blog
Vào blogger → Bố cục → 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'>Bạn có thể tùy chỉnh cho widget như sau:
#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 của widget
</div>
- top:0px: Khoảng cách của widget đến lề trên khi di chuyển dọc
- documentHeight>2500: Nếu bài viết dài quá 2500px thì widget mới chạy dọc
- bottomHeight=1200: Cách bottom 1200px widget sẽ tự động chạy lên trên
Nguồn Internet
10 comments
Nhưng khi thực hiện thì có chút vấn đề với theme hai mảnh tiện ích nằm hết bên tay phải thì quá ok !nhưng ở phần theme tiện ích nằm bên trái thì nó chạy theo phần bài viết mình không thấy trong code có phần chỉnh cái này nên không biết chỉnh sao cho nó chuyển qua bên trái bạn giúp mình với nhé !Cảm ơn bạn rất nhiều
Nếu có gì comment lại để mình tìm hiểu thêm về vấn đề này nhé :)
Tôi rất thích tranh Web của bạn
TB [Bạn cho mình hỏi Temp của bạn đang dùng gọi là gì vậy ?
Mình rất muốn sài bộ comment như đa cấp như của bạn nhưng không biết tách chữ Reply ra khỏi khung Avatta và chuyển nó lùi hẳn sang bên trái phía dưới cùng ,còn avatta chuyển qua bên phải?Một lần nữa xin chân thành cảm ơn bạn .
Nếu bạn muốn thay đổi style cho comment đa cấp thì tìm cách chỉnh chửa css một chút là được.
Tips: Sử dụng chức năng kiểm tra phần tử của Chrome (F12) sau đó chỉnh sửa thử tại khung Style bên phải trước khi thực hiện vào template
http://2.bp.blogspot.com/-ejb-n64ptBs/US3MVo3V6MI/AAAAAAAALF8/lfY37bR7g9s/s1600/thanhhdieuhuong.png
Còn việc thay màu chữ bạn phải biết được nó thuộc thành phần nào để chỉnh sửa CSS
Cảm ơn bạn đã ghé thăm Troll VL !
Insert Emoticons» Tạm thời ngăn không cho comment với chế độ ẩn danh vì có một số bạn không có thành ý cố tình spam. Mong các bạn thông cảm!
» Bạn nên viết bằng Tiếng Việt có dấu để mọi người dễ đọc, dễ bình luận
» Để liên hệ,góp ý và đóng góp bài viết bạn click vào đây
Sử dụng các thẻ sau cho comments
» Chèn nội dung vào blockquote <b rel="quote">Nội dung blockquote</b>
» Chèn nội dung vào note <em rel="note">Nội dung note</em>
» Chèn code vào khung pre <i rel="pre">Nội dung code</i>
» Chèn hình ảnh <i rel="image">Link hình ảnh</i>
» Chèn video từ youtube [youtube]link video[/youtube]
» Chèn link <i rel="anchor">Link</i>
Mã Hóa Code Tạo và xem trước comments Cancel Reply
&Convert
'Convert
"Convert
<Convert
>