thêm hiệu ứng pháo hoa ngày tết vào blogspot

khi bạn click vào bất cứ đâu trên trang web hiệu ứng pháo hoa sẽ xuất hiện để tích hợp vào blogspot bạn cần Copy code chèn vào trước </body>

Tạo tools upload ảnh bằng api của imgur

Tool do   jQuery plugin zzImgUr ver 1.6 by zzbaivong phát triển

1. Tải ảnh không giảm chất lượng nhờ dùng host ImgUr.
2. Ảnh sau khi tải lên được cập nhật trực tiếp vào khung soạn thảo.
3. Không sử dụng PHP, chỉ dùng HTML5 và javascript, CSS để định dạng. ngạc nhiên chưa
4. Sử dụng dễ dàng 7 định dạng BBcode mặc định, hoặc có thể tùy biến dữ liệu với 7 định dạng link.
5. Có thể xóa ảnh, và loại bỏ dữ liệu trong khung soạn thảo dễ dàng.
6. Dễ dàng chuyển đổi 2 phương pháp tải ảnh thông dụng từ máy tính và từ liên kết.
7. Kiểm soát định dàng, các ảnh trùng lặp và giới hạn 10 ảnh tối đa mỗi lượt, giúp tiết kiệm băng thông (vì mỗi app đăng ký trên ImgUr bị giới hạn).
8. Giao diện hiện đại với đầy đủ thông tin tiến trình tải ảnh cơ bản.

Để sử dụng api này bạn phải có 1 key riêng

Tạo ứng rê chuột đến đâu mạng nhện xuất hiện đến đó

Tạo ứng rê chuột đến đâu mạng nhện xuất hiện đến đó ,
hiệu ứng khá dẹp  sử dụng html5 trông như ma trận các nút phân tử hóa học vậy

 demo
http://codepen.io/thetwistedtaste/pen/GgrWLp
 để thêm hiệu ứng rê chuột kiểu  hóa học này ta  làm như sau

Jquery di chuyển chuột ra hoa rơi

code đơn giản nhẹ nhàng khi di chuyển chuột thì hoa sẽ rơi

<script>
jQuery(document).on('mousemove', function(e) {
    function function_name(argument) {
        // body...
    }
    var xMouse = e.pageX;
    var yMouse = e.pageY;
    if (Math.random() < 0.1) {
        setTimeout(function() {
            var l = document.createElement("DIV");
            var size = (Math.floor(Math.random() * (30 - 10)) + 10);
            l.style.width = size + "px";
            l.style.height = size + "px";
            l.style.backgroundImage = "url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGtrb-LSgyO4RFMwa_jDKSgmED9pkhZj8Soin3h9RiI7ssDI_AxgWWRE5GU0aLZ8QyfDAPOPIFjMM6W_-9hvP_iJb53FDngw-7tm-gaVvRKSLyYsgkP6Yy2OFaH5a43q605R7VNkVlUTo/s1600/newyear.png)";
            var bg_pos = (Math.floor(Math.random() * 4));
            l.style.backgroundPosition = "0px -"+(size*bg_pos)+"px";
            l.style.backgroundSize = size + "px "+4*size+"px"
            l.style.position = "absolute";
            l.style.left = (xMouse) + "px";
            l.style.top = (yMouse + 10) + "px";
            l.style.zIndex = 999;
            l.style.display = 'none';
            document.body.appendChild(l);
            jQuery(l).fadeIn(200);
            var stop = false;
            var hoaroi = function() {
                if (!stop) {
                    setTimeout(function() {
                        window.requestAnimationFrame(hoaroi);
                    }, 20);
                    l.style.top = (parseInt(jQuery(l).css('top'), 10) + 1) + "px";
                    if ((parseInt(jQuery(l).css('top'), 10)) % 10 == 0) {
                        if (Math.random() < 0.5) {
                            l.style.left = (parseInt(jQuery(l).css('left'), 10) + 1) + "px";
                        } else {
                            l.style.left = (parseInt(jQuery(l).css('left'), 10) - 1) + "px";
                        }
                    }
                }
            }
            window.requestAnimationFrame(hoaroi);
            jQuery(l).fadeOut((Math.floor(Math.random() * (1500 - 250)) + 150), function() {
                jQuery(l).remove();
                stop = true;
            });
        }, 50);
    }
});
</script>

Script con ruồi fshare

Gần đây fshare ra mắt script ruồi độc đáo làm ko ít người ngạc nhiên , ruồi các điểm nổi bật sau :

 -Ruồi bò  lung tung trên website, với số lượng max là 3 con ruồi

Tạo hiệu ứng link chạy cuộn liên tục simplyscroll

Để add widget này ta làm như sau ta dùng hiệu ứng simply scroll
Với plugin này, các bạn có thể cuộn nội dung  bên trong theo chiều ngang, chiều dọc, cuộn về bên trái hay bên phải, có thể cho nó tự động chạy ho

ặc điều khiển bằng các nút bấm….

B1 :add thư viện jquery nếu chưa có

Tạo menu responsive cho label của blogspot

Việc google cập nhật thuật toán thân thiện với mobile ảnh hưởng không nhỏ đến các webmaster- 1 menu responsive sẽ dễ dàng được tạo ra  với slicknav jquery  các bạn sử dụng menu responsive cho labels của blogspot rất đơn giản 

Tạo slide ảnh đơn giản cho website

đây có thể nói là silde rất dễ làm chỉ vài dòng code là có ngay 1 slide đơn giản nhưng hiệu ứng thì rất đẹp :

B1 :phần script