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

Thời điểm Giáng sinh ngày càng đến gần và hơn bao giờ hết, mỗi blogger chúng ta đều có ý tưởng trang trí cho blog của mình thật đẹp hơn cho dịp đặc biệt này.

Ở bài viết trước tôi đã giới thiệu hiệu ứng Ông già Nô En với câu chúc Merry Christmas di chuyển vòng quanh blog thật ngộ nghĩnh. Hôm nay tôi tiếp tục giới thiệu một hiệu ứng khác, về cơ bản khá giống với hiệu ứng trước, ở đây chỉ điều chỉnh một chút, hiệu ứng với Ông già Nô En cưỡi tuần lộc di chuyển từ góc trái blog rồi sau đó bỗng nhiên biến mất.

Xem Demo

Để đư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ỳ.

<div id='closeit' style='border: 0 !important;'>
<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);

function closebandera(){
div = document.getElementById('closeit');

div.style.display='none';
}
setTimeout(closebandera, 7500);
</script>
<span id='supertext' style='position:absolute;left:0;top:0;color:red;text-align:center;z-index:9999999999999'>MERRY CHRISTMAS!!!<BR></BR><a href='http://huynh-nhat-ha.blogspot.com/2010/12/santa-claus-with-reindeer-effect.html' target='_blank'><img src='http://img403.imageshack.us/img403/248/papanoelnavidadreloj234.gif'/></a></span>
</div>

More about →

Hiệu ứng Ông già Nô En cho blog nhân dịp Giáng sinh

Giáng Sinh sẽ đến vào cuối tháng 12 này và chắc hẳn từ lúc này, bạn đã bắt đầu chuẩn bị trang trí cho blog của mình đẹp hơn, lạ mắt hơn để thu hút bạn đọc vào blog của bạn.

Có nhiều kiểu trang trí khác nhau cho blog nhân dịp Giáng Sinh. Sau đây là một kiểu trang trí độc đáo bằng một câu chúc Giáng sinh vui vẻ từ Ông già Nô En ngộ nghĩnh trượt khắp blog của bạn.

Xem Demo

Để làm được hiệu ứng này, bạn chỉ cần đặt đoạn code dưới đây vào trước thẻ </body> trong Template là được.

<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/AVvXsEgyOjHBJeroEyUtGkI4_V-5o5Jsom8jAWcVjDrvq1nm9rxYHJ1VFCmAfhtKRQUfqX8qm37TtWffX5MPESpBMCeBJ6h-s8fr1896CbZhPd4tAj_-d7hol9WLdyMbIp6M5l9UTjJcfJM0r1Rx/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 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.

More about →

Hiệu ứng tuyết rơi cho con trỏ trên Blog

Có nhiều kiểu hiệu ứng cho con trỏ trên trang web. Ở đây xin giới thiệu hiệu ứng tuyết rơi khi rê con trỏ trên khắp các vị trí của trang web.

Bạn chỉ cần đặt đoạn javascript dưới đây vào trước thẻ </head>. Đối với Blogger có thể đặt trong một tiện ích HTML/JavaScript.

<script type='text/javascript'>
// <![CDATA[
var colour="blue";
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>

Bạn có thể thay đổi màu sắc (white, green, yellow, red, brown...) cho tuyết rơi trong dòng var colour="blue". Chú ý đoạn javascript này có dùng trục tọa độ ox, oy nên sẽ gây xung đột code CSS đối với một số Blogger Template. Ví dụ điển hình là ở trang sachtroi.blogspot.com có sử dụng hiệu ứng này dẫn đến hậu quả là một khoảng trống dài thăm thẳm phía sau phần Footer và xuất hiện thanh cuộn nằm ngang trên công cụ trình duyệt Internet Explorer 8, như hình minh họa bên dưới.

Cách khắc phục lỗi như vậy đối với trang này chỉ có một cách đơn giản là loại bỏ đoạn javascript ở trên ra khỏi Template.

More about →

Trang trí con trỏ Blogger nhân dịp Giáng sinh

Nếu bạn muốn có kiểu con trỏ được thiết kế đặc biệt cho blog của mình thì bạn có thể tìm nhiều kiểu có sẵn miễn phí trên Internet. Nhưng điều quan trọng là cách cài đặt nó mà thôi.

Sau đây là một ví dụ kiểu con trỏ tham khảo từ Internet có dạng hộp sọ ông già Nô-el nhân dịp Giáng Sinh sắp đến gần.

Kiểu con trỏ hộp sọ ông gia Nô-el có dáng như thế này:

Sau đây là hướng dẫn thiết lập:

Bước 1: Đăng nhập Blogger, vào Bố cục (Layout), Chỉnh sửa HTML (Edit HTML).

Bước 2: Trong Template tìm thẻ mở <body> rồi dán đoạn mã sau đây vào bên dưới nó.

<style type="text/css">body, a, a:hover {cursor: url(http://cur.cursors-4u.net/holidays/hol-3/hol281.cur), progress;}</style>

Kết quả sau các thao tác trông như thế này:

<body>

<style type="text/css">body, a, a:hover {cursor: url(http://cur.cursors-4u.net/holidays/hol-3/hol281.cur), progress;}</style>

Lưu Template và bạn có thể kiểm tra tác dụng của hiệu ứng con trỏ rồi đấy.

More about →

Hiệu ứng tuyết rơi trên Blogger

Bạn muốn tạo hiệu ứng tuyết rơi thật đẹp mắt trên blog của mình giống một số trang web mà bạn tìm thấy. Bạn chưa tìm ra thủ thuật tối ưu cho mình?
Thật đơn giản. Chỉ cần đăng nhập vào bảng điều khiển Blogger, sau đó vào Bố cục (Layout) và Thêm tiện ích (Add a Widget), chọn HTML/JavaScript rồi dán đoạn code dưới đây vào đó. Mở trang nhà của bạn và bạn sẽ thấy kết quả như mong đợi. Chú ý tuyết có màu trắng nên nền blog của bạn phải có màu tối thì mới được.

<script src="http://snow-effect.googlecode.com/files/snow.js" type="text/javascript"></script>

Một điều cần chú ý là, sau khi tạo hiệu ứng tuyết rơi cho blog của mình thì bạn sẽ thấy rằng hiệu ứng này khiến cho máy tính phải làm việc cật lực hơn khi mở trang nhà của bạn. Có thể phát hiện điều này khi sử dụng laptop, quạt chạy mạnh hơn. Xem ra thủ thuật này giúp bạn thích thú nhưng vô tình góp phần làm nhanh hỏng các máy vi tính.

More about →