Thứ Năm, 10 tháng 10, 2013

Hiệu Ứng Tuyết Rơi Cho Blogspot

Hiệu Ứng Tuyết Rơi Cho Blogspot
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.


demo hiệu úng tuyết rơi

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


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



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

code hiệu ứng tuyết rơi

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

code hiệu ứng tuyết rơi


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 !

Socializer Widget By Blogger Yard
SOCIALIZE IT →
FOLLOW US →
SHARE IT →

0 nhận xét:

Đăng nhận xét

Labels

Adult English Ảnh Ảnh Bìa Facebook Ảnh đẹp Ảnh vui Animation Art + Design ẨM THỰC bag Bài viết Bảng Giá Bé tô màu Blogger Blogspot books Búp bê CAPTCHA Cắm hoa Cắt may Chơi mà học Clip Hài - Video Hot Clip Shock Có Thể Bạn Chưa Biết Coloring - Tô màu Cuộc sống Dịch Vụ Hot Doll Download Download Game Download Phần Mềm - Crack Download Phim Đ Đan len Đất nặn cho bé Địa Điểm Hot English Topics facebook Funny funny pictures Gấp giấy Gấp hộp Gấp khăn - Trang trí món ăn Giải Trí GIẢI TRÍ - VUI CƯỜI GIÁO DỤC - Y TẾ Giầy - Dép Gifts Giới Tính Góc Kỹ Năng Góc Làm Đẹp Góc Phụ Nữ Góc Sinh Viên Gói quà - gấp nơ Google Adsense hat Học Nấu Ăn Hỏi Đáp home and garden Hợp Tác Kinh Doanh Hướng dẫn MMO Kết hạt Kiếm tiền Kiếm Tiền Qua Mạng Kiến thức SEO KINH TẾ-KẾ HOẠCH Kỹ Năng Bán Hàng Kỹ Năng Nơi Công Sở Kỹ Năng Xin Việc LÀM ĐẸP Làm Đẹp Da Làm Đẹp Tóc Làm đồ chơi làm đồ chơi từ gỗ Làm hoa giấy Làm hoa vải Làm thiệp Lập trình Blogspot Liên Minh Huyền Thoại M Magazine Make Money Online making flowers Mặc Đẹp Mẫu móc Mẹ Và Bé Menu Mẹo Vặt MMO guide N Nail art Nến trang trí Nghệ thuật NGHIỆP VỤ BÁO CHÍ Nhà đẹp Nhạc Không Lời Nhạc Việt Origrami Painting - Vẽ Patchwork Phần mềm Phong Cách Play and learn for baby Proofs recycling Sách tiếng anh cho bé Shop Bít Tuốt Slider Sức Khỏe - Đời Sống Sức Khỏe Giới Tính Tết dây Thêu Thơ Vui Thủ thuật Thủ Thuật Blog Thủ Thuật Blogspot - Wordpress - Joomla Thủ Thuật Game Thủ Thuật Hay Thủ Thuật Máy Tính Thủ Thuật Net Thủ Thuật Tin Học Thư giãn Tình Yêu Giới Tính Tóc đẹp TRANG ĐIỂM Trang trí Truyện cười Truyện Hay Túi xinh Tuyển Dụng Từ điển Blogspot Tư Vấn Tiêu Dùng weaving Widget Blogspot Youtube