29k6٩(̾●̮̮̃̾•̃̾)۶5393

06 tháng 5, 2016

Chữ ký bài viết blog

→ Nguyễn Tĩnh 33 Đăng Lúc 19:30 → No comments

//]]></script>
</b:if>
</b:if>

<div class='wrapfullpost'>
<div class='post hentry'>
<a expr:name='data:post.id'/>
<div class='post-header-line-1'/>
<div class='post-body entry-content'>

CHÈN BÊN DƯỚI NHỮNG DÒNG TRÊN

<b:if cond='data:blog.pageType == "item"'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIPYbb1hSVeq9OTTjoMf8ztKdXx7D2Yv5U6w-QG0PDZzjBuLT8RyBf4iAcV7Lb6k6DVETi-x-5QPpFlqUMU_iTfsDCRjVHTNCYgFvhJmwL_T44Qrjsd343yQH2ZpLUVbY8oJ4PB0pGpNq5/s640/4P3M1522Reyaa5HrPfnX.JPG' style='float:right;'/>
</b:if>

CHÈN BÊN TRÊN NHỮNG DÒNG TRÊN

<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>","<data:post.url/>");
</script>
</b:if>

02 tháng 5, 2016

Hiệu ứng Ông già Nô En cưỡi tuần lộc nhân dịp Giáng sinh

→ Nguyễn Tĩnh 33 Đăng Lúc 20:29 → No comments

Để đưa hiệu ứng này vào blogspot của bạn, chỉ cần đưa toàn bộ đoạn code sau đây vào bất kỳ một bài viết nào đó ở chế độ Edit HTML, hoặc có thể đặt vào một tiện ích HTML/JavaScript bất kỳ.

<script type= "text/javascript ">
var textSpeed = 2;
var contentWidth;
var contentHeight;
var xMax;
var yMax;
var xPos = 0;
var yPos = 0;
var xDir = 'right';
var yDir = 'down';
function initializeText() 
{
if (typeof window.innerWidth != 'undefined')
{
xMax = window.innerWidth;
yMax = window.innerHeight;
}
else 
if (typeof document.documentElement != 'undefined' && typeof 
document.documentElement.clientWidth != 'undefined' && 
document.documentElement.clientWidth != 0)
{
xMax = document.documentElement.clientWidth;
yMax = document.documentElement.clientHeight;
}
else
{
xMax = document.getElementsByTagName('body')[0].clientWidth;
yMax = document.getElementsByTagName('body')[0].clientHeight;
}

var supertext = document.getElementById('supertext');
contentWidth = supertext.offsetWidth;
contentHeight = supertext.offsetHeight;

setTimeout('moveText()', 400);
}

function moveText() 
{
var supertext = document.getElementById('supertext');

calculatePosition();
supertext.style.left = xPos + document.body.scrollLeft + "px";
supertext.style.top = yPos + document.body.scrollTop + "px";
animatetext = setTimeout('moveText()', 20);
}
function calculatePosition() 
{
if (xDir == "right") 
{
if (xPos > (xMax - contentWidth - textSpeed)) 
{ 
xDir = "left";
}
}
else 
if (xDir == "left") 
{
if (xPos < (0 + textSpeed)) 
{
xDir = "right";
}
}
if (yDir == "down") 
{
if (yPos > (yMax - contentHeight - textSpeed)) 
{
yDir = "up";
}
}
else 
if (yDir == "up") 
{
if (yPos < (0 + textSpeed)) 
{
yDir = "down";
}
}
if (xDir == "right") 
{
xPos = xPos + textSpeed;
}
else 
if (xDir == "left") 
{
xPos = xPos - textSpeed;
}
else 
{
xPos = xPos;
}
if (yDir == "down") 
{
yPos = yPos + textSpeed;
}
else 
if (yDir == "up") 
{
yPos = yPos - textSpeed;
}
else 
{
yPos = yPos;
}
}

setTimeout('initializeText()', 500);
</script>
<span 
style="position:absolute;left:0;top:0;color:red;font-size:12px;font-family:Arial;font-weight:normal;font-style:normal;text-align:center;text-decoration:none;z-index:9999999999999"
 id="supertext"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKVy_bVrtCoeSjQY5C09DuWdqAY_-uRgc5-thUN0zDAqTW77hJ5qdH0Aw9MM5Cuam5urYe2JNq8NmXlDJIckAsFfn7nrAYAqsjLqWmd9_BGstlspFGuNJvc2n1d60Q2oK5c2uhbggtRzsT/s1600/papa-noel.gif"/><br/>MERRY CHRISTMAS!!!</span>

Và tất nhiên bạn có thể tìm những ảnh động về Giáng sinh khác TẠI ĐÂY hoặc trên Internet để lấy đường link và đặt vào dòng được đánh dấu màu đỏ trong đoạn code ở trên để tạo bản sắc riêng cho blog của bạn.
Chúc các bạn giáng sinh vui vẻ:
Thay chữ MERRY CHRISTMAS!!! tùy ý bạn

MERRY CHRISTMAS!!!

Tạo hiệu ứng bóng mờ (Fade Effect) từ jQuery cho Blogger

→ Nguyễn Tĩnh 33 Đăng Lúc 19:59 → No comments

Fade Effect là một hiệu ứng khiến ảnh mờ đi hình ảnh khi bạn đưa (trỏ) chuột vào vị trí hình ảnh hiện hành tạo ra hiệu ứng chuyên nghiệp làm cho Blogger của bạn hấp dẫn hơn. Đây thực ra là một nhánh của hiệu ứng Lazy load sử dụng thư viện Jquery.

Với cách này các hình ảnh trong blog của bạn sẽ được tích hợp hiệu ứng bóng mờ hoàn toàn tự động. Bạn sẽ không phải mất công ngồi cả tiếng đồng hồ để chèn thủ công cho từng ảnh như cách mình giới thiệu ở Bài này..

Demo for Post

☼ Tạo hiệu ứng bóng mờ (Fade Effect) khi dê chuột lên trên hình ảnh với hiệu ứng từ jQuery cho Blogger

1- Đăng nhập vào Blog
2- Vào Mẫu (Template)
3- Chọn Chỉnh sử HTML (Edit HTML).
4- Thêm đoạn code sau vào trước thẻ đóng </head> .

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>      
<script type='text/javascript'>       
$(document).ready(function(){       
$(".post img").fadeTo("slow", 1.0); // This sets the opacity of the thumbs to fade down to 30% when the page loads       
$(".post img").hover(function(){       
$(this).fadeTo("slow", 0.5); // This should set the opacity to 100% on hover       
},function(){       
$(this).fadeTo("slow", 1.0); // This should set the opacity back to 30% on mouseout       
});       
});       
</script>       
<script type='text/javascript'>       
$(document).ready(function(){       
$(".latest_img").fadeTo("slow", 1.0); // This sets the opacity of the thumbs to fade down to 30% when the page loads       
$(".latest_img").hover(function(){       
$(this).fadeTo("slow", 0.5); // This should set the opacity to 100% on hover       
},function(){       
$(this).fadeTo("slow", 1.0); // This should set the opacity back to 30% on mouseout       
});       
});       
</script>

» Tùy chỉnh code

Do thủ thuật này dùng hiệu ứng từ thư viện Jquery nên nếu trong blog của bạn đã có file Jquery rồi thì hãy xóa đoạn code màu xanh đi nha.
Đoạn màu cam 1.0 là hiệu ứng của ảnh khi bạn bắt đầu đưa chuột vào hình ảnh. hình ảnh sẽ mờ dần trong quá trình bạn dê chuột trên hình ảnh từ 100% (tức 1.0) xuống còn 50% (tức 0.5).
Phần 0.5 là độ mờ nhất của ảnh khi bạn đưa trỏ truột lên trên hình ảnh. Phần này bạn có thể tùy chỉnh độ mờ của hình ảnh theo ý muốn của bạn (Với 1.0 là độ nét nhất và 0.1 là mờ nhất).
Phần 1.0 màu vàng là hiệu ứng của ảnh khi bạn đưa trỏ chuột ra khỏi hình ảnh, Như trong đoạn code này thì hình ảnh đang mờ ở 50% (tức 0.5) sẽ nét lên 100% (tức 1.0) khi bạn đưa chuột ra khỏi hình ảnh.

