Thư viện

Sự kiện

Thứ Năm, tháng 2 14, 2013

Trang trí blog ngày Valentine's day (14/2)

Bài viết này mình sẽ hướng dẫn các bạn tạo hiệu ứng trái tim rơi nhân ngày 14/2 cho anh em blogger.

Chia sẻ:
Trang trí blog ngày Valentine's day (14/2)
Ngày 14/2 là ngày lễ dành riêng cho tình yêu, là ngày để các cặp tình nhân trên khắp thế giới bày tỏ tình yêu của mình qua những tấm thiệp, viên Socola, những bông hồng. Bài viết này mình sẽ hướng dẫn các bạn tạo hiệu ứng trái tim rơi và thay đổi nền backgroud cho blog nhân ngày 14/2 cho anh em blogger.
Demo ngay tại bài viết nàyhoặc link bên dưới:

XEM DEMO

Cách tiến hành:

1- Đăng nhập vòa Blog
2- Chọn BỐ cục
3- Bấm chọn Thêm tiện ích - Tạo HTML/Javascipt
4- Dán code bên dưới vào HTML/Javarscip nha.
<style type='text/css'>
body {background: #ff449d url(http://1.bp.blogspot.com/-wcExNer-aCU/URzetjfPGzI/AAAAAAAABFo/G_nrS7wV1WQ/s1600/anh-tran-tri-blogger-blogspot_anh-dong-nen-blog_Namkna-blogspot-com_36.gif) repeat scroll top left;
}
</style>
<script type='text/javascript'>//<![CDATA[
var fallObjects=new Array();function newObject(url,height,width){fallObjects[fallObjects.length]=new Array(url,height,width);}

// photo scroll //
var numObjs=20, waft=50, fallSpeed=10, wind=0;
newObject("http://1.bp.blogspot.com/-LWbOHCEzSJ0/USYwshw27yI/AAAAAAAAJLw/SHYSnr4DU-Q/s1600/icon-heart-namkna-blogspot-com.gif",16,15);
newObject("http://4.bp.blogspot.com/-sV-WigffKS4/URxhVxejq4I/AAAAAAAAIqY/vIrOql9dAjQ/s1600/heart-namkna-blogspot-com.gif",16,15);

// photo scroll end //

function winSize(){winWidth=(moz)?window.innerWidth-180:document.body.clientWidth-180;winHeight=(moz)?window.innerHeight+500:document.body.clientHeight+500;}
function winOfy(){winOffset=(moz)?window.pageYOffset:document.body.scrollTop;}
function fallObject(num,vari,nu){
 objects[num]=new Array(parseInt(Math.random()*(winWidth-waft)),-30,(parseInt(Math.random()*waft))*((Math.random()>0.5)?1:-1),0.02+Math.random()/20,0,1+parseInt(Math.random()*fallSpeed),vari,fallObjects[vari][1],fallObjects[vari][2]);
 if(nu==1){document.write('<img id="fO'+i+'" style="position:fixed;" src="'+fallObjects[vari][0]+'">'); }
}
function fall(){
 for(i=0;i<numObjs;i++){
  var fallingObject=document.getElementById('fO'+i);
  if((objects[i][1]>(winHeight-(objects[i][5]+objects[i][7])))||(objects[i][0]>(winWidth-(objects[i][2]+objects[i][8])))){fallObject(i,objects[i][6],0);}
  objects[i][0]+=wind;objects[i][1]+=objects[i][5];objects[i][4]+=objects[i][3];
  with(fallingObject.style){ top=objects[i][1]+winOffset+'px';left=objects[i][0]+(objects[i][2]*Math.cos(objects[i][4]))+'px';}
 }
 setTimeout("fall()",31);
}
var objects=new Array(),winOffset=0,winHeight,winWidth,togvis,moz=(document.getElementById&&!document.all)?1:0;winSize();
for (i=0;i<numObjs;i++){fallObject(i,parseInt(Math.random()*fallObjects.length),1);}
fall();
//]]></script>
Bạn cũng có thể chèn code trên trước thẻ </head>
Trong đó:
  • Link màu xanh là link ảnh nền. Bạn có thể thay link ảnh khác bằng cách tham khảo một số link ảnh nền: Tại đây
  • newObject là file ảnh icon trôi từ trên xuống. Bạn có thể thay hình khác Tại đây'
  • Nếu muốn có nhiều hình ảnh trôi trên nền blog thì các bạn chỉ cần thêm đoạn code bên dưới và trước thẻ: // photo scroll end //
  • newObject("Link ảnh",16,15);
    
    
    

7 nhận xét:

  1. Cho em hỏi là có thể đổi nền màu hồng thay bằng màu khác được không ạ. Em không thích màu hồng lắm và em muốn thay. Em cảm ơn anh

    Trả lờiXóa
  2. Em đổi mã màu #ff449d trong code sau:

    body {background: #ff449d url(http://1.bp.blogspot.com/-wcExNer-aCU/URzetjfPGzI/AAAAAAAABFo/G_nrS7wV1WQ/s1600/anh-tran-tri-blogger-blogspot_anh-dong-nen-blog_Namkna-blogspot-com_36.gif) repeat scroll top left;
    }
    Xemmã màu tại đây: XEM NGAY

    Trả lờiXóa
  3. Nhận xét này đã bị quản trị viên blog xóa.

    Trả lờiXóa
  4. Xóa cmt à, không thích thì thôi :((

    Trả lờiXóa
  5. Nhận xét này đã bị tác giả xóa.

    Trả lờiXóa
  6. Một bài viết chia sẻ kinh nghiệm hay. Chúc mọi người có ngày valentien thật ý nghĩa. Ngày valentine càng hạnh phúc hơn nếu có quà tặng cho người yêu của mình . Làm sao để có quà tặng ý nghĩa ngày valentine ?

    Trả lờiXóa