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 

code đếm ngược - countdown kiểu flipclock

code đếm ngược - countdown kiểu flipclock - code thích hợp đếm ngược đến sự kiện nào đó

toàn bộ code đơn giản mà đẹp

Share code jquery lá vàng rơi

Thu sang rồi trang trí chút cho blog với hiệu ứng lá vàng rơi cho chút lạ lẫm thêm không khí mùa thu :

Cách làm khá đơn giản :

Thêm thanh công cụ bên cạnh website

Thanh công cụ social sẽ nằm bên phải - màu sắc bắt mắt và luôn cố định  tại 1 vị trí trên trang web nhằm giới thiệu link các social network của bạn , dù bài có dài nó sẽ luôn ở 1 chỗ trên cao .

1- thêm widget - html/javascript vào template của bạn

Hiện thị tin mới nhất kiểu ticker

Thích hợp các trang kiểu tin tức chạy dòng Ticker ngay trên trang chủ , dựa trên jquery ticker - code cách này khá dài dòng  tuy nhiên ăn sẵn nên ta cứ lấy mà dùng :)

ticker  giống như hình nè

còn thực tế nó chạy  như nè

1- tạo 1 widget html gần header cho nổi bật

Tự động xóa link spam trong phần comment của blogspot

các webmaster đi đặt backlink lung tung mà không hỏi chủ blog - bạn ngày ngày phải đi xóa các comment - dù đã đặt capchart -chỉ vài thủ thuật nhỏ bạn sẽ cho các backlink này bay luôn khỏi comment để khỏi làm phiền bạn đọc
thêm chút css để cho các link a này bay luôn theo chiều gió.

hình ảnh minh họa phần trao đổi liên kết là nhiều backlink nhất -test

hình mang tính chất minh họa cho bài viết

Jquery nprogress tạo hiệu ứng load trang đang xử lý

đây là 1 hiệu ứng jquery giúp tạo cảm giác cho người đang xem website có cảm giác đang chờ trang web load .
 nprogress sẽ cho ta cảm giác  biết được số liệu, hiệu suất, tiến độ website đến đâu .

demo
http://ricostacruz.com/nprogress/

Hiệu ứng pháo hoa - jquery

để làm hiệu ứng rất đơn giản so với hiệu ứng javascript thì mượt và  nhanh hơn nhiều .
xem demo luôn tại đây -

B1
thêm style css vào trước  ]]></b:skin>

  #mblfireworks{
                display: block;    
                width: 1000px;
                height: 735px;
                float: center;
                color:#6F6F6F;
                text-align: center;
                font-size: 12px;
            }
            #mblfireworks a {
                color:#6F6F6F;
            }

B2

Tạo popup chỉ hiện 1 lần cho blogspot

tương tự chức năng của javascript popup quảng cáo khuyến mãi - tuy nhiên lần này dùng jquery nên có vẻ mượt mà và load nhẹ hơn - demo mượn tạm trang chính chủ
đặc điểm
popup chỉ hiện 1 lần duy nhất

nhược điểm chỉ tương thích thư viện jquery 1.8 trở về quá khứ - 1.9 thì kiếm cái khác dùng thôi
cách nhúng .

jquery scroll đẹp và gọn với nice scroll

Nếu bạn không thích scroll xấu xí của trình duyệt hãy thử dùng  nice scroll của jquery

khả năng của nice srcoll thật bất ngờ khi tương thích hầu hết các thiết bị  từ pc đến mobile và trình duyệt hiện tại  kể cả ie6 đã gần như tuyệt chủng
cách dùng :

Jquery Tooltip đẹp và đơn giản cho trang web

Tooltip tuy nhỏ nhưng cũng góp phần làm đẹp trang web của bạn , với tooltip tipsy dễ dùng

1 load thư viện jquery

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'></script>

2 load style csss

Hiệu ứng trở về đầu trang - scroll Top jquery đơn giản

Hiệu ứng scroll top ta thường thấy xuất hiện ở 1 số trang web có nội dung dài -khiến người lướt web phải lăn mouse 3 hay dùng trỏ chuột kéo thanh scroll bar rất bất tiện .

Khi sử dụng hiệu ứng jquery scroll top sẽ giúp người dùng trở về ngay đầu trang - tránh làm mất thời gian
- nút bấm scroll top sẽ xuất hiện thi nội dung trang web được

Chống xung Đột các thư viện jquery và javascript

Cách dùng chung jQuery với các thư viện javascript khác

Khi ứng dụng web của bạn dùng  thư viện jQuery chung với các thư viện javascript khác như Prototype. Dùng nhiều trong cách tạo menu ,slideshow và các hiệu ứng ảnh ,sự xung đột sẽ xảy ra do 2 thư viện này đều dùng hàm $(). Sự tranh giành sẽ dẫn đến kết quả  chỉ cho 1 thư viện chạy thôi còn thằng kia không hoạt động.

Để khắc phục việc này, bạn sử dụng phương thức jQuery.noConflict().bằng cách định nghĩa lại hàm