4- Lưu mẫu lại và kiểm tra kết quả nha.

Chúc thành công!

27 tháng 4, 2016

Các hiệu ứng đẹp trang trí cho blogspot

→ Nguyễn Tĩnh 33 Đăng Lúc 19:48 → No comments

Các hiệu ứng đẹp trang trí cho blogspot

Để tạo cho Blog một mang phong cách cá nhân hoặc đơn giản chỉ là trang trí blog nhân các dịp đặc biệt như: tết, giáng sinh, sinh nhật blog,... Cách đơn giản nhất là "trang hoàng" thêm các hiệu ứng tuyết rơi, sao rơi, chim bay,.. cho blog của bạn. Dưới đây là các hiệu ứng đẹp, nếu thích hiệu ứng nào thì bạn chỉ cần làm theo các hướng dẫn bên dưới nha.

1- Đăng nhập vào Blog,

2- Chọn Bố cục (layout)

3- Chọn Thêm tiện ích > chọn HTML/Javacript rồi dán code tương ứng của mỗi hiệu ứng mà bạn chọn vào và lưu lại là xong.

* Hiệu ứng sao vàng rơi:

Demo

<marquee behavior="scroll" direction="down" style="position:absolute;border:0px;padding:0px;margin:0px;left:601px;top:7px;width:auto;height:653px;z-index:1;" scrollamount="2"><span class="falling1"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitiu8LKmhWgzEj0vJyOHOfx0DmhmQRDlsa_faj6z16fRYBDtkpBVmXFPsIH1nOewMm3mkz_dFz1PYIqqTH7ZukVG1yNAYzn1wGn3j5FB5CRCJIKx1tetPUvlYnAmLFMsGuK5MBI7xUNs8/s1600/namkna.blogspot.com_star.gif"/></span></marquee><marquee behavior="scroll" direction="down" style="position:absolute;border:0px;padding:0px;margin:0px;left:720px;top:64px;width:auto;height:232px;z-index:1;" scrollamount="1"><span class="falling1"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuTEad8JKKGCgIj44GaAEFad9zUJyVjnCVru6381uEW8Yt-qSOVfeySjiB0hCJvPMa6VT8Q0JkzRwBsaY1NI7tlJZHeSLao_-H9gWQBJXaojHbfavBDS6EX12rSU6relUklO0u0p0RtDI/"/></span></marquee><marquee behavior="scroll" direction="down" style="position:absolute;border:0px;padding:0px;margin:0px;left:735px;top:50px;width:auto;height:321px;z-index:1;" scrollamount="1"><span class="falling1"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuTEad8JKKGCgIj44GaAEFad9zUJyVjnCVru6381uEW8Yt-qSOVfeySjiB0hCJvPMa6VT8Q0JkzRwBsaY1NI7tlJZHeSLao_-H9gWQBJXaojHbfavBDS6EX12rSU6relUklO0u0p0RtDI/"/></span></marquee><marquee behavior="scroll" direction="down" style="position:absolute;border:0px;padding:0px;margin:0px;left:608px;top:78px;width:auto;height:125px;z-index:1;" scrollamount="6"><span class="falling1"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuTEad8JKKGCgIj44GaAEFad9zUJyVjnCVru6381uEW8Yt-qSOVfeySjiB0hCJvPMa6VT8Q0JkzRwBsaY1NI7tlJZHeSLao_-H9gWQBJXaojHbfavBDS6EX12rSU6relUklO0u0p0RtDI/"/></span></marquee><marquee behavior="scroll" direction="down" style="position:absolute;border:0px;padding:0px;margin:0px;left:43px;top:62px;width:auto;height:10px;z-index:1;" scrollamount="1"><span class="falling1"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuTEad8JKKGCgIj44GaAEFad9zUJyVjnCVru6381uEW8Yt-qSOVfeySjiB0hCJvPMa6VT8Q0JkzRwBsaY1NI7tlJZHeSLao_-H9gWQBJXaojHbfavBDS6EX12rSU6relUklO0u0p0RtDI/"/></span></marquee><marquee behavior="scroll" direction="down" style="position:absolute;border:0px;padding:0px;margin:0px;left:539px;top:97px;width:auto;height:426px;z-index:1;" scrollamount=""><span class="falling1"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuTEad8JKKGCgIj44GaAEFad9zUJyVjnCVru6381uEW8Yt-qSOVfeySjiB0hCJvPMa6VT8Q0JkzRwBsaY1NI7tlJZHeSLao_-H9gWQBJXaojHbfavBDS6EX12rSU6relUklO0u0p0RtDI/"/></span></marquee><marquee behavior="scroll" direction="down" style="position:absolute;border:0px;padding:0px;margin:0px;left:791px;top:45px;width:auto;height:178px;z-index:1;" scrollamount="3"><span class="falling1"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuTEad8JKKGCgIj44GaAEFad9zUJyVjnCVru6381uEW8Yt-qSOVfeySjiB0hCJvPMa6VT8Q0JkzRwBsaY1NI7tlJZHeSLao_-H9gWQBJXaojHbfavBDS6EX12rSU6relUklO0u0p0RtDI/"/></span></marquee><marquee behavior="scroll" direction="down" style="position:absolute;border:0px;padding:0px;margin:0px;left:278px;top:104px;width:auto;height:701px;z-index:1;" scrollamount="3"><span class="falling1"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuTEad8JKKGCgIj44GaAEFad9zUJyVjnCVru6381uEW8Yt-qSOVfeySjiB0hCJvPMa6VT8Q0JkzRwBsaY1NI7tlJZHeSLao_-H9gWQBJXaojHbfavBDS6EX12rSU6relUklO0u0p0RtDI/"/></span></marquee><marquee behavior="scroll" direction="down" style="position:absolute;border:0px;padding:0px;margin:0px;left:404px;top:69px;width:auto;height:211px;z-index:1;" scrollamount="2"><span class="falling1"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuTEad8JKKGCgIj44GaAEFad9zUJyVjnCVru6381uEW8Yt-qSOVfeySjiB0hCJvPMa6VT8Q0JkzRwBsaY1NI7tlJZHeSLao_-H9gWQBJXaojHbfavBDS6EX12rSU6relUklO0u0p0RtDI/"/></span></marquee><marquee behavior="scroll" direction="down" style="position:absolute;border:0px;padding:0px;margin:0px;left:331px;top:2px;width:auto;height:293px;z-index:1;" scrollamount="1"><span class="falling1"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuTEad8JKKGCgIj44GaAEFad9zUJyVjnCVru6381uEW8Yt-qSOVfeySjiB0hCJvPMa6VT8Q0JkzRwBsaY1NI7tlJZHeSLao_-H9gWQBJXaojHbfavBDS6EX12rSU6relUklO0u0p0RtDI/"/></span></marquee><marquee behavior="scroll" direction="down" style="position:absolute;border:0px;padding:0px;margin:0px;left:655px;top:89px;width:auto;height:399px;z-index:1;" scrollamount="7"><span class="falling1"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuTEad8JKKGCgIj44GaAEFad9zUJyVjnCVru6381uEW8Yt-qSOVfeySjiB0hCJvPMa6VT8Q0JkzRwBsaY1NI7tlJZHeSLao_-H9gWQBJXaojHbfavBDS6EX12rSU6relUklO0u0p0RtDI/"/></span></marquee><marquee behavior="scroll" direction="down" style="position:absolute;border:0px;padding:0px;margin:0px;left:813px;top:11px;width:auto;height:429px;z-index:1;" scrollamount="5"><span class="falling1"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuTEad8JKKGCgIj44GaAEFad9zUJyVjnCVru6381uEW8Yt-qSOVfeySjiB0hCJvPMa6VT8Q0JkzRwBsaY1NI7tlJZHeSLao_-H9gWQBJXaojHbfavBDS6EX12rSU6relUklO0u0p0RtDI/"/></span></marquee><marquee behavior="scroll" direction="down" style="position:absolute;border:0px;padding:0px;margin:0px;left:254px;top:109px;width:auto;height:146px;z-index:1;" scrollamount="7"><span class="falling1"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuTEad8JKKGCgIj44GaAEFad9zUJyVjnCVru6381uEW8Yt-qSOVfeySjiB0hCJvPMa6VT8Q0JkzRwBsaY1NI7tlJZHeSLao_-H9gWQBJXaojHbfavBDS6EX12rSU6relUklO0u0p0RtDI/"/></span></marquee><marquee behavior="scroll" direction="down" style="position:absolute;border:0px;padding:0px;margin:0px;left:616px;top:20px;width:auto;height:534px;z-index:1;" scrollamount=""><span class="falling1"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuTEad8JKKGCgIj44GaAEFad9zUJyVjnCVru6381uEW8Yt-qSOVfeySjiB0hCJvPMa6VT8Q0JkzRwBsaY1NI7tlJZHeSLao_-H9gWQBJXaojHbfavBDS6EX12rSU6relUklO0u0p0RtDI/"/></span></marquee><marquee behavior="scroll" direction="down" style="position:absolute;border:0px;padding:0px;margin:0px;left:652px;top:42px;width:auto;height:410px;z-index:1;" scrollamount="1"><span class="falling1"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuTEad8JKKGCgIj44GaAEFad9zUJyVjnCVru6381uEW8Yt-qSOVfeySjiB0hCJvPMa6VT8Q0JkzRwBsaY1NI7tlJZHeSLao_-H9gWQBJXaojHbfavBDS6EX12rSU6relUklO0u0p0RtDI/"/></span></marquee><marquee behavior="scroll" direction="down" style="position:absolute;border:0px;padding:0px;margin:0px;left:707px;top:96px;width:auto;height:39px;z-index:1;" scrollamount=""><span class="falling1"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuTEad8JKKGCgIj44GaAEFad9zUJyVjnCVru6381uEW8Yt-qSOVfeySjiB0hCJvPMa6VT8Q0JkzRwBsaY1NI7tlJZHeSLao_-H9gWQBJXaojHbfavBDS6EX12rSU6relUklO0u0p0RtDI/"/></span></marquee><marquee behavior="scroll" direction="down" style="position:absolute;border:0px;padding:0px;margin:0px;left:200px;top:76px;width:auto;height:137px;z-index:1;" scrollamount=""><span class="falling1"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuTEad8JKKGCgIj44GaAEFad9zUJyVjnCVru6381uEW8Yt-qSOVfeySjiB0hCJvPMa6VT8Q0JkzRwBsaY1NI7tlJZHeSLao_-H9gWQBJXaojHbfavBDS6EX12rSU6relUklO0u0p0RtDI/"/></span></marquee><marquee behavior="scroll" direction="down" style="position:absolute;border:0px;padding:0px;margin:0px;left:309px;top:13px;width:auto;height:338px;z-index:1;" scrollamount="5"><span class="falling1"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuTEad8JKKGCgIj44GaAEFad9zUJyVjnCVru6381uEW8Yt-qSOVfeySjiB0hCJvPMa6VT8Q0JkzRwBsaY1NI7tlJZHeSLao_-H9gWQBJXaojHbfavBDS6EX12rSU6relUklO0u0p0RtDI/"/></span></marquee><marquee behavior="scroll" direction="down" style="position:absolute;border:0px;padding:0px;margin:0px;left:622px;top:107px;width:auto;height:676px;z-index:1;" scrollamount="5"><span class="falling1"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuTEad8JKKGCgIj44GaAEFad9zUJyVjnCVru6381uEW8Yt-qSOVfeySjiB0hCJvPMa6VT8Q0JkzRwBsaY1NI7tlJZHeSLao_-H9gWQBJXaojHbfavBDS6EX12rSU6relUklO0u0p0RtDI/"/></span></marquee><marquee behavior="scroll" direction="down" style="position:absolute;border:0px;padding:0px;margin:0px;left:149px;top:76px;width:auto;height:199px;z-index:1;" scrollamount="5"><span class="falling1"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuTEad8JKKGCgIj44GaAEFad9zUJyVjnCVru6381uEW8Yt-qSOVfeySjiB0hCJvPMa6VT8Q0JkzRwBsaY1NI7tlJZHeSLao_-H9gWQBJXaojHbfavBDS6EX12rSU6relUklO0u0p0RtDI/"/></span></marquee><marquee behavior="scroll" direction="down" style="position:absolute;border:0px;padding:0px;margin:0px;left:506px;top:77px;width:auto;height:344px;z-index:1;" scrollamount="5"><span class="falling1"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuTEad8JKKGCgIj44GaAEFad9zUJyVjnCVru6381uEW8Yt-qSOVfeySjiB0hCJvPMa6VT8Q0JkzRwBsaY1NI7tlJZHeSLao_-H9gWQBJXaojHbfavBDS6EX12rSU6relUklO0u0p0RtDI/"/></span></marquee>

