Thứ Năm, 3 tháng 4, 2014

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

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 !
vào lúc

Không có nhận xét nào:

Đăng nhận xét