Friday, December 30, 2016

Hướng dẫn trang trí Blog/Website nhân dịp tết

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>  

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!


Load disqus comments

0nhận xét