* Hiệu ứng sao rơi xuống với nhiều màu chớp tắt:

Demo

<marquee behavior="scroll" direction="down" style="position:absolute;border:0px;padding:0px;margin:0px;left:601px;top:7px;width:auto;height:653px;z-index:1;" scrollamount="2"><span class="falling1"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQy1FfAj5M28yAIsV35BfmMe_UjT6b3ZB7IO9vXH8jsv4turGVAodbhk7-Fb7aovE4c4Yl4KMIkcgKmTrqH2JWlfwSNyu0iycYCiQtK0X1ZDISCB5lwTxDz3TjZHG5wplEIIaURYOApgg/"/></span></marquee><marquee behavior="scroll" direction="down" style="position:absolute;border:0px;padding:0px;margin:0px;left:720px;top:64px;width:auto;height:232px;z-index:1;" scrollamount="1"><span class="falling1"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQy1FfAj5M28yAIsV35BfmMe_UjT6b3ZB7IO9vXH8jsv4turGVAodbhk7-Fb7aovE4c4Yl4KMIkcgKmTrqH2JWlfwSNyu0iycYCiQtK0X1ZDISCB5lwTxDz3TjZHG5wplEIIaURYOApgg/"/></span></marquee><marquee behavior="scroll" direction="down" style="position:absolute;border:0px;padding:0px;margin:0px;left:735px;top:50px;width:auto;height:321px;z-index:1;" scrollamount="1"><span class="falling1"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQy1FfAj5M28yAIsV35BfmMe_UjT6b3ZB7IO9vXH8jsv4turGVAodbhk7-Fb7aovE4c4Yl4KMIkcgKmTrqH2JWlfwSNyu0iycYCiQtK0X1ZDISCB5lwTxDz3TjZHG5wplEIIaURYOApgg/"/></span></marquee><marquee behavior="scroll" direction="down" style="position:absolute;border:0px;padding:0px;margin:0px;left:608px;top:78px;width:auto;height:125px;z-index:1;" scrollamount="6"><span class="falling1"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQy1FfAj5M28yAIsV35BfmMe_UjT6b3ZB7IO9vXH8jsv4turGVAodbhk7-Fb7aovE4c4Yl4KMIkcgKmTrqH2JWlfwSNyu0iycYCiQtK0X1ZDISCB5lwTxDz3TjZHG5wplEIIaURYOApgg/"/></span></marquee><marquee behavior="scroll" direction="down" style="position:absolute;border:0px;padding:0px;margin:0px;left:43px;top:62px;width:auto;height:10px;z-index:1;" scrollamount="1"><span class="falling1"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQy1FfAj5M28yAIsV35BfmMe_UjT6b3ZB7IO9vXH8jsv4turGVAodbhk7-Fb7aovE4c4Yl4KMIkcgKmTrqH2JWlfwSNyu0iycYCiQtK0X1ZDISCB5lwTxDz3TjZHG5wplEIIaURYOApgg/"/></span></marquee><marquee behavior="scroll" direction="down" style="position:absolute;border:0px;padding:0px;margin:0px;left:539px;top:97px;width:auto;height:426px;z-index:1;" scrollamount=""><span class="falling1"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQy1FfAj5M28yAIsV35BfmMe_UjT6b3ZB7IO9vXH8jsv4turGVAodbhk7-Fb7aovE4c4Yl4KMIkcgKmTrqH2JWlfwSNyu0iycYCiQtK0X1ZDISCB5lwTxDz3TjZHG5wplEIIaURYOApgg/"/></span></marquee><marquee behavior="scroll" direction="down" style="position:absolute;border:0px;padding:0px;margin:0px;left:791px;top:45px;width:auto;height:178px;z-index:1;" scrollamount="3"><span class="falling1"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQy1FfAj5M28yAIsV35BfmMe_UjT6b3ZB7IO9vXH8jsv4turGVAodbhk7-Fb7aovE4c4Yl4KMIkcgKmTrqH2JWlfwSNyu0iycYCiQtK0X1ZDISCB5lwTxDz3TjZHG5wplEIIaURYOApgg/"/></span></marquee><marquee behavior="scroll" direction="down" style="position:absolute;border:0px;padding:0px;margin:0px;left:278px;top:104px;width:auto;height:701px;z-index:1;" scrollamount="3"><span class="falling1"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQy1FfAj5M28yAIsV35BfmMe_UjT6b3ZB7IO9vXH8jsv4turGVAodbhk7-Fb7aovE4c4Yl4KMIkcgKmTrqH2JWlfwSNyu0iycYCiQtK0X1ZDISCB5lwTxDz3TjZHG5wplEIIaURYOApgg/"/></span></marquee><marquee behavior="scroll" direction="down" style="position:absolute;border:0px;padding:0px;margin:0px;left:404px;top:69px;width:auto;height:211px;z-index:1;" scrollamount="2"><span class="falling1"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQy1FfAj5M28yAIsV35BfmMe_UjT6b3ZB7IO9vXH8jsv4turGVAodbhk7-Fb7aovE4c4Yl4KMIkcgKmTrqH2JWlfwSNyu0iycYCiQtK0X1ZDISCB5lwTxDz3TjZHG5wplEIIaURYOApgg/"/></span></marquee><marquee behavior="scroll" direction="down" style="position:absolute;border:0px;padding:0px;margin:0px;left:331px;top:2px;width:auto;height:293px;z-index:1;" scrollamount="1"><span class="falling1"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQy1FfAj5M28yAIsV35BfmMe_UjT6b3ZB7IO9vXH8jsv4turGVAodbhk7-Fb7aovE4c4Yl4KMIkcgKmTrqH2JWlfwSNyu0iycYCiQtK0X1ZDISCB5lwTxDz3TjZHG5wplEIIaURYOApgg/"/></span></marquee><marquee behavior="scroll" direction="down" style="position:absolute;border:0px;padding:0px;margin:0px;left:655px;top:89px;width:auto;height:399px;z-index:1;" scrollamount="7"><span class="falling1"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQy1FfAj5M28yAIsV35BfmMe_UjT6b3ZB7IO9vXH8jsv4turGVAodbhk7-Fb7aovE4c4Yl4KMIkcgKmTrqH2JWlfwSNyu0iycYCiQtK0X1ZDISCB5lwTxDz3TjZHG5wplEIIaURYOApgg/"/></span></marquee><marquee behavior="scroll" direction="down" style="position:absolute;border:0px;padding:0px;margin:0px;left:813px;top:11px;width:auto;height:429px;z-index:1;" scrollamount="5"><span class="falling1"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQy1FfAj5M28yAIsV35BfmMe_UjT6b3ZB7IO9vXH8jsv4turGVAodbhk7-Fb7aovE4c4Yl4KMIkcgKmTrqH2JWlfwSNyu0iycYCiQtK0X1ZDISCB5lwTxDz3TjZHG5wplEIIaURYOApgg/"/></span></marquee><marquee behavior="scroll" direction="down" style="position:absolute;border:0px;padding:0px;margin:0px;left:254px;top:109px;width:auto;height:146px;z-index:1;" scrollamount="7"><span class="falling1"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQy1FfAj5M28yAIsV35BfmMe_UjT6b3ZB7IO9vXH8jsv4turGVAodbhk7-Fb7aovE4c4Yl4KMIkcgKmTrqH2JWlfwSNyu0iycYCiQtK0X1ZDISCB5lwTxDz3TjZHG5wplEIIaURYOApgg/"/></span></marquee><marquee behavior="scroll" direction="down" style="position:absolute;border:0px;padding:0px;margin:0px;left:616px;top:20px;width:auto;height:534px;z-index:1;" scrollamount=""><span class="falling1"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQy1FfAj5M28yAIsV35BfmMe_UjT6b3ZB7IO9vXH8jsv4turGVAodbhk7-Fb7aovE4c4Yl4KMIkcgKmTrqH2JWlfwSNyu0iycYCiQtK0X1ZDISCB5lwTxDz3TjZHG5wplEIIaURYOApgg/"/></span></marquee><marquee behavior="scroll" direction="down" style="position:absolute;border:0px;padding:0px;margin:0px;left:652px;top:42px;width:auto;height:410px;z-index:1;" scrollamount="1"><span class="falling1"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQy1FfAj5M28yAIsV35BfmMe_UjT6b3ZB7IO9vXH8jsv4turGVAodbhk7-Fb7aovE4c4Yl4KMIkcgKmTrqH2JWlfwSNyu0iycYCiQtK0X1ZDISCB5lwTxDz3TjZHG5wplEIIaURYOApgg/"/></span></marquee><marquee behavior="scroll" direction="down" style="position:absolute;border:0px;padding:0px;margin:0px;left:707px;top:96px;width:auto;height:39px;z-index:1;" scrollamount=""><span class="falling1"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQy1FfAj5M28yAIsV35BfmMe_UjT6b3ZB7IO9vXH8jsv4turGVAodbhk7-Fb7aovE4c4Yl4KMIkcgKmTrqH2JWlfwSNyu0iycYCiQtK0X1ZDISCB5lwTxDz3TjZHG5wplEIIaURYOApgg/"/></span></marquee><marquee behavior="scroll" direction="down" style="position:absolute;border:0px;padding:0px;margin:0px;left:200px;top:76px;width:auto;height:137px;z-index:1;" scrollamount=""><span class="falling1"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQy1FfAj5M28yAIsV35BfmMe_UjT6b3ZB7IO9vXH8jsv4turGVAodbhk7-Fb7aovE4c4Yl4KMIkcgKmTrqH2JWlfwSNyu0iycYCiQtK0X1ZDISCB5lwTxDz3TjZHG5wplEIIaURYOApgg/"/></span></marquee><marquee behavior="scroll" direction="down" style="position:absolute;border:0px;padding:0px;margin:0px;left:309px;top:13px;width:auto;height:338px;z-index:1;" scrollamount="5"><span class="falling1"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQy1FfAj5M28yAIsV35BfmMe_UjT6b3ZB7IO9vXH8jsv4turGVAodbhk7-Fb7aovE4c4Yl4KMIkcgKmTrqH2JWlfwSNyu0iycYCiQtK0X1ZDISCB5lwTxDz3TjZHG5wplEIIaURYOApgg/"/></span></marquee><marquee behavior="scroll" direction="down" style="position:absolute;border:0px;padding:0px;margin:0px;left:622px;top:107px;width:auto;height:676px;z-index:1;" scrollamount="5"><span class="falling1"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQy1FfAj5M28yAIsV35BfmMe_UjT6b3ZB7IO9vXH8jsv4turGVAodbhk7-Fb7aovE4c4Yl4KMIkcgKmTrqH2JWlfwSNyu0iycYCiQtK0X1ZDISCB5lwTxDz3TjZHG5wplEIIaURYOApgg/"/></span></marquee><marquee behavior="scroll" direction="down" style="position:absolute;border:0px;padding:0px;margin:0px;left:149px;top:76px;width:auto;height:199px;z-index:1;" scrollamount="5"><span class="falling1"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQy1FfAj5M28yAIsV35BfmMe_UjT6b3ZB7IO9vXH8jsv4turGVAodbhk7-Fb7aovE4c4Yl4KMIkcgKmTrqH2JWlfwSNyu0iycYCiQtK0X1ZDISCB5lwTxDz3TjZHG5wplEIIaURYOApgg/"/></span></marquee><marquee behavior="scroll" direction="down" style="position:absolute;border:0px;padding:0px;margin:0px;left:506px;top:77px;width:auto;height:344px;z-index:1;" scrollamount="5"><span class="falling1"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQy1FfAj5M28yAIsV35BfmMe_UjT6b3ZB7IO9vXH8jsv4turGVAodbhk7-Fb7aovE4c4Yl4KMIkcgKmTrqH2JWlfwSNyu0iycYCiQtK0X1ZDISCB5lwTxDz3TjZHG5wplEIIaURYOApgg/"/></span></marquee>

Hiệu ứng lá rơi:

Demo

<script type='text/javascript'>
// <![CDATA[

  //Configure below to change URL path to the snow image
  var snowsrc="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBXaJhKgr7XGO0gfjh0-91J8jA2BHBxKd35fAZNCC99EuQt4y9pHaZLaWeF9c11eXENdMm0eFzsq_g-Hk4wHeVWzG4y1Ksb1Peo_2QKUpOR0P5I_rdbjrS-ptFmr6-Tshhf0ozOlT-tqc/s1600/FallingLeaves.gif"
  // Configure below to change number of snow to render
  var no = 10;
  // Configure whether snow should disappear after x seconds (0=never):
  var hidesnowtime = 0;
  // Configure how much snow should drop down before fading ("windowheight" or "pageheight")
  var snowdistance = "pageheight";

///////////Stop Config//////////////////////////////////

  var ie4up = (document.all) ? 1 : 0;
  var ns6up = (document.getElementById&&!document.all) ? 1 : 0;

 function iecompattest(){
 return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
 }

  var dx, xp, yp;    // coordinate and position variables
  var am, stx, sty;  // amplitude and step variables
  var i, doc_width = 800, doc_height = 600; 
  
  if (ns6up) {
    doc_width = self.innerWidth;
    doc_height = self.innerHeight;
  } else if (ie4up) {
    doc_width = iecompattest().clientWidth;
    doc_height = iecompattest().clientHeight;
  }

  dx = new Array();
  xp = new Array();
  yp = new Array();
  am = new Array();
  stx = new Array();
  sty = new Array();
  snowsrc=(snowsrc.indexOf("dynamicdrive.com")!=-1)? "snow.gif" : snowsrc
  for (i = 0; i < no; ++ i) {  
    dx[i] = 0;                        // set coordinate variables
    xp[i] = Math.random()*(doc_width-50);  // set position variables
    yp[i] = Math.random()*doc_height;
    am[i] = Math.random()*20;         // set amplitude variables
    stx[i] = 0.02 + Math.random()/10; // set step variables
    sty[i] = 0.7 + Math.random();     // set step variables
  if (ie4up||ns6up) {
      if (i == 0) {
        document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><a href=\"http://dynamicdrive.com\"><img src='"+snowsrc+"' border=\"0\"><\/a><\/div>");
      } else {
        document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><img src='"+snowsrc+"' border=\"0\"><\/div>");
      }
    }
  }

  function snowIE_NS6() {  // IE and NS6 main animation function
    doc_width = ns6up?window.innerWidth-10 : iecompattest().clientWidth-10;
  doc_height=(window.innerHeight && snowdistance=="windowheight")? window.innerHeight : (ie4up && snowdistance=="windowheight")?  iecompattest().clientHeight : (ie4up && !window.opera && snowdistance=="pageheight")? iecompattest().scrollHeight : iecompattest().offsetHeight;
    for (i = 0; i < no; ++ i) {  // iterate for every dot
      yp[i] += sty[i];
      if (yp[i] > doc_height-50) {
        xp[i] = Math.random()*(doc_width-am[i]-30);
        yp[i] = 0;
        stx[i] = 0.02 + Math.random()/10;
        sty[i] = 0.7 + Math.random();
      }
      dx[i] += stx[i];
      document.getElementById("dot"+i).style.top=yp[i]+"px";
      document.getElementById("dot"+i).style.left=xp[i] + am[i]*Math.sin(dx[i])+"px";  
    }
    snowtimer=setTimeout("snowIE_NS6()", 10);
  }

 function hidesnow(){
  if (window.snowtimer) clearTimeout(snowtimer)
  for (i=0; i<no; i++) document.getElementById("dot"+i).style.visibility="hidden"
 }
  

if (ie4up||ns6up){
    snowIE_NS6();
  if (hidesnowtime>0)
  setTimeout("hidesnow()", hidesnowtime*1000)
  }
// ]]>
</script>

Hiệu ứng tuyết rơi:

Demo

<script type='text/javascript'>
// <![CDATA[
/*
https://sites.google.com/site/bloggertricksandtoolz/snowstormeffectbywww.bloggertricksandtoolz.com.js
   DHTML Snowstorm! OO-style Jascript-based Snow effect
   ----------------------------------------------------
   Version 1.4.20091115 (Previous rev: v1.3.20081215)
   Code by Scott Schiller - http://schillmania.com
   ----------------------------------------------------
  
   Initializes after body onload() by default (via addEventHandler() call at bottom.)
   To customize properties, edit below or override configuration after this script
   has run (but before body.onload), eg. snowStorm.snowStick = false;

*/

var snowStorm = null;

function SnowStorm() {

  // --- PROPERTIES ---

  this.flakesMax = 128;           // Limit total amount of snow made (falling + sticking)
  this.flakesMaxActive = 64;      // Limit amount of snow falling at once (less = lower CPU use)
  this.animationInterval = 33;    // Theoretical "miliseconds per frame" measurement. 20 = fast + smooth, but high CPU use. 50 = more conservative, but slower
  this.flakeBottom = null;        // Integer for Y axis snow limit, 0 or null for "full-screen" snow effect
  this.targetElement = null;      // element which snow will be appended to (document body if null/undefined) - can be an element ID string, or a DOM node reference
  this.followMouse = true;        // Snow will change movement with the user's mouse
  this.snowColor = '#fff';        // Don't eat (or use?) yellow snow.
  this.snowCharacter = '&bull;';  // &bull; = bullet, &middot; is square on some systems etc.
  this.snowStick = true;          // Whether or not snow should "stick" at the bottom. When off, will never collect.
  this.useMeltEffect = true;      // When recycling fallen snow (or rarely, when falling), have it "melt" and fade out if browser supports it
  this.useTwinkleEffect = false;  // Allow snow to randomly "flicker" in and out of view while falling
  this.usePositionFixed = false;  // true = snow not affected by window scroll. may increase CPU load, disabled by default - if enabled, used only where supported

  // --- less-used bits ---

  this.flakeLeftOffset = 0;       // amount to subtract from edges of container
  this.flakeRightOffset = 0;      // amount to subtract from edges of container
  this.flakeWidth = 8;            // max pixel width for snow element
  this.flakeHeight = 8;           // max pixel height for snow element
  this.vMaxX = 5;                 // Maximum X velocity range for snow
  this.vMaxY = 4;                 // Maximum Y velocity range
  this.zIndex = 0;                // CSS stacking order applied to each snowflake

  // --- End of user section ---

  // jslint global declarations
  /*global window, document, navigator, clearInterval, setInterval */

  var addEvent = (typeof(window.attachEvent)=='undefined'?function(o,evtName,evtHandler) {
 return o.addEventListener(evtName,evtHandler,false);
  }:function(o,evtName,evtHandler) {
 return o.attachEvent('on'+evtName,evtHandler);
  });

  var removeEvent = (typeof(window.attachEvent)=='undefined'?function(o,evtName,evtHandler) {
    return o.removeEventListener(evtName,evtHandler,false);
  }:function(o,evtName,evtHandler) {
 return o.detachEvent('on'+evtName,evtHandler);
  });

  function rnd(n,min) {
    if (isNaN(min)) {
   min = 0;
 }
    return (Math.random()*n)+min;
  }

  function plusMinus(n) {
    return (parseInt(rnd(2),10)==1?n*-1:n);
  }

  var s = this;
  var storm = this;
  this.timers = [];
  this.flakes = [];
  this.disabled = false;
  this.active = false;

  var isIE = navigator.userAgent.match(/msie/i);
  var isIE6 = navigator.userAgent.match(/msie 6/i);
  var isOldIE = (isIE && (isIE6 || navigator.userAgent.match(/msie 5/i)));
  var isWin9X = navigator.appVersion.match(/windows 98/i);
  var isiPhone = navigator.userAgent.match(/iphone/i);
  var isBackCompatIE = (isIE && document.compatMode == 'BackCompat');
  var noFixed = ((isBackCompatIE || isIE6 || isiPhone)?true:false);
  var screenX = null;
  var screenX2 = null;
  var screenY = null;
  var scrollY = null;
  var vRndX = null;
  var vRndY = null;
  var windOffset = 1;
  var windMultiplier = 2;
  var flakeTypes = 6;
  var fixedForEverything = false;
  var opacitySupported = (function(){
    try {
   document.createElement('div').style.opacity = '0.5';
    } catch (e) {
   return false;
    }
    return true;
  })();
  var docFrag = document.createDocumentFragment();
  if (s.flakeLeftOffset === null) {
 s.flakeLeftOffset = 0;
  }
  if (s.flakeRightOffset === null) {
 s.flakeRightOffset = 0;
  }

  this.meltFrameCount = 20;
  this.meltFrames = [];
  for (var i=0; i<this.meltFrameCount; i++) {
 this.meltFrames.push(1-(i/this.meltFrameCount));
  }

  this.randomizeWind = function() {
    vRndX = plusMinus(rnd(s.vMaxX,0.2));
    vRndY = rnd(s.vMaxY,0.2);
    if (this.flakes) {
      for (var i=0; i<this.flakes.length; i++) {
        if (this.flakes[i].active) {
          this.flakes[i].setVelocities();
  }
      }
    }
  };

  this.scrollHandler = function() {
    // "attach" snowflakes to bottom of window if no absolute bottom value was given
    scrollY = (s.flakeBottom?0:parseInt(window.scrollY||document.documentElement.scrollTop||document.body.scrollTop,10));
    if (isNaN(scrollY)) {
   scrollY = 0; // Netscape 6 scroll fix
 }
    if (!fixedForEverything && !s.flakeBottom && s.flakes) {
      for (var i=s.flakes.length; i--;) {
        if (s.flakes[i].active === 0) {
       s.flakes[i].stick();
  }
      }
    }
  };

  this.resizeHandler = function() {
    if (window.innerWidth || window.innerHeight) {
      screenX = window.innerWidth-(!isIE?16:2)-s.flakeRightOffset;
      screenY = (s.flakeBottom?s.flakeBottom:window.innerHeight);
    } else {
      screenX = (document.documentElement.clientWidth||document.body.clientWidth||document.body.scrollWidth)-(!isIE?8:0)-s.flakeRightOffset;
      screenY = s.flakeBottom?s.flakeBottom:(document.documentElement.clientHeight||document.body.clientHeight||document.body.scrollHeight);
    }
    screenX2 = parseInt(screenX/2,10);
  };

  this.resizeHandlerAlt = function() {
    screenX = s.targetElement.offsetLeft+s.targetElement.offsetWidth-s.flakeRightOffset;
    screenY = s.flakeBottom?s.flakeBottom:s.targetElement.offsetTop+s.targetElement.offsetHeight;
    screenX2 = parseInt(screenX/2,10);
  };

  this.freeze = function() {
    // pause animation
    if (!s.disabled) {
      s.disabled = 1;
    } else {
      return false;
    }
    for (var i=s.timers.length; i--;) {
      clearInterval(s.timers[i]);
    }
  };

  this.resume = function() {
    if (s.disabled) {
       s.disabled = 0;
    } else {
      return false;
    }
    s.timerInit();
  };

  this.toggleSnow = function() {
    if (!s.flakes.length) {
      // first run
      s.start();
    } else {
      s.active = !s.active;
      if (s.active) {
        s.show();
        s.resume();
      } else {
        s.stop();
        s.freeze();
      }
    }
  };

  this.stop = function() {
    this.freeze();
    for (var i=this.flakes.length; i--;) {
      this.flakes[i].o.style.display = 'none';
    }
    removeEvent(window,'scroll',s.scrollHandler);
    removeEvent(window,'resize',s.resizeHandler);
    if (!isOldIE) {
      removeEvent(window,'blur',s.freeze);
      removeEvent(window,'focus',s.resume);
    }
  };

  this.show = function() {
    for (var i=this.flakes.length; i--;) {
      this.flakes[i].o.style.display = 'block';
    }
  };

  this.SnowFlake = function(parent,type,x,y) {
    var s = this;
    var storm = parent;
    this.type = type;
    this.x = x||parseInt(rnd(screenX-20),10);
    this.y = (!isNaN(y)?y:-rnd(screenY)-12);
    this.vX = null;
    this.vY = null;
    this.vAmpTypes = [1,1.2,1.4,1.6,1.8]; // "amplification" for vX/vY (based on flake size/type)
    this.vAmp = this.vAmpTypes[this.type];
    this.melting = false;
    this.meltFrameCount = storm.meltFrameCount;
    this.meltFrames = storm.meltFrames;
    this.meltFrame = 0;
    this.twinkleFrame = 0;
    this.active = 1;
    this.fontSize = (10+(this.type/5)*10);
    this.o = document.createElement('div');
    this.o.innerHTML = storm.snowCharacter;
    this.o.style.color = storm.snowColor;
    this.o.style.position = (fixedForEverything?'fixed':'absolute');
    this.o.style.width = storm.flakeWidth+'px';
    this.o.style.height = storm.flakeHeight+'px';
    this.o.style.fontFamily = 'arial,verdana';
    this.o.style.overflow = 'hidden';
    this.o.style.fontWeight = 'normal';
    this.o.style.zIndex = storm.zIndex;
    docFrag.appendChild(this.o);

    this.refresh = function() {
   if (isNaN(s.x) || isNaN(s.y)) {
  // safety check
  return false;
   }
      s.o.style.left = s.x+'px';
      s.o.style.top = s.y+'px';
    };

    this.stick = function() {
      if (noFixed || (storm.targetElement != document.documentElement && storm.targetElement != document.body)) {
        s.o.style.top = (screenY+scrollY-storm.flakeHeight)+'px';
      } else if (storm.flakeBottom) {
     s.o.style.top = storm.flakeBottom+'px';
   } else {
        s.o.style.display = 'none';
     s.o.style.top = 'auto';
        s.o.style.bottom = '0px';
     s.o.style.position = 'fixed';
        s.o.style.display = 'block';
      }
    };

    this.vCheck = function() {
      if (s.vX>=0 && s.vX<0.2) {
        s.vX = 0.2;
      } else if (s.vX<0 && s.vX>-0.2) {
        s.vX = -0.2;
      }
      if (s.vY>=0 && s.vY<0.2) {
        s.vY = 0.2;
      }
    };

    this.move = function() {
      var vX = s.vX*windOffset;
      s.x += vX;
      s.y += (s.vY*s.vAmp);
      if (s.x >= screenX || screenX-s.x < storm.flakeWidth) { // X-axis scroll check
        s.x = 0;
      } else if (vX < 0 && s.x-storm.flakeLeftOffset<0-storm.flakeWidth) {
        s.x = screenX-storm.flakeWidth-1; // flakeWidth;
      }
      s.refresh();
      var yDiff = screenY+scrollY-s.y;
      if (yDiff<storm.flakeHeight) {
        s.active = 0;
     if (storm.snowStick) {
          s.stick();
     } else {
       s.recycle();
     }
      } else {
     if (storm.useMeltEffect && s.active && s.type < 3 && !s.melting && Math.random()>0.998) {
       // ~1/1000 chance of melting mid-air, with each frame
       s.melting = true;
       s.melt();
       // only incrementally melt one frame
       // s.melting = false;
     }
     if (storm.useTwinkleEffect) {
    if (!s.twinkleFrame) {
   if (Math.random()>0.9) {
        s.twinkleFrame = parseInt(Math.random()*20,10);
      }
    } else {
   s.twinkleFrame--;
   s.o.style.visibility = (s.twinkleFrame && s.twinkleFrame%2===0?'hidden':'visible');
    }
     }
      }
    };

    this.animate = function() {
      // main animation loop
      // move, check status, die etc.
      s.move();
    };

    this.setVelocities = function() {
      s.vX = vRndX+rnd(storm.vMaxX*0.12,0.1);
      s.vY = vRndY+rnd(storm.vMaxY*0.12,0.1);
    };

 this.setOpacity = function(o,opacity) {
   if (!opacitySupported) {
  return false;
   }
   o.style.opacity = opacity;
 };

    this.melt = function() {
   if (!storm.useMeltEffect || !s.melting) {
  s.recycle();
   } else {
  if (s.meltFrame < s.meltFrameCount) {
    s.meltFrame++;
    s.setOpacity(s.o,s.meltFrames[s.meltFrame]);
    s.o.style.fontSize = s.fontSize-(s.fontSize*(s.meltFrame/s.meltFrameCount))+'px';
    s.o.style.lineHeight = storm.flakeHeight+2+(storm.flakeHeight*0.75*(s.meltFrame/s.meltFrameCount))+'px';
  } else {
    s.recycle();
  }
   }
    };

    this.recycle = function() {
      s.o.style.display = 'none';
      s.o.style.position = (fixedForEverything?'fixed':'absolute');
      s.o.style.bottom = 'auto';
      s.setVelocities();
      s.vCheck();
   s.meltFrame = 0;
   s.melting = false;
   s.setOpacity(s.o,1);
   s.o.style.padding = '0px';
   s.o.style.margin = '0px';
   s.o.style.fontSize = s.fontSize+'px';
   s.o.style.lineHeight = (storm.flakeHeight+2)+'px';
   s.o.style.textAlign = 'center';
   s.o.style.verticalAlign = 'baseline';
      s.x = parseInt(rnd(screenX-storm.flakeWidth-20),10);
      s.y = parseInt(rnd(screenY)*-1,10)-storm.flakeHeight;
      s.refresh();
      s.o.style.display = 'block';
      s.active = 1;
    };

    this.recycle(); // set up x/y coords etc.
    this.refresh();

  };

  this.snow = function() {
    var active = 0;
    var used = 0;
    var waiting = 0;
    var flake = null;
    for (var i=s.flakes.length; i--;) {
      if (s.flakes[i].active == 1) {
        s.flakes[i].move();
        active++;
      } else if (s.flakes[i].active === 0) {
        used++;
      } else {
        waiting++;
      }
      if (s.flakes[i].melting) {
     s.flakes[i].melt();
   }
    }
    if (active<s.flakesMaxActive) {
      flake = s.flakes[parseInt(rnd(s.flakes.length),10)];
      if (flake.active === 0) {
        flake.melting = true;
      }
    }
  };

  this.mouseMove = function(e) {
    if (!s.followMouse) {
   return true;
 }
    var x = parseInt(e.clientX,10);
    if (x<screenX2) {
      windOffset = -windMultiplier+(x/screenX2*windMultiplier);
    } else {
      x -= screenX2;
      windOffset = (x/screenX2)*windMultiplier;
    }
  };

  this.createSnow = function(limit,allowInactive) {
    for (var i=0; i<limit; i++) {
      s.flakes[s.flakes.length] = new s.SnowFlake(s,parseInt(rnd(flakeTypes),10));
      if (allowInactive || i>s.flakesMaxActive) {
     s.flakes[s.flakes.length-1].active = -1;
   }
    }
    storm.targetElement.appendChild(docFrag);
  };

  this.timerInit = function() {
    s.timers = (!isWin9X?[setInterval(s.snow,s.animationInterval)]:[setInterval(s.snow,s.animationInterval*3),setInterval(s.snow,s.animationInterval)]);
  };

  this.init = function() {
    s.randomizeWind();
    s.createSnow(s.flakesMax); // create initial batch
    addEvent(window,'resize',s.resizeHandler);
    addEvent(window,'scroll',s.scrollHandler);
    if (!isOldIE) {
      addEvent(window,'blur',s.freeze);
      addEvent(window,'focus',s.resume);
    }
    s.resizeHandler();
    s.scrollHandler();
    if (s.followMouse) {
      addEvent(document,'mousemove',s.mouseMove);
    }
    s.animationInterval = Math.max(20,s.animationInterval);
    s.timerInit();
  };

  var didInit = false;

  this.start = function(bFromOnLoad) {
 if (!didInit) {
   didInit = true;
 } else if (bFromOnLoad) {
   // already loaded and running
   return true;
 }
    if (typeof s.targetElement == 'string') {
   var targetID = s.targetElement;
      s.targetElement = document.getElementById(targetID);
      if (!s.targetElement) {
     throw new Error('Snowstorm: Unable to get targetElement "'+targetID+'"');
   }
    }
 if (!s.targetElement) {
   s.targetElement = (!isIE?(document.documentElement?document.documentElement:document.body):document.body);
 }
    if (s.targetElement != document.documentElement && s.targetElement != document.body) {
   s.resizeHandler = s.resizeHandlerAlt; // re-map handler to get element instead of screen dimensions
 }
    s.resizeHandler(); // get bounding box elements
    s.usePositionFixed = (s.usePositionFixed && !noFixed); // whether or not position:fixed is supported
    fixedForEverything = s.usePositionFixed;
    if (screenX && screenY && !s.disabled) {
      s.init();
      s.active = true;
    }
  };

  function doStart() {
   s.start(true);
  }

  if (document.addEventListener) {
    // safari 3.0.4 doesn't do DOMContentLoaded, maybe others - use a fallback to be safe.
    document.addEventListener('DOMContentLoaded',doStart,false);
    window.addEventListener('load',doStart,false);
  } else {
    addEvent(window,'load',doStart);
  }

}

