Thủ thuật tạo widget bất kì trượt 2 bên cho blogspot

Vietchiase.com | Góc chia sẻ dành cho người Việt | 3/4/14

Trước đây mình có một số bài viết về chủ đề tạo Widget cho blog . Hôm nay mình giới thiệu đến các bạn thêm một Thủ thuật tạo widget bất kì trượt 2 bên cho blogspot . Widget này sẽ tự động trượt theo blog khi chúng ta dùng các phím di chuyển và nó không làm ảnh hưởng đến tính thẩm mỹ của blog.
Ảnh minh họa :

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

1. Đăng nhập blogger

2. Chọn mẫu--> Chỉnh sửa HTML

3. Thêm đoạn mã dưới đây vào sau thẻ <head> trong template của bạn.

<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ì có thể bỏ qua bước này để tránh xung đột code

4. Vào blogger -->Bố cục --> Thêm tiện ích HTML/Javascript và dán code bên dưới vào

<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 của widget
</div>

Các bạn điều chỉnh lại những chỗ mình đổi màu theo ý mình riêng phần Nội dung của widget là phần bạn muốn trượt dọc, nó có thể là một bức ảnh,thông báo,....

5. Lưu lại và xem kết quả

Chúc các bạn thành công !

Like , G+ và Share ủng hộ Vietchiase.com - Góc chia sẻ dành cho người Việt nhé ! ❤ Cám ơn ❤

Chia sẻ: