Tony Quang Blog xin hướng dẫn các bạn trang trí blog hoặc website của mình nhân dịp tết đến xuân về
1. Trang trí hoa mai trên đầu Blog / Website
- Đầu tiên đăng nhập vào blogger -> vào mẫu -> vào chỉnh sửa HTML
- Tiếp theo các bạn nhấn Ctrl + F và tìm tên thẻ </head>
- Dán Code dưới đây vào trên thẻ </head>
<style>/* HOLIDAY BELLS */
.b-page__content { min-height:120px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMQivQ1BDu3pJXasiG7SFJN4JQftZzHAVmwh5xNRsgf-Tjm7D2sroECu7Y1QjD_bkvWJpGSyt61VrQCpVuGunB0nMgBzcq-BJ0e72xOuEDIfT5AUD3Ef0r1h6Ce51LYZ2_d7bOg9EMscA/s1600/bg_grid.jpg)}.b-head-decor { display:none; }.b-page_newyear .b-head-decor {position:absolute; top:0; left:0;display:block; height:115px; width:100%;overflow:hidden;background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2SW9yWwmjvq-uoaTB2VZAs0YBczGHbqthvi8VEbGh70r7MSEel31M8PYvAz_YGBRRxR-4cunpOjrwZaH3O0U4gcbtDwW-Rf_KAFSnj9AXig7TMxGdLkV1KFaGX40lbMugXSJiONssanQ/s320/b-head-decor_newyear.png') repeat-x 0 0;z-index:9999;}.b-page_newyear .b-head-decor__inner { position:absolute; top:0; left:0; height:115px; display:block; width:373px; }.b-page_newyear .b-head-decor::before { content:''; display:block; position:absolute; top:-115px; left:0; z-index:3; height:115px; display:block; width:100%; }.b-page_newyear .b-head-decor__inner_n2 { left:373px; }.b-page_newyear .b-head-decor__inner_n3 { left:746px; }.b-page_newyear .b-head-decor__inner_n4 { left:1119px; }.b-page_newyear .b-head-decor__inner_n5 { left:1492px; }.b-page_newyear .b-head-decor__inner_n6 { left:1865px; }.b-page_newyear .b-head-decor__inner_n7 { left:2238px; }.b-ball { position:absolute; }.b-ball_n1 { top:0; left:3px; width:59px; height:83px; }.b-ball_n2 { top:-19px; left:51px; width:55px; height:70px; }.b-ball_n3 { top:9px; left:88px; width:49px; height:67px; }.b-ball_n4 { top:0; left:133px; width:57px; height:102px; }.b-ball_n5 { top:0; left:166px; width:49px; height:57px; }.b-ball_n6 { top:6px; left:200px; width:54px; height:70px; }.b-ball_n7 { top:0; left:240px; width:56px; height:67px; }.b-ball_n8 { top:0; left:283px; width:54px; height:53px; }.b-ball_n9 { top:10px; left:321px; width:49px; height:66px; }.b-ball_n1 .b-ball__i { background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkCEZ_DPF4brUchqMmc4RZf70QX7TJiDMjmjCw88E8Yza7yw8Ax2nFQvn3Snh8tHa1cwBY7TjmYfh7CR48G-3PniQRXn17vtkYmHqGdnewhYsZ-7CPstL12HfUcp4frGRSAOzYt5uTFH8/s1600/b-ball_n1.png') no-repeat; }.b-ball_n2 .b-ball__i { background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjS61EoZABfZcZZXFjprwa2FOwF_70NqE7Or5AivOOr0s0osZHQa_fRAOZ8bBf46sHhT-Y7D_YPOhCD3k2v_fHaZ5cgZQGg35X-c_zMavNz4MdXWVmWkkGjJ8Z-B4RD7sJxKYPBycM9PE4/s1600/b-ball_n2.png') no-repeat; }.b-ball_n3 .b-ball__i { background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsKn6xLc9_t3HK9lqJGunyL4KIlN-JxJmchu9w9nib7f73IOJ8xZRPbhT2reSLnBaAU529aamWqksVbo6t277fTALQmbTj5EIL9eiQQEw53dAIMv0P-dsY-Rb2j83wrbrzsfYPrk5jEpA/s1600/b-ball_n3.png') no-repeat; }.b-ball_n4 .b-ball__i { background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCtk-bH8b-8Sug8T2OLuMYVv8kOCzPCfNaSU4UccQ_20Ox2XeLGTjNchrTulJfEItj6b3Gln3WaAjvwdYBZt0Dbi8Rsw08IvuHiiTAxd_aOHkNEuEDehoIZie8UD1buRreB8iF6MRlcNE/s1600/b-ball_n4.png') no-repeat; }.b-ball_n5 .b-ball__i { background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4jX3th0t5LWpHzVyud_L3dnHiNNvYa9NFGgiMUQlGddRLsjC65x9bgc07LgSRFMcjhAosfSFbfzqqF9bWXpVPmLtgpW07E185WOMqiXo22hUpAOOst-ln43tWjnaR8qnKfQypmohVmb8/s1600/b-ball_n5.png') no-repeat; }.b-ball_n6 .b-ball__i { background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5j4sw33ZRHLzB-_98fpxJ9B7msCy4frax58jo7aRoDDLYJaibvA7W2kffpVk9Iz4Sdxi3TFyFT7vbPMaqnMza2Rc_JO-0Txq3QBUjggPBKwn8ZKNB5oQux3BV1NLo8oxiS8rTpyM3PyU/s1600/b-ball_n6.png') no-repeat; }.b-ball_n7 .b-ball__i { background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwzFzNjSsc3KcTn8xzoTc3J-T2Osi_QE_BOzdLKDwkyRBZwgeCDjUiwkxxqd9DoppmBLfAAplM2OYjQ1K1zEexy08_KCyTLrNrLC54Ay7QCt62xV9-tdmgERonHrIrOJcbdcggz818n9M/s1600/b-ball_n7.png') no-repeat; }.b-ball_n8 .b-ball__i { background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiMw66pZDydaLjC8a8T6WPsYtXYEh2npAq5qzTvpcWeAvqeDq2KpcgeKni4xAqEy4CAo2WOxgZktpIoX1NoR4umQX48sJK8sckcdUvLktG5J5h7kIQCEuRddTLpKFlUkTG5hgzj4p68Gw/s1600/b-ball_n8.png') no-repeat; }.b-ball_n9 .b-ball__i { background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXCFFUkf_sS8f-tHMTzUIddhNMOjgbSrvLGOi_cqZlLGH9x9XQ5URSuJkOx7hu395weEPioVlFeoNc4gfafLBOva1uYdpnqeOtnEChsvp18ENqlS6NN4dQ7pCz6QhvCzq5qFcUh8SsMZ8/s1600/b-ball_n9.png') no-repeat; }.b-ball_i1 .b-ball__i { background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1BE7XBOClOZovH6B_MSwFpI7YVW9R_rXeijJdqww8Txd-MFJN0CJfZi54jWhgbuKe6jl3RdZi-gQEzJXAWZnje9xySAgNBCx2XlFY0-YCH7xFA81Y2qUf4oRLKoqZViF26_m9RA1WirA/s1600/b-ball_i1.png') no-repeat; }.b-ball_i2 .b-ball__i { background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivb-4wQdUAYG3ilmnXeOku_8NMmji4cKA_8l3x68IkEYqAQMFtFXFBjBFOHy5cyhtaBGBn9yvk0UxsEhx_1mKwds6CP1LsVuSr8XickTcWUEVL-wZ7jQSx9vqypwSKybx7odNQgkt_oEY/s1600/b-ball_i2.png') no-repeat; }.b-ball_i3 .b-ball__i { background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDPKXZeaNVCnfRvL05a2mN4as_1jH_pgCCktVYgXX9E1yOJNMl0TRG9kfV6y904p1TOd-Jegn2P79AqErfwH6OiHl8SPjiOrB-jKk0FqY71IAkBSIXc4F-WVuHGOCGkoZ5ZKHZpeU7OhE/s1600/b-ball_i3.png') no-repeat; }.b-ball_i4 .b-ball__i { background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiopN5pFpxBb6Y_QvS-eiMwFSwsk3DRORfr6mGWmNjurKG1INmjGJUUx4IZNy_eUNvCsvFbDYRTtG1iwpjY92ZYtQMdbZTpn6PFJWinzSjUrIv1odbTvWbdVxZA9vFg8kg6xeuNHayp23E/s1600/b-ball_i4.png') no-repeat; }.b-ball_i5 .b-ball__i { background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhytAvTbpKrPeiApdXMpwxA2vkNiO6GHLe87EWHGl09CPwuaWcD_XTENchkzieQNDDeJFKXhKLQSLONIQkDl5ZIeAtB63DXbT_Dbc274DqHww6yUvLG_WoN3mkPgjPhL4T5F5ecC-zCwcY/s1600/b-ball_i5.png') no-repeat; }.b-ball_i6 .b-ball__i { background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGZxlDzFQMjQut6Ra5iElJovVcUKFwPtUxOeXYA0B-g4a3AgWXCeydXImgt_XUfpKPBZ0KFuJpnzS5nPfg-I6HRjFU6VrAq7Dm4SfQkRMgAUwheiqs8gbauCzJqNoxLTrTAQm2nm1Uu-I/s1600/b-ball_i6.png') no-repeat; }.b-ball_i1{top:0; left:0; width:25px; height:71px; }.b-ball_i2{top:0; left:25px; width:61px; height:27px; }.b-ball_i3{top:0; left:176px; width:29px; height:31px; }.b-ball_i4{top:0; left:205px; width:50px; height:51px; }.b-ball_i5{top:0; left:289px; width:78px; height:28px; }.b-ball_i6{top:0; left:367px; width:6px; height:69px; }.b-ball__i { position:absolute; width:100%; height:100%; -webkit-transform-origin:50% 0; -moz-transform-origin:50% 0; -o-transform-origin:50% 0; transform-origin:50% 0; -webkit-transition:all .3s ease-in-out; -moz-transition:all .3s ease-in-out; -o-transition:all .3s ease-in-out; transition:all .3s ease-in-out; pointer-events:none; }.b-ball_bounce .b-ball__right{position:absolute; top:0; right:0; left:50%; bottom:0; z-index:9; }.b-ball_bounce:hover .b-ball__right{ display:none; }.b-ball_bounce .b-ball__right:hover{ left:0; display:block!important; }.b-ball_bounce.bounce>.b-ball__i{ -webkit-transform:rotate(-9deg); -moz-transform:rotate(-9deg); -o-transform:rotate(-9deg); transform:rotate(-9deg); }.b-ball_bounce .b-ball__right.bounce+.b-ball__i { -webkit-transform:rotate(9deg); -moz-transform:rotate(9deg); -o-transform:rotate(9deg); transform:rotate(9deg); }.b-ball_bounce.bounce1>.b-ball__i {-webkit-transform:rotate(6deg); -moz-transform:rotate(6deg); -o-transform:rotate(6deg); transform:rotate(6deg); }.b-ball_bounce .b-ball__right.bounce1+.b-ball__i {-webkit-transform:rotate(-6deg); -moz-transform:rotate(-6deg); -o-transform:rotate(-6deg); transform:rotate(-6deg); }.b-ball_bounce.bounce2>.b-ball__i{ -webkit-transform:rotate(-3deg); -moz-transform:rotate(-3deg); -o-transform:rotate(-3deg); transform:rotate(-3deg); }.b-ball_bounce .b-ball__right.bounce2+.b-ball__i{ -webkit-transform:rotate(3deg); -moz-transform:rotate(3deg); -o-transform:rotate(3deg); transform:rotate(3deg); }.b-ball_bounce.bounce3>.b-ball__i {-webkit-transform:rotate(1.5deg); -moz-transform:rotate(1.5deg); -o-transform:rotate(1.5deg); transform:rotate(1.5deg); }.b-ball_bounce .b-ball__right.bounce3+.b-ball__i { -webkit-transform:rotate(-1.5deg); -moz-transform:rotate(-1.5deg); -o-transform:rotate(-1.5deg); transform:rotate(-1.5deg); }</style><script src='https://googledrive.com/host/0B_OR7rYz7CITdzdkMG1KQ0lPdXc' type='text/javascript'/><script src='https://googledrive.com/host/0B_OR7rYz7CITdUJwYlpRNFl3ODA' type='text/javascript'/><script src='https://googledrive.com/host/0B_OR7rYz7CITdllab1Bjb01hSUE' type='text/javascript'/>
- Tiếp theo các bạn tìm thẻ <body> để hiển thị hiệu ứng ra ngoài Blog / Website copy và past đoạn code dưới vào dưới thẻ <body>
<!--- Event TET --><div class='b-page_newyear'><div class='b-page__content'><i class='b-head-decor'><i class='b-head-decor__inner b-head-decor__inner_n1'><div class='b-ball b-ball_n1 b-ball_bounce'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_n2 b-ball_bounce'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_n3 b-ball_bounce'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_n4 b-ball_bounce'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_n5 b-ball_bounce'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_n6 b-ball_bounce'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_n7 b-ball_bounce'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_n8 b-ball_bounce'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_n9 b-ball_bounce'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_i1'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_i2'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_i3'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_i4'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_i5'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_i6'><div class='b-ball__right'/><div class='b-ball__i'/></div></i><i class='b-head-decor__inner b-head-decor__inner_n2'><div class='b-ball b-ball_n1 b-ball_bounce'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_n2 b-ball_bounce'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_n3 b-ball_bounce'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_n4 b-ball_bounce'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_n5 b-ball_bounce'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_n6 b-ball_bounce'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_n7 b-ball_bounce'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_n8 b-ball_bounce'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_n9 b-ball_bounce'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_i1'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_i2'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_i3'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_i4'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_i5'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_i6'><div class='b-ball__right'/><div class='b-ball__i'/></div></i><i class='b-head-decor__inner b-head-decor__inner_n3'><div class='b-ball b-ball_n1 b-ball_bounce'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_n2 b-ball_bounce'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_n3 b-ball_bounce'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_n4 b-ball_bounce'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_n5 b-ball_bounce'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_n6 b-ball_bounce'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_n7 b-ball_bounce'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_n8 b-ball_bounce'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_n9 b-ball_bounce'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_i1'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_i2'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_i3'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_i4'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_i5'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_i6'><div class='b-ball__right'/><div class='b-ball__i'/></div></i><i class='b-head-decor__inner b-head-decor__inner_n4'><div class='b-ball b-ball_n1 b-ball_bounce'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_n2 b-ball_bounce'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_n3 b-ball_bounce'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_n4 b-ball_bounce'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_n5 b-ball_bounce'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_n6 b-ball_bounce'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_n7 b-ball_bounce'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_n8 b-ball_bounce'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_n9 b-ball_bounce'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_i1'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_i2'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_i3'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_i4'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_i5'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_i6'><div class='b-ball__right'/><div class='b-ball__i'/></div></i><i class='b-head-decor__inner b-head-decor__inner_n5'><div class='b-ball b-ball_n1 b-ball_bounce'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_n2 b-ball_bounce'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_n3 b-ball_bounce'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_n4 b-ball_bounce'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_n5 b-ball_bounce'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_n6 b-ball_bounce'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_n7 b-ball_bounce'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_n8 b-ball_bounce'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_n9 b-ball_bounce'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_i1'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_i2'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_i3'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_i4'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_i5'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_i6'><div class='b-ball__right'/><div class='b-ball__i'/></div></i><i class='b-head-decor__inner b-head-decor__inner_n6'><div class='b-ball b-ball_n1 b-ball_bounce'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_n2 b-ball_bounce'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_n3 b-ball_bounce'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_n4 b-ball_bounce'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_n5 b-ball_bounce'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_n6 b-ball_bounce'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_n7 b-ball_bounce'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_n8 b-ball_bounce'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_n9 b-ball_bounce'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_i1'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_i2'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_i3'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_i4'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_i5'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_i6'><div class='b-ball__right'/><div class='b-ball__i'/></div></i><i class='b-head-decor__inner b-head-decor__inner_n7'><div class='b-ball b-ball_n1 b-ball_bounce'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_n2 b-ball_bounce'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_n3 b-ball_bounce'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_n4 b-ball_bounce'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_n5 b-ball_bounce'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_n6 b-ball_bounce'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_n7 b-ball_bounce'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_n8 b-ball_bounce'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_n9 b-ball_bounce'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_i1'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_i2'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_i3'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_i4'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_i5'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_i6'><div class='b-ball__right'/><div class='b-ball__i'/></div></i></i></div></div><!--- #Event TET -->
Ok như vậy là xong!
2. Làm hiệu ứng hoa mai rơi trên blog / website
Vào Blog => Mẫu => Chỉnh sửa HTML. Nhấn tổ hợp phím Ctrl + F và tìm đến thẻ</head>. Sau đó dán đoạn mã Code sau ở phía trên thẻ </head> và Lưu mẫu.
<script type='text/javascript'>
//<![CDATA[
var pictureSrc ="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhQQWF8Gru4Oz6vlsGCnT4_aGgheRQ6GnFAt8y9GdKbqpU1U-QP43mV978S5sG6XWCUfMkyAGKpsr9TUejEg9FhFvPnWt1BTIqQmDHseIIeSyiGEzE4zUu6mwMN7r1L8pjE3_paWH5GKk/s1600/hoamai.png"; //the location of the snowflakes
var pictureWidth = 15; //the width of the snowflakes
var pictureHeight = 15; //the height of the snowflakes
var numFlakes = 10; //the number of snowflakes
var downSpeed = 0.01; //the falling speed of snowflakes (portion of screen per 100 ms)
var lrFlakes = 10; //the speed that the snowflakes should swing from side to side
if( typeof( numFlakes ) != 'number' || Math.round( numFlakes ) != numFlakes || numFlakes < 1 ) { numFlakes = 10; }
//draw the snowflakes
for( var x = 0; x < numFlakes; x++ ) {
if( document.layers ) { //releave NS4 bug
document.write('<layer id="snFlkDiv'+x+'"><imgsrc="'+pictureSrc+'" height="'+pictureHeight+'"width="'+pictureWidth+'" alt="*" border="0"></layer>');
} else {
document.write('<div style="position:absolute; z-index:9999;"id="snFlkDiv'+x+'"><img src="'+pictureSrc+'"height="'+pictureHeight+'" width="'+pictureWidth+'" alt="*"border="0"></div>');
}
}
//calculate initial positions (in portions of browser window size)
var xcoords = new Array(), ycoords = new Array(), snFlkTemp;
for( var x = 0; x < numFlakes; x++ ) {
xcoords[x] = ( x + 1 ) / ( numFlakes + 1 );
do { snFlkTemp = Math.round( ( numFlakes - 1 ) * Math.random() );
} while( typeof( ycoords[snFlkTemp] ) == 'number' );
ycoords[snFlkTemp] = x / numFlakes;
}
//now animate
function flakeFall() {
if( !getRefToDivNest('snFlkDiv0') ) { return; }
var scrWidth = 0, scrHeight = 0, scrollHeight = 0, scrollWidth = 0;
//find screen settings for all variations. doing this every time allows for resizing and scrolling
if( typeof( window.innerWidth ) == 'number' ) { scrWidth = window.innerWidth; scrHeight = window.innerHeight; } else {
if( document.documentElement && (document.documentElement.clientWidth ||document.documentElement.clientHeight ) ) {
scrWidth = document.documentElement.clientWidth; scrHeight = document.documentElement.clientHeight; } else {
if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
scrWidth = document.body.clientWidth; scrHeight = document.body.clientHeight; } } }
if( typeof( window.pageYOffset ) == 'number' ) { scrollHeight = pageYOffset; scrollWidth = pageXOffset; } else {
if( document.body && ( document.body.scrollLeft ||document.body.scrollTop ) ) { scrollHeight = document.body.scrollTop;scrollWidth = document.body.scrollLeft; } else {
if(document.documentElement && (document.documentElement.scrollLeft ||document.documentElement.scrollTop ) ) { scrollHeight =document.documentElement.scrollTop; scrollWidth =document.documentElement.scrollLeft; } }
}
//move the snowflakes to their new position
for( var x = 0; x < numFlakes; x++ ) {
if( ycoords[x] * scrHeight > scrHeight - pictureHeight ) { ycoords[x] = 0; }
var divRef = getRefToDivNest('snFlkDiv'+x); if( !divRef ) { return; }
if( divRef.style ) { divRef = divRef.style; } var oPix = document.childNodes ? 'px' : 0;
divRef.top = ( Math.round( ycoords[x] * scrHeight ) + scrollHeight ) + oPix;
divRef.left = ( Math.round( ( ( xcoords[x] * scrWidth ) - (pictureWidth / 2 ) ) + ( ( scrWidth / ( ( numFlakes + 1 ) * 4 ) ) * (Math.sin( lrFlakes * ycoords[x] ) - Math.sin( 3 * lrFlakes * ycoords[x]) ) ) ) + scrollWidth ) + oPix;
ycoords[x] += downSpeed;
}
}
//DHTML handlers
function getRefToDivNest(divName) {
if( document.layers ) { return document.layers[divName]; } //NS4
if( document[divName] ) { return document[divName]; } //NS4 also
if( document.getElementById ) { return document.getElementById(divName); } //DOM (IE5+, NS6+, Mozilla0.9+, Opera)
if( document.all ) { return document.all[divName]; } //Proprietary DOM - IE4
return false;
}
window.setInterval('flakeFall();',100);
//]]>
</script>
Vào Blog => Mẫu => Chỉnh sửa HTML. Nhấn tổ hợp phím Ctrl + F và tìm đến thẻ</head>. Sau đó dán đoạn mã Code sau ở phía trên thẻ </head> và Lưu mẫu.
<script type='text/javascript'> //<![CDATA[ var pictureSrc ="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhQQWF8Gru4Oz6vlsGCnT4_aGgheRQ6GnFAt8y9GdKbqpU1U-QP43mV978S5sG6XWCUfMkyAGKpsr9TUejEg9FhFvPnWt1BTIqQmDHseIIeSyiGEzE4zUu6mwMN7r1L8pjE3_paWH5GKk/s1600/hoamai.png"; //the location of the snowflakes var pictureWidth = 15; //the width of the snowflakes var pictureHeight = 15; //the height of the snowflakes var numFlakes = 10; //the number of snowflakes var downSpeed = 0.01; //the falling speed of snowflakes (portion of screen per 100 ms) var lrFlakes = 10; //the speed that the snowflakes should swing from side to side if( typeof( numFlakes ) != 'number' || Math.round( numFlakes ) != numFlakes || numFlakes < 1 ) { numFlakes = 10; } //draw the snowflakes for( var x = 0; x < numFlakes; x++ ) { if( document.layers ) { //releave NS4 bug document.write('<layer id="snFlkDiv'+x+'"><imgsrc="'+pictureSrc+'" height="'+pictureHeight+'"width="'+pictureWidth+'" alt="*" border="0"></layer>'); } else { document.write('<div style="position:absolute; z-index:9999;"id="snFlkDiv'+x+'"><img src="'+pictureSrc+'"height="'+pictureHeight+'" width="'+pictureWidth+'" alt="*"border="0"></div>'); } } //calculate initial positions (in portions of browser window size) var xcoords = new Array(), ycoords = new Array(), snFlkTemp; for( var x = 0; x < numFlakes; x++ ) { xcoords[x] = ( x + 1 ) / ( numFlakes + 1 ); do { snFlkTemp = Math.round( ( numFlakes - 1 ) * Math.random() ); } while( typeof( ycoords[snFlkTemp] ) == 'number' ); ycoords[snFlkTemp] = x / numFlakes; } //now animate function flakeFall() { if( !getRefToDivNest('snFlkDiv0') ) { return; } var scrWidth = 0, scrHeight = 0, scrollHeight = 0, scrollWidth = 0; //find screen settings for all variations. doing this every time allows for resizing and scrolling if( typeof( window.innerWidth ) == 'number' ) { scrWidth = window.innerWidth; scrHeight = window.innerHeight; } else { if( document.documentElement && (document.documentElement.clientWidth ||document.documentElement.clientHeight ) ) { scrWidth = document.documentElement.clientWidth; scrHeight = document.documentElement.clientHeight; } else { if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) { scrWidth = document.body.clientWidth; scrHeight = document.body.clientHeight; } } } if( typeof( window.pageYOffset ) == 'number' ) { scrollHeight = pageYOffset; scrollWidth = pageXOffset; } else { if( document.body && ( document.body.scrollLeft ||document.body.scrollTop ) ) { scrollHeight = document.body.scrollTop;scrollWidth = document.body.scrollLeft; } else { if(document.documentElement && (document.documentElement.scrollLeft ||document.documentElement.scrollTop ) ) { scrollHeight =document.documentElement.scrollTop; scrollWidth =document.documentElement.scrollLeft; } } } //move the snowflakes to their new position for( var x = 0; x < numFlakes; x++ ) { if( ycoords[x] * scrHeight > scrHeight - pictureHeight ) { ycoords[x] = 0; } var divRef = getRefToDivNest('snFlkDiv'+x); if( !divRef ) { return; } if( divRef.style ) { divRef = divRef.style; } var oPix = document.childNodes ? 'px' : 0; divRef.top = ( Math.round( ycoords[x] * scrHeight ) + scrollHeight ) + oPix; divRef.left = ( Math.round( ( ( xcoords[x] * scrWidth ) - (pictureWidth / 2 ) ) + ( ( scrWidth / ( ( numFlakes + 1 ) * 4 ) ) * (Math.sin( lrFlakes * ycoords[x] ) - Math.sin( 3 * lrFlakes * ycoords[x]) ) ) ) + scrollWidth ) + oPix; ycoords[x] += downSpeed; } } //DHTML handlers function getRefToDivNest(divName) { if( document.layers ) { return document.layers[divName]; } //NS4 if( document[divName] ) { return document[divName]; } //NS4 also if( document.getElementById ) { return document.getElementById(divName); } //DOM (IE5+, NS6+, Mozilla0.9+, Opera) if( document.all ) { return document.all[divName]; } //Proprietary DOM - IE4 return false; } window.setInterval('flakeFall();',100); //]]> </script>
Tùy chỉnh.
· Bạn muốn hoa anh đào rơi hay lá rơi hay tuyết rơi hay sao rơi,…Thì các bạn chỉ cần thay đổi hình ảnh này https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhQQWF8Gru4Oz6vlsGCnT4_aGgheRQ6GnFAt8y9GdKbqpU1U-QP43mV978S5sG6XWCUfMkyAGKpsr9TUejEg9FhFvPnWt1BTIqQmDHseIIeSyiGEzE4zUu6mwMN7r1L8pjE3_paWH5GKk/s1600/hoamai.png là xong.
· 15 Chiều rộng của bông.
· 15 Chiều cao của bông.
· 10 Số bông hoa xuất hiện cùng một lúc.
· 0,01 Tốc độ rơi của các bông hoa.
· 10 Tốc độ các bông hoa giao động từ bên trái sang bên phải và ngược lại.
Ok như vậy là xong!
Chúc các bạn thành công!
0nhận xét