snowStorm = new SnowStorm();
// ]]>
</script>

Hiệu ứng chim bay theo con trỏ chuột:

Demo

<script type='text/javascript'>
// <![CDATA[
var colour="black";
var sparkles=100;

var x=ox=400;
var y=oy=300;
var swide=800;
var shigh=600;
var sleft=sdown=0;
var tiny=new Array();
var star=new Array();
var starv=new Array();
var starx=new Array();
var stary=new Array();
var tinyx=new Array();
var tinyy=new Array();
var tinyv=new Array();
window.onload=function() { if (document.getElementById) {
var i, rats, rlef, rdow;
for (var i=0; i<sparkles; i++) {
var rats=createDiv(3, 3);
rats.style.visibility="hidden";
document.body.appendChild(tiny[i]=rats);
starv[i]=0;
tinyv[i]=0;
var rats=createDiv(5, 5);
rats.style.backgroundColor="transparent";
rats.style.visibility="hidden";
var rlef=createDiv(1, 5);
var rdow=createDiv(5, 1);
rats.appendChild(rlef);
rats.appendChild(rdow);
rlef.style.top="3px";
rlef.style.left="0px";
rdow.style.top="0px";
rdow.style.left="3px";
document.body.appendChild(star[i]=rats);
}
set_width();
sparkle();
}}
function sparkle() {
var c;
if (x!=ox || y!=oy) {
ox=x;
oy=y;
for (c=0; c<sparkles; c++) if (!starv[c]) {
star[c].style.left=(starx[c]=x)+"px";

star[c].style.top=(stary[c]=y)+"px";
star[c].style.clip="rect(0px, 5px, 5px, 0px)";
star[c].style.visibility="visible";
starv[c]=50;
break;
}
}
for (c=0; c<sparkles; c++) {
if (starv[c]) update_star(c);
if (tinyv[c]) update_tiny(c);
}
setTimeout("sparkle()", 40);
}
function update_star(i) {
if (--starv[i]==25) star[i].style.clip="rect(1px, 4px, 4px, 1px)";
if (starv[i]) {
stary[i]+=1+Math.random()*3;
if (stary[i]<shigh+sdown) {
star[i].style.top=stary[i]+"px";
starx[i]+=(i%5-2)/5;
star[i].style.left=starx[i]+"px";
}
else {
star[i].style.visibility="hidden";
starv[i]=0;
return;
}

}
else {
tinyv[i]=50;
tiny[i].style.top=(tinyy[i]=stary[i])+"px";
tiny[i].style.left=(tinyx[i]=starx[i])+"px";
tiny[i].style.width="2px";
tiny[i].style.height="2px";
star[i].style.visibility="hidden";
tiny[i].style.visibility="visible"
}
}
function update_tiny(i) {
if (--tinyv[i]==25) {
tiny[i].style.width="1px";
tiny[i].style.height="1px";
}
if (tinyv[i]) {
tinyy[i]+=1+Math.random()*3;
if (tinyy[i]<shigh+sdown) {
tiny[i].style.top=tinyy[i]+"px";
tinyx[i]+=(i%5-2)/5;
tiny[i].style.left=tinyx[i]+"px";
}
else {


tiny[i].style.visibility="hidden";
tinyv[i]=0;
return;
}
}
else tiny[i].style.visibility="hidden";
}
document.onmousemove=mouse;
function mouse(e) {
set_scroll();
y=(e)?e.pageY:event.y+sdown;
x=(e)?e.pageX:event.x+sleft;
}
function set_scroll() {
if (typeof(self.pageYOffset)=="number") {
sdown=self.pageYOffset;
sleft=self.pageXOffset;
}
else if (document.body.scrollTop || document.body.scrollLeft) {
sdown=document.body.scrollTop;
sleft=document.body.scrollLeft;
}
else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {
sleft=document.documentElement.scrollLeft;
sdown=document.documentElement.scrollTop;
}
else {
sdown=0;
sleft=0;
}
}
window.onresize=set_width;
function set_width() {
if (typeof(self.innerWidth)=="number") {
swide=self.innerWidth;
shigh=self.innerHeight;
}
else if (document.documentElement && document.documentElement.clientWidth) {
swide=document.documentElement.clientWidth;
shigh=document.documentElement.clientHeight;
}
else if (document.body.clientWidth) {
swide=document.body.clientWidth;
shigh=document.body.clientHeight;
}
}
function createDiv(height, width) {
var div=document.createElement("div");
div.style.position="absolute";
div.style.height=height+"px";
div.style.width=width+"px";
div.style.overflow="hidden";
div.style.backgroundColor=colour;
return (div);
}
// ]]>
</script>

