Friday, December 9, 2011

Tạo hiệu ứng tuyết rơi cho Blogspot

Posted on 9:58 AM in


Phương pháp 1:
Đăng nhập vào Blogger ==> Bố Cục ==> Thêm Tiện ích ==> HTML/JavaScript và dán đoạn code dưới đây vào
Code1
<script src="http://data.sinhvienit.net/2011/T10/files/SinhVienIT.Net---dingkiutrue.com-snow.js" type="text/javascript"> </script>


Code2 (Tạo hiệu ứng khi rê con trỏ)
<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>


Code3 (Hiệu ứng backround)
<style type="text/css">body {background: url('http://www.boomspeed.com/sfhelpers/backgrounds/80.gif') fixed}</style><b style=position:absolute;left:10;top:2;ptsize:3pt;> </b>

Phương pháp 2:
Chèn code này trước thẻ </head>
Code1:
<script src='http://s1.wp.com/wp-content/plugins/snow/snowstorm.js?m=1291226695g&ver=1291226695' type='text/javascript'/>

Nếu bạn gặp lỗi hãy thay & trong đoạn JavaScript (ngay sau 1291226695g) bằng amp


Code2:
<script src='http://data.sinhvienit.net/2011/T10/files/SinhVienIT.Net---snow.js' type='text/javascript'/>


Lưu template

Chúc bạn thành công!

45 comments

  1. Oài , cũng tuyết rơi à :D
    Tuyết bên kia to hơn , ẹp hơn :">

    ReplyDelete
  2. Tuyết bên kia to quá
    Không thít không thít =))

    ReplyDelete
  3. Tem mới hả bạn,
    Gửi cho bạn cái code bài viết gần nhất nhưng phải có mail thì mới gửi được

    ReplyDelete
  4. à cho mình cái hiển thị số người đọc bài viết nhé, nó nắm ngay trang chủ ấy, ví dụ bài viết Linh Nga.. có 18 lần xem, hiệu ứng tuyết rơi 4 lần xem

    ReplyDelete
  5. Đã đổi hiệu ứng tuyết rơi khác =))
    Đẹp hơn :))

    ReplyDelete
  6. Đã mail cho True,
    cái code trên cho vào phần nào trong HTML?

    ReplyDelete
  7. cái đó ko phải số lần xem đâu, đó là số đếm comment đó:))

    ReplyDelete
  8. blog của bác load vẫn nặng hơn của em bác ơi, ko thấy avata và emo gì cả:(

    ReplyDelete
  9. Chèn cái tuyết này vào đẹp mà lag quá :(

    ReplyDelete
  10. Hình như bị dính cái Google AdSense :((
    Ai biết xóa như nào chỉ với

    ReplyDelete
  11. Load mãi chả thấy tuyết đâu :))

    ReplyDelete
  12. Nó bị dính cái Google AdSense nên load chậm quá
    Bỏ như nào đây bác

    ReplyDelete
  13. Tạm xóa domain dingkiutrue.com có vẻ load nhanh hơn :D

    ReplyDelete
  14. Thì ra nó bị cái Recent comments với ảnh đại diện =))

    ReplyDelete
  15. có vẻ load nhanh hơn rồi đấy:)):)

    ReplyDelete
  16. Mình đã Mail lại rồi nhé,có j không được pm lại nhé

    ReplyDelete
  17. @QuangBị dính cái Recent comments, load data của FD lâu quá :(

    ReplyDelete
  18. @blog
    Cảm ơn bác :D Đã nhận được mail
    Đúng là bị dính cái Recent comments

    ReplyDelete
  19. Có ai biết xóa mấy cái cmt dưới cùng blog của em không :P

    ReplyDelete
  20. tem này load khá nè, mà sao khu vực comment thấy chán thế:D

    ReplyDelete
  21. bác test coi thiếu dòng này ko? nếu ko có thì avata sẽ ko hiển thị <b:include data='blog' name='all-head-content'/>:)

    ReplyDelete
  22. @Quang: Ok rồi bác :D
    Tks bác nhiều lắm :))

    ReplyDelete
  23. Blog ngon chạy ngon chưa True

    ReplyDelete
  24. @blog :Tạm ổn rồi bác :D
    Nhưng nó vẫn bị dính 2 comt trong 1 bài viết :(

    ReplyDelete
  25. Giao diện hơi bị đẹp đấy, nhìn là thấy Noel :))

    ReplyDelete
  26. @blog :Dùng Recent Comment kiểu của em load cho nhanh kìa:D

    ReplyDelete
  27. Bác quang giúp em cái, bên phải bài viết vẫn có thêm 1 cmt nữa là sao :(

    ReplyDelete
  28. hôm quá bác truê có bị lỗi ở thiết kế ko thế, em cũng bị nè:(, h hết rồi:))

    ReplyDelete
  29. @Quang : Phần thiết kế thì không sao, nhưng phần bố cục lại bị :(( chưa hết nữa

    ReplyDelete
  30. bác xóa c00kie ở trình duyệt thì nó ms hết đc=))

    ReplyDelete
  31. @Quang :Được rồi :D
    Cảm ơn bác nhiều lúm :))

    ReplyDelete
  32. bác áp dụng recent com bên bác tiến à, nhìn ngon nhể=))

    ReplyDelete
  33. Uh, dùng cái này đầy đủ mà load nhanh :))

    ReplyDelete
  34. Cho em chém cái nhá xem cái recent comment ra sao:)):)):)):)):))

    ReplyDelete
  35. Root cơ đấy, thích nhất câu nì, càng ngày càng thích blogspot rồi đấy=))

    ReplyDelete
  36. @Quang :ROOT cho nó oách :D
    Thì nghĩ sao viết vậy ah bác ^^! Không nghĩ ra câu nào hay cả :)

    ReplyDelete
  37. hôm qua đóng blog để vọc code, nhưng chán quá, giờ đã mở lại=))

    ReplyDelete