Hiệu ứng tuyết rơi trang trí blogspot dịp Noel

12/19/15 | 2 nhận xét
Để chào đón Noel, Namloan sẽ hướng dẫn các bạn cách tạo hiệu ứng bông tuyết rơi cho blogspot của bạn. 
Hiệu ứng tuyết rơi đẹp trang trí blogspot dịp Noel
Hiệu ứng tuyết rơi được tạo ra nhờ Jquery, do vậy các bông tuyết rơi rất mượt mà, đẹp măt,bạn có thể thay đổi tốc độ rơi và kích thước của bông tuyết. Sau đây chúng ta cùng bắt tay vào thực hiện.

Bạn có thể xem demo tại đây:
Demo Hiệu ứng tuyết rơi cho Blogspot

THÊM HIỆU ỨNG TUYẾT RƠI CHO BLOGSPOT

1. Đăng nhập vào bảng điều khiển Blog của bạn.
2. Bấm chọn Mẫu (template) => Chỉnh sử HTML
Chỉnh sửa HTML trong Blogspot
3. Thêm đoạn mã bên dưới vào sau thẻ mở <head> trong blogspot của bạn.

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'/>
<script type='text/javascript'>
      //<![CDATA[
(function($){$.fn.snow=function(options){var $flake=$('<div id="flake" />').css({'position':'absolute','top':'-50px'}).html('&#10052;'),documentHeight=$(document).height(),documentWidth=$(document).width(),defaults={minSize:10,maxSize:20,newOn:500,flakeColor:"#FFFFFF"},options=$.extend({},defaults,options);var interval=setInterval(function(){var startPositionLeft=Math.random()*documentWidth-100,startOpacity=0.5+Math.random(),sizeFlake=options.minSize+Math.random()*options.maxSize,endPositionTop=documentHeight-40,endPositionLeft=startPositionLeft-100+Math.random()*200,durationFall=documentHeight*10+Math.random()*5000;$flake.clone().appendTo('body').css({left:startPositionLeft,opacity:startOpacity,'font-size':sizeFlake,color:options.flakeColor}).animate({top:endPositionTop,left:endPositionLeft,opacity:0.2},durationFall,'linear',function(){$(this).remove()});},options.newOn);};})(jQuery);
$(document).ready( function(){
$.fn.snow({ minSize: 10, maxSize: 50, newOn: 400, flakeColor: '#ffffff' });
});
      //]]>
</script>
»  Tuỳ chỉnh code:
  • Nếu trong Blog của bạn đã có thư viện JQuery rồi thì hãy xoá bỏ đoạn mã màu xanh đi nhé.
  • minSize: 10, - Thiết lập kích thước tối thiểu của bông tuyết, bằng cách thay đổi kích thước tối thiểu và kích thước tối đa bạn có thể tạo ra nhiều bông tuyết khác nhau cho phù hợp với blog của bạn. 
  • maxsize: 50, Thiết lập kích thước tối đa của bông tuyết.
  • newOn: 400, Thiết lập tần số rơi của các bông tuyết đơn vị tính là mili giây (1000 mili giây = 1 giây), số này càng tớn thì tần số bông tuyết xuất hiện càng ít, và ngược lại nếu số này càng nhỏ thì tần số rơi của bông tuyết sẽ càng tăng lên. 
  • flakeColor: '#ffffff' là màu của các bông tuyết, hãy thay đổi mã màu #ffffff cho phù hợp với blog của bạn nhé, bạn nên chọn màu tương phản với màu nền blog của bạn, ví dụ: nếu blog bạn màu nền là màu trắng thì nên chọn bông tuyết màu đỏ hoặc màu xanh. Nếu không biết chọn mã màu nào bạn có thể xem Bảng mã màu của Namloan tại: Color Conveter
4. Bấm Lưu mẫu của bạn lại và xem kết quả nhé.
Cảm ơn bạn đã đọc bài viết! Hãy like nếu bài viết có ích →

2 nhận xét

khanh chicanh
3/21/19, 1:49 AM xóa commnet

Hiệu ứng tuyệt quá, mình sẽ áp dụng cho trang cá nhân của mình. Qua đây mình cũng muốn chia sẻ đến bạn và mọi người địa chỉ cung cấp DV phiên dịch và dịch thuật đa ngôn ngữ, đa ngành nghề.... uy tín, nhanh chóng, chất lượng... trên toàn quốc. Công Ty Phiên Dịch - Dịch Thuật A2Z, đơn vị cung cấp DV phiên dịch, dịch thuật số 1 tại Việt Nam. Điểm lợi khi sử dụng DV phiên dịch, dịch thuật tại A2Z: tiết kiệm tối đa thời gian, chi phí, tăng khả năng thành công trong công việc, hoàn phí khi có lỗi từ DV. Tham khảo chi tiết ngôn ngữ phiên dịch, dịch thuật và địa chỉ: phiên dịch tiếng anh ngành đi phượt, phiên dịch dịch thuật huyện vạn ninh, phiên dịch uy tín huyện cam lâm, Cửa hàng phiên dịch tiếng anh, phiên dịch dịch thuật huyện long điền, phiên dịch dịch thuật huyện long điền, tại sao chọn a2z huyện vạn ninh, showroom a2z phiên dịch huyện diên khánh, phiên dịch ngành kỹ thuật uy tín, cửa hàng phiên dịch huyện long điền, Lý do nên chọn A2Z châu đức, phiên dịch đa ngôn ngữ cam lâm, tiếng anh phiên dịch ngành kỹ thuật, tiếng anh phiên dịch huyện long điền, phiên dịch uy tín huyện khánh sơn, Địa chỉ phiên dịch nhanh giá rẻ, phiên dịch uy tín tp hưng yên, phiên dịch dịch thuật huyện diên khánh, địa chỉ phiên dịch trên toàn quốc,...............

Reply

Post a Comment

≡ NỘI QUY PHẢN HỒI
» Blog nhằm mục đích hướng dẫn, chia sẻ những thông tin cho tất cả mọi người, do vậy để hữu ích chúng tôi rất mong nhận được các phản hồi từ các bạn.
» Những chủ đề chúng tôi đưa ra đều được thử nghiệm và kiểm duyệt trước khi chia sẻ do vậy nếu bạn có bất kỳ thắc mắc hãy để lại nhận xét của bạn, chúng tôi sẽ trả lời khi có phản hồi từ các bạn.
» Hy vọng các bạn để lại những phản hồi có tính chất xây dựng không nên spam link.

Mã Hóa Code