Hiệu ứng bông tuyết rơi:

Demo

<script type='text/javascript'>
// <![CDATA[
//Configure below to change URL path to the snow image
  var snowsrc="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjthnelqidPxKfLR2FE69lxbGqbsypp2_xRQGDTr9HErZop6xeypR2kaaal-XgsdHBSvL5sJ35Psw9V5DBwtigX7uf1YZMS-qo49vwsu3s3UoU9EDkXaYyJaXcWWgV0nHGvjxrqhVtkYC8/s1600/SnowFlake.gif"
  // Configure below to change number of snow to render
  var no = 10;
  // Configure whether snow should disappear after x seconds (0=never):
  var hidesnowtime = 0;
  // Configure how much snow should drop down before fading ("windowheight" or "pageheight")
  var snowdistance = "pageheight";

///////////Stop Config//////////////////////////////////

  var ie4up = (document.all) ? 1 : 0;
  var ns6up = (document.getElementById&&!document.all) ? 1 : 0;

 function iecompattest(){
 return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
 }

  var dx, xp, yp;    // coordinate and position variables
  var am, stx, sty;  // amplitude and step variables
  var i, doc_width = 800, doc_height = 600; 
  
  if (ns6up) {
    doc_width = self.innerWidth;
    doc_height = self.innerHeight;
  } else if (ie4up) {
    doc_width = iecompattest().clientWidth;
    doc_height = iecompattest().clientHeight;
  }

  dx = new Array();
  xp = new Array();
  yp = new Array();
  am = new Array();
  stx = new Array();
  sty = new Array();
  snowsrc=(snowsrc.indexOf("dynamicdrive.com")!=-1)? "snow.gif" : snowsrc
  for (i = 0; i < no; ++ i) {  
    dx[i] = 0;                        // set coordinate variables
    xp[i] = Math.random()*(doc_width-50);  // set position variables
    yp[i] = Math.random()*doc_height;
    am[i] = Math.random()*20;         // set amplitude variables
    stx[i] = 0.02 + Math.random()/10; // set step variables
    sty[i] = 0.7 + Math.random();     // set step variables
  if (ie4up||ns6up) {
      if (i == 0) {
        document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><a href=\"http://dynamicdrive.com\"><img src='"+snowsrc+"' border=\"0\"><\/a><\/div>");
      } else {
        document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><img src='"+snowsrc+"' border=\"0\"><\/div>");
      }
    }
  }

  function snowIE_NS6() {  // IE and NS6 main animation function
    doc_width = ns6up?window.innerWidth-10 : iecompattest().clientWidth-10;
  doc_height=(window.innerHeight && snowdistance=="windowheight")? window.innerHeight : (ie4up && snowdistance=="windowheight")?  iecompattest().clientHeight : (ie4up && !window.opera && snowdistance=="pageheight")? iecompattest().scrollHeight : iecompattest().offsetHeight;
    for (i = 0; i < no; ++ i) {  // iterate for every dot
      yp[i] += sty[i];
      if (yp[i] > doc_height-50) {
        xp[i] = Math.random()*(doc_width-am[i]-30);
        yp[i] = 0;
        stx[i] = 0.02 + Math.random()/10;
        sty[i] = 0.7 + Math.random();
      }
      dx[i] += stx[i];
      document.getElementById("dot"+i).style.top=yp[i]+"px";
      document.getElementById("dot"+i).style.left=xp[i] + am[i]*Math.sin(dx[i])+"px";  
    }
    snowtimer=setTimeout("snowIE_NS6()", 10);
  }

 function hidesnow(){
  if (window.snowtimer) clearTimeout(snowtimer)
  for (i=0; i<no; i++) document.getElementById("dot"+i).style.visibility="hidden"
 }
  

