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 Blog2- 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiw4AaFc3IrWGC9quP3TYztSbsi24-n88S7Tk9bC-lzqJCHOZCeyKxbEgPj9xUUR7Nt2hierwkE9eMdi58ATBtHM6x8TXkJ5f2eeHw3yzTYkv1VnJWSmvtY0JTks9Mrh7TWTsZ2WM_DDdM/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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAcc6u1IvLGf9odptivYvlAacA0hCBzQYHe-jzMslLQsyfqJLUIwpr1pTpwOfwmOYl_LaKUMg0y7Q5vxb4x7XoiBNDdvXZPq9OGjTRmv46aMpf3FqoBRJzuk_Nees6KgSMhNMfQI_yu-jH/s1600/icon-heart-namkna-blogspot-com.gif",16,15); newObject("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiH_roDQFVKdgpwlcxut9EF9iTCYEhYfuEo-1LNZwsLPBxMuhX6Odp0bsFqBEgtkYMembkUpBMrmZh4BktIpdqmi4MVLlrTR4G5TiuGUFnxMwdzpTNygrLnwKmK1nVSqRwiXPMPmy7xolY/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);
Nhận xét
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óaEm đổi mã màu #ff449d trong code sau:
Trả lờiXóabody {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
Nhận xét này đã bị quản trị viên blog xóa.
Trả lờiXóaXóa cmt à, không thích thì thôi :((
Trả lờiXóaNhận xét này đã bị tác giả xóa.
Trả lờiXóaMộ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óaCảm ơn tác giả nhiều ạ :)))
Trả lờiXóa