Có rất nhiều bạn muốn trang trí cho blog của mình thêm sinh động và bắt mắt nhất, trong bài viết lần này mình xin chia sẻ hiệu ứng tuyết rơi cho blog một cách đơn giản và chi tiết nhất.

Công cụ cần có: Bạn cần đăng ký một tài khoản blog(Cái này đương nhiên rồi). Sau đó bạn đăng nhập vào tài khoản mình muốn chỉnh sửa, nào ngay bây giờ chúng ta cùng mạnh dạn làm theo các bước sau đây nhé :

Bước 1: Trong giao diện tổng quan bạn chọn ---> Bố cục



hiệu ứng tuyết rơi cho blog

Bước 2: Trong phần bố cục bạn chọn ---> thêm tiện ích



hiệu ứng tuyết rơi cho blog 01



Bước 3: Chọn thêm tiện ích và tìm đến dòng ---->HTML/Javascript



hiệu ứng tuyết rơi cho blog 02



Bước 4: Chỉnh sửa đoạn mã HTML



hiệu ứng tuyết rơi cho blog 03



Bạn thêm đoạn Code sau vào nhé"

<!-- Hiệu ứng tuyết rơi cho blog-->
<script type='text/javascript'>
//<![CDATA[
var snowmax = 30; // Số lượng tuyết
var snowcolor = new Array("#aaaacc", "#ddddFF", "#ccccDD");
var snowtype = new Array("Arial Black", "Arial Narrow", "Times", "Comic Sans MS");
var snowletter = "*"; //Hình tuyết, có thể thay thành dấu chấm “.” hay các kí tự khác
var sinkspeed = 0.9; //               Tốc độ rơi của tuyết
var snowmaxsize = 30; //           Kích thước hạt tuyết to nhất
var snowminsize = 10; //             Kích thước hạt tuyết nhỏ nhất
var snowingzone = 1;
var snow = new Array();
var marginbottom;
var marginright;
var ScrollTop;
var timer;
var i_snow = 0;
var x_mv = new Array();
var crds = new Array();
var lftrght = new Array();
var browserinfos = navigator.userAgent;
var ie5 = document.all && document.getElementById && !browserinfos.match(/Opera/);
var ns6 = document.getElementById && !document.all;
var opera = browserinfos.match(/Opera/);
var browserok = ie5 || ns6 || opera;
function randommaker(a)
{
    rand = Math.floor(a * Math.random());
    return rand
}
 function iecompattest()
{
 return (document.compatMode && document.compatMode != "BackCompat") ? document.documentElement : document.body
}
 function InitHeight() {
 if (ie5 || opera) {
  marginbottom = iecompattest().clientHeight + 5; //clientHeight;
  marginright = iecompattest().scrollWidth + 5; //clientWidth
 }
 else {
  if (ns6) {
   marginbottom = self.innerHeight;
   marginright = self.innerWidth
  }
 }
 ScrollTop = document.body.scrollTop;
 if (ScrollTop == 0) {
  if (window.pageYOffset)
   ScrollTop = window.pageYOffset;
  else
   ScrollTop = (document.body.parentElement) ? document.body.parentElement.scrollTop : 0;
 }
 marginbottom += ScrollTop;
}
 function initsnow()
{
 InitHeight()
  var a = snowmaxsize - snowminsize;
  for (i = 0;i <= snowmax;i++)
 {
  crds[i] = 0;
  lftrght[i] = Math.random() * 15;
  x_mv[i] = 0.03 + Math.random() / 10;
  snow[i] = document.getElementById("s" + i);
  snow[i].style.fontFamily = snowtype[randommaker(snowtype.length)];
  snow[i].size = randommaker(a) + snowminsize;
  snow[i].style.fontSize = snow[i].size + "px";
  snow[i].style.color = snowcolor[randommaker(snowcolor.length)];
  snow[i].sink = sinkspeed * snow[i].size / 5;
  if (snowingzone == 1) { snow[i].posx = randommaker(marginright - snow[i].size) }
  if (snowingzone == 2) { snow[i].posx = randommaker(marginright / 2 - snow[i].size) }
  if (snowingzone == 3) { snow[i].posx = randommaker(marginright / 2 - snow[i].size) + marginright / 4 }
  if (snowingzone == 4) { snow[i].posx = randommaker(marginright / 2 - snow[i].size) + marginright / 2 }
  snow[i].posy =  randommaker(2 * marginbottom - marginbottom - 2 * snow[i].size);
  snow[i].style.left = snow[i].posx + "px";
  snow[i].style.top = snow[i].posy + "px"
  }
  movesnow()
}
 function movesnow()
{
 InitHeight();
 for (i = 0; i <= snowmax; i++)
 {
  crds[i] += x_mv[i];
  snow[i].posy += snow[i].sink;
  snow[i].style.left = snow[i].posx + lftrght[i] * Math.sin(crds[i]) + "px";
  snow[i].style.top = snow[i].posy + "px";
  if (snow[i].posy >= marginbottom - 2 * snow[i].size || parseInt(snow[i].style.left) > (marginright - 3 * lftrght[i]))
  {
   if (snowingzone == 1) { snow[i].posx = randommaker(marginright - snow[i].size) }
   if (snowingzone == 2) { snow[i].posx = randommaker(marginright / 2 - snow[i].size) }
   if (snowingzone == 3) { snow[i].posx = randommaker(marginright / 2 - snow[i].size) + marginright / 4 }
   if (snowingzone == 4) { snow[i].posx = randommaker(marginright / 2 - snow[i].size) + marginright / 2 }
   snow[i].posy = ScrollTop
  }
 }
 var a = setTimeout("movesnow()", 60)
}
function hidesnow()
{
 if (window.timer) { clearTimeout(timer) }
 for (i = 0;i <= snowmax;i++)
 {
  document.getElementById("s" + i).style.visibility = "hidden"
 }
}
 for (i = 0;i <= snowmax;i++)
{
 document.write('<div id="s' + i + '" style="POSITION: absolute; Z-INDEX: 9' + i + "; VISIBILITY: visible; TOP:-" + snowmaxsize + 'px; LEFT: 15px;">' + snowletter + "</div>")
}
if (browserok)
{ initsnow() }
else
{ document.write('Votre navigateur ne supporte pas ce Javascript, ') };
//]]>
</script>
Bước 5: Ra màn hình rồi tận hưởng thành quả thôi nào ^^

 CHÚC CÁC BẠN THÀNH CÔNG !

0 nhận xét:

Đăng nhận xét

:) :)) ;(( :-) =)) ;( ;-( :d :-d @-) :p :o :>) (o) [-( :-? (p) :-s (m) 8-) :-t :-b b-( :-# =p~ $-) (b) (f) x-) (k) (h) (c) cheer
Click to see the code!
To insert emoticon you must added at least one space before the code.

 
Blogger TemplateHao123 Pro © 2013. All Rights Reserved. Powered by Nguyễn Hữu Học
Top