if (ie4up||ns6up){
    snowIE_NS6();
  if (hidesnowtime>0)
  setTimeout("hidesnow()", hidesnowtime*1000)
  }
// ]]>
</script>

Bạn cũng có thể góp nhiều hiệu ứng lại với nhau để tạo cho mình một Blog thật đẹp

22 tháng 4, 2016

Video bình thường,

→ Nguyễn Tĩnh 33 Đăng Lúc 23:28 → No comments

Trong hình trên:

1. Đây là toàn bộ code HTML của Video.
2. Đây là các tùy chỉnh cho Video, bạn có thể chọn màu sắc, bỏ viền … cho Video.

Khi đã cảm thấy ưng ý với các tùy chỉnh do bạn chọn, bạn copy toàn bộ code ở mục 1. nhé.
Rồi, khi đã có code, chúng ta tiến hành chèn Video vào Blog với các chế độ dưới đây nha.

1. Video bình thường, không tự động chạy:
Code

2.Video ở chế độ Auto Play ( tự động chạy)

Muốn cho Video của bạn khi chèn vào Blog sẽ tự động chạy thì chú ý đoạn code ở phần 1. Trong đoạn code trên, bạn thay :

en&fs=1 bằng en&autoplay=1, như vậy, bạn đã tạo lệnh Auto Play cho code HTML trên rồi đấy, khá đơn giản phải không bạn.

Sau khi thay vào ta được code dưới đây:

Code

hl=en&autoplay=1;&loop=1;&rel=0; " type="application/x-shockwave-flash" height="400" width="100%">

Kết quả sau khi thay đoạn lệnh trên :

3. Chèn Video làm nhạc nền cho Blog:

Tốc đọ Load nhạc ở Youtube khá nhanh và ổn định, vì vậy sẽ rất tuyệt vời khi bạn lấy Video từ trang này làm nhạc nền cho BLog của bạn, khá đơn giản để làm được điều này, chỉ cần bạn thay chiều rộng và chiều cao của đoạn code ở mục thứ 2 ( AutoPlay) = 1 là được ngay:
Code

29k6٩(̾●̮̮̃̾•̃̾)۶5393

06 tháng 5, 2016

Chữ ký bài viết blog

02 tháng 5, 2016

Hiệu ứng Ông già Nô En cưỡi tuần lộc nhân dịp Giáng sinh

Tạo hiệu ứng bóng mờ (Fade Effect) từ jQuery cho Blogger

☼ Tạo hiệu ứng bóng mờ (Fade Effect) khi dê chuột lên trên hình ảnh với hiệu ứng từ jQuery cho Blogger

27 tháng 4, 2016

Các hiệu ứng đẹp trang trí cho blogspot

* Hiệu ứng sao vàng rơi:

* Hiệu ứng sao rơi xuống với nhiều màu chớp tắt:

Hiệu ứng lá rơi:

Hiệu ứng tuyết rơi:

Hiệu ứng chim bay theo con trỏ chuột:

Hiệu ứng bông tuyết rơi:

22 tháng 4, 2016

Video bình thường,

Featured

Featured Posts

Featured Posts

Profile

Popular Posts

Followers

.

.

Đã ghé thăm

Quote

Lưu trữ Blog

Recent Posts

Bài Viết