[Xenforo Mod] - Share code trang trí Noel cho forum Vbulletin và Xenforo

Hôm nay, mình xin hướng dẫn các bạn cách trang tri Noel cho forum Vbulletin và Xenforo bằng code, nó khá phù hợp cho những ngày noel, năm mới, cách làm khác đơn giản, tuy nhiên bạn cũng phải có chút hiểu biết về code của diễn dàn mới có thể thực hiện được, hi vọng với code trang tri Noel cho forum VBB và Xenforo sẽ góp phần tạo nên một không khí ấm áp cho forum của bạn trong những ngày đông cuối năm.

Share code trang tri Noel cho forum VBB và Xenforo

Đối với forum VBB
Bước 1: Down file đính kèm về, giải nén rồi up holiday_bells vào folder chứa forum
Bước 2: Thêm đoạn code này vào header (Admincp -> Style Manager -> Edit template -> header)
Nếu forum chưa có cài thư viện jQuery thì thêm đoạn này vào 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script><script src="holiday_bells/js/swfobject.min.js"></script><script src="holiday_bells/js/holiday_bells.js"></script><script src="holiday_bells/js/jquery.snowstorm.js"></script>

Bước 3: Thêm đoạn code này vào footer (Admincp -> Style Manager -> Edit template -> footer)

<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><div class="b-ball__i"></div></div><div class="b-ball b-ball_n2 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div><div class="b-ball b-ball_n3 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div><div class="b-ball b-ball_n4 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div><div class="b-ball b-ball_n5 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div><div class="b-ball b-ball_n6 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div><div class="b-ball b-ball_n7 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div><div class="b-ball b-ball_n8 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div><div class="b-ball b-ball_n9 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div><div class="b-ball b-ball_i1"><div class="b-ball__right"></div><div class="b-ball__i"></div></div><div class="b-ball b-ball_i2"><div class="b-ball__right"></div><div class="b-ball__i"></div></div><div class="b-ball b-ball_i3"><div class="b-ball__right"></div><div class="b-ball__i"></div></div><div class="b-ball b-ball_i4"><div class="b-ball__right"></div><div class="b-ball__i"></div></div><div class="b-ball b-ball_i5"><div class="b-ball__right"></div><div class="b-ball__i"></div></div><div class="b-ball b-ball_i6"><div class="b-ball__right"></div><div class="b-ball__i"></div></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><div class="b-ball__i"></div></div><div class="b-ball b-ball_n2 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div><div class="b-ball b-ball_n3 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div><div class="b-ball b-ball_n4 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div><div class="b-ball b-ball_n5 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div><div class="b-ball b-ball_n6 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div><div class="b-ball b-ball_n7 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div><div class="b-ball b-ball_n8 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div><div class="b-ball b-ball_n9 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div><div class="b-ball b-ball_i1"><div class="b-ball__right"></div><div class="b-ball__i"></div></div><div class="b-ball b-ball_i2"><div class="b-ball__right"></div><div class="b-ball__i"></div></div><div class="b-ball b-ball_i3"><div class="b-ball__right"></div><div class="b-ball__i"></div></div><div class="b-ball b-ball_i4"><div class="b-ball__right"></div><div class="b-ball__i"></div></div><div class="b-ball b-ball_i5"><div class="b-ball__right"></div><div class="b-ball__i"></div></div><div class="b-ball b-ball_i6"><div class="b-ball__right"></div><div class="b-ball__i"></div></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><div class="b-ball__i"></div></div><div class="b-ball b-ball_n2 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div><div class="b-ball b-ball_n3 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div><div class="b-ball b-ball_n4 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div><div class="b-ball b-ball_n5 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div><div class="b-ball b-ball_n6 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div><div class="b-ball b-ball_n7 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div><div class="b-ball b-ball_n8 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div><div class="b-ball b-ball_n9 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div><div class="b-ball b-ball_i1"><div class="b-ball__right"></div><div class="b-ball__i"></div></div><div class="b-ball b-ball_i2"><div class="b-ball__right"></div><div class="b-ball__i"></div></div><div class="b-ball b-ball_i3"><div class="b-ball__right"></div><div class="b-ball__i"></div></div><div class="b-ball b-ball_i4"><div class="b-ball__right"></div><div class="b-ball__i"></div></div><div class="b-ball b-ball_i5"><div class="b-ball__right"></div><div class="b-ball__i"></div></div><div class="b-ball b-ball_i6"><div class="b-ball__right"></div><div class="b-ball__i"></div></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><div class="b-ball__i"></div></div><div class="b-ball b-ball_n2 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div><div class="b-ball b-ball_n3 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div><div class="b-ball b-ball_n4 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div><div class="b-ball b-ball_n5 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div><div class="b-ball b-ball_n6 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div><div class="b-ball b-ball_n7 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div><div class="b-ball b-ball_n8 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div><div class="b-ball b-ball_n9 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div><div class="b-ball b-ball_i1"><div class="b-ball__right"></div><div class="b-ball__i"></div></div><div class="b-ball b-ball_i2"><div class="b-ball__right"></div><div class="b-ball__i"></div></div><div class="b-ball b-ball_i3"><div class="b-ball__right"></div><div class="b-ball__i"></div></div><div class="b-ball b-ball_i4"><div class="b-ball__right"></div><div class="b-ball__i"></div></div><div class="b-ball b-ball_i5"><div class="b-ball__right"></div><div class="b-ball__i"></div></div><div class="b-ball b-ball_i6"><div class="b-ball__right"></div><div class="b-ball__i"></div></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><div class="b-ball__i"></div></div><div class="b-ball b-ball_n2 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div><div class="b-ball b-ball_n3 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div><div class="b-ball b-ball_n4 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div><div class="b-ball b-ball_n5 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div><div class="b-ball b-ball_n6 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div><div class="b-ball b-ball_n7 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div><div class="b-ball b-ball_n8 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div><div class="b-ball b-ball_n9 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div><div class="b-ball b-ball_i1"><div class="b-ball__right"></div><div class="b-ball__i"></div></div><div class="b-ball b-ball_i2"><div class="b-ball__right"></div><div class="b-ball__i"></div></div><div class="b-ball b-ball_i3"><div class="b-ball__right"></div><div class="b-ball__i"></div></div><div class="b-ball b-ball_i4"><div class="b-ball__right"></div><div class="b-ball__i"></div></div><div class="b-ball b-ball_i5"><div class="b-ball__right"></div><div class="b-ball__i"></div></div><div class="b-ball b-ball_i6"><div class="b-ball__right"></div><div class="b-ball__i"></div></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><div class="b-ball__i"></div></div><div class="b-ball b-ball_n2 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div><div class="b-ball b-ball_n3 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div><div class="b-ball b-ball_n4 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div><div class="b-ball b-ball_n5 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div><div class="b-ball b-ball_n6 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div><div class="b-ball b-ball_n7 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div><div class="b-ball b-ball_n8 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div><div class="b-ball b-ball_n9 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div><div class="b-ball b-ball_i1"><div class="b-ball__right"></div><div class="b-ball__i"></div></div><div class="b-ball b-ball_i2"><div class="b-ball__right"></div><div class="b-ball__i"></div></div><div class="b-ball b-ball_i3"><div class="b-ball__right"></div><div class="b-ball__i"></div></div><div class="b-ball b-ball_i4"><div class="b-ball__right"></div><div class="b-ball__i"></div></div><div class="b-ball b-ball_i5"><div class="b-ball__right"></div><div class="b-ball__i"></div></div><div class="b-ball b-ball_i6"><div class="b-ball__right"></div><div class="b-ball__i"></div></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><div class="b-ball__i"></div></div><div class="b-ball b-ball_n2 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div><div class="b-ball b-ball_n3 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div><div class="b-ball b-ball_n4 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div><div class="b-ball b-ball_n5 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div><div class="b-ball b-ball_n6 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div><div class="b-ball b-ball_n7 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div><div class="b-ball b-ball_n8 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div><div class="b-ball b-ball_n9 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div><div class="b-ball b-ball_i1"><div class="b-ball__right"></div><div class="b-ball__i"></div></div><div class="b-ball b-ball_i2"><div class="b-ball__right"></div><div class="b-ball__i"></div></div><div class="b-ball b-ball_i3"><div class="b-ball__right"></div><div class="b-ball__i"></div></div><div class="b-ball b-ball_i4"><div class="b-ball__right"></div><div class="b-ball__i"></div></div><div class="b-ball b-ball_i5"><div class="b-ball__right"></div><div class="b-ball__i"></div></div><div class="b-ball b-ball_i6"><div class="b-ball__right"></div><div class="b-ball__i"></div></div></i></i></div> </div>

Bước 4: Thêm đoạn css này vào additional.css (Admincp -> Style Manager -> Edit template -> CSS template -> additional.css) hoặc có thể tạo ra 1 file css rồi include vào forum.

/* HOLIDAY BELLS */ .b-page__content { min-height:120px; }.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('holiday_bells/images/balls/b-head-decor_newyear.png') repeat-x 0 0; }.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('holiday_bells/images/balls/b-ball_n1.png') no-repeat; }.b-ball_n2 .b-ball__i { background:url('holiday_bells/images/balls/b-ball_n2.png') no-repeat; }.b-ball_n3 .b-ball__i { background:url('holiday_bells/images/balls/b-ball_n3.png') no-repeat; }.b-ball_n4 .b-ball__i { background:url('holiday_bells/images/balls/b-ball_n4.png') no-repeat; }.b-ball_n5 .b-ball__i { background:url('holiday_bells/images/balls/b-ball_n5.png') no-repeat; }.b-ball_n6 .b-ball__i { background:url('holiday_bells/images/balls/b-ball_n6.png') no-repeat; }.b-ball_n7 .b-ball__i { background:url('holiday_bells/images/balls/b-ball_n7.png') no-repeat; }.b-ball_n8 .b-ball__i { background:url('holiday_bells/images/balls/b-ball_n8.png') no-repeat; }.b-ball_n9 .b-ball__i { background:url('holiday_bells/images/balls/b-ball_n9.png') no-repeat; }.b-ball_i1 .b-ball__i { background:url('holiday_bells/images/balls/b-ball_i1.png') no-repeat; }.b-ball_i2 .b-ball__i { background:url('holiday_bells/images/balls/b-ball_i2.png') no-repeat; }.b-ball_i3 .b-ball__i { background:url('holiday_bells/images/balls/b-ball_i3.png') no-repeat; }.b-ball_i4 .b-ball__i { background:url('holiday_bells/images/balls/b-ball_i4.png') no-repeat; }.b-ball_i5 .b-ball__i { background:url('holiday_bells/images/balls/b-ball_i5.png') no-repeat; }.b-ball_i6 .b-ball__i { background:url('holiday_bells/images/balls/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); } 

Bước 5: Enjoy!

Đối với forum xenforo
Bước 1: Down file đính kèm về, giải nén rồi up holiday_bells vào folder chứa forum
Bước 2: Thêm đoạn code này vào page_container_js_head (Admincp -> Appearance -> Template -> page_container_js_head)

<script src="holiday_bells/js/swfobject.min.js"></script><script src="holiday_bells/js/holiday_bells.js"></script> <script src="holiday_bells/js/jquery.snowstorm.js"></script>

Bước 3: Thêm đoạn code này vào sau thẻ </body></html> của PAGE_CONTAINER (Admincp -> Appearance -> Template ->PAGE_CONTAINER)

<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><div class="b-ball__i"></div></div><div class="b-ball b-ball_n2 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div><div class="b-ball b-ball_n3 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div><div class="b-ball b-ball_n4 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div><div class="b-ball b-ball_n5 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div><div class="b-ball b-ball_n6 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div><div class="b-ball b-ball_n7 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div><div class="b-ball b-ball_n8 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div><div class="b-ball b-ball_n9 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div><div class="b-ball b-ball_i1"><div class="b-ball__right"></div><div class="b-ball__i"></div></div><div class="b-ball b-ball_i2"><div class="b-ball__right"></div><div class="b-ball__i"></div></div><div class="b-ball b-ball_i3"><div class="b-ball__right"></div><div class="b-ball__i"></div></div><div class="b-ball b-ball_i4"><div class="b-ball__right"></div><div class="b-ball__i"></div></div><div class="b-ball b-ball_i5"><div class="b-ball__right"></div><div class="b-ball__i"></div></div><div class="b-ball b-ball_i6"><div class="b-ball__right"></div><div class="b-ball__i"></div></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><div class="b-ball__i"></div></div><div class="b-ball b-ball_n2 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div><div class="b-ball b-ball_n3 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div><div class="b-ball b-ball_n4 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div><div class="b-ball b-ball_n5 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div><div class="b-ball b-ball_n6 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div><div class="b-ball b-ball_n7 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div><div class="b-ball b-ball_n8 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div><div class="b-ball b-ball_n9 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div><div class="b-ball b-ball_i1"><div class="b-ball__right"></div><div class="b-ball__i"></div></div><div class="b-ball b-ball_i2"><div class="b-ball__right"></div><div class="b-ball__i"></div></div><div class="b-ball b-ball_i3"><div class="b-ball__right"></div><div class="b-ball__i"></div></div><div class="b-ball b-ball_i4"><div class="b-ball__right"></div><div class="b-ball__i"></div></div><div class="b-ball b-ball_i5"><div class="b-ball__right"></div><div class="b-ball__i"></div></div><div class="b-ball b-ball_i6"><div class="b-ball__right"></div><div class="b-ball__i"></div></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><div class="b-ball__i"></div></div><div class="b-ball b-ball_n2 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div><div class="b-ball b-ball_n3 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div><div class="b-ball b-ball_n4 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div><div class="b-ball b-ball_n5 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div><div class="b-ball b-ball_n6 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div><div class="b-ball b-ball_n7 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div><div class="b-ball b-ball_n8 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div><div class="b-ball b-ball_n9 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div><div class="b-ball b-ball_i1"><div class="b-ball__right"></div><div class="b-ball__i"></div></div><div class="b-ball b-ball_i2"><div class="b-ball__right"></div><div class="b-ball__i"></div></div><div class="b-ball b-ball_i3"><div class="b-ball__right"></div><div class="b-ball__i"></div></div><div class="b-ball b-ball_i4"><div class="b-ball__right"></div><div class="b-ball__i"></div></div><div class="b-ball b-ball_i5"><div class="b-ball__right"></div><div class="b-ball__i"></div></div><div class="b-ball b-ball_i6"><div class="b-ball__right"></div><div class="b-ball__i"></div></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><div class="b-ball__i"></div></div><div class="b-ball b-ball_n2 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div><div class="b-ball b-ball_n3 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div><div class="b-ball b-ball_n4 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div><div class="b-ball b-ball_n5 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div><div class="b-ball b-ball_n6 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div><div class="b-ball b-ball_n7 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div><div class="b-ball b-ball_n8 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div><div class="b-ball b-ball_n9 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div><div class="b-ball b-ball_i1"><div class="b-ball__right"></div><div class="b-ball__i"></div></div><div class="b-ball b-ball_i2"><div class="b-ball__right"></div><div class="b-ball__i"></div></div><div class="b-ball b-ball_i3"><div class="b-ball__right"></div><div class="b-ball__i"></div></div><div class="b-ball b-ball_i4"><div class="b-ball__right"></div><div class="b-ball__i"></div></div><div class="b-ball b-ball_i5"><div class="b-ball__right"></div><div class="b-ball__i"></div></div><div class="b-ball b-ball_i6"><div class="b-ball__right"></div><div class="b-ball__i"></div></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><div class="b-ball__i"></div></div><div class="b-ball b-ball_n2 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div><div class="b-ball b-ball_n3 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div><div class="b-ball b-ball_n4 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div><div class="b-ball b-ball_n5 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div><div class="b-ball b-ball_n6 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div><div class="b-ball b-ball_n7 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div><div class="b-ball b-ball_n8 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div><div class="b-ball b-ball_n9 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div><div class="b-ball b-ball_i1"><div class="b-ball__right"></div><div class="b-ball__i"></div></div><div class="b-ball b-ball_i2"><div class="b-ball__right"></div><div class="b-ball__i"></div></div><div class="b-ball b-ball_i3"><div class="b-ball__right"></div><div class="b-ball__i"></div></div><div class="b-ball b-ball_i4"><div class="b-ball__right"></div><div class="b-ball__i"></div></div><div class="b-ball b-ball_i5"><div class="b-ball__right"></div><div class="b-ball__i"></div></div><div class="b-ball b-ball_i6"><div class="b-ball__right"></div><div class="b-ball__i"></div></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><div class="b-ball__i"></div></div><div class="b-ball b-ball_n2 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div><div class="b-ball b-ball_n3 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div><div class="b-ball b-ball_n4 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div><div class="b-ball b-ball_n5 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div><div class="b-ball b-ball_n6 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div><div class="b-ball b-ball_n7 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div><div class="b-ball b-ball_n8 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div><div class="b-ball b-ball_n9 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div><div class="b-ball b-ball_i1"><div class="b-ball__right"></div><div class="b-ball__i"></div></div><div class="b-ball b-ball_i2"><div class="b-ball__right"></div><div class="b-ball__i"></div></div><div class="b-ball b-ball_i3"><div class="b-ball__right"></div><div class="b-ball__i"></div></div><div class="b-ball b-ball_i4"><div class="b-ball__right"></div><div class="b-ball__i"></div></div><div class="b-ball b-ball_i5"><div class="b-ball__right"></div><div class="b-ball__i"></div></div><div class="b-ball b-ball_i6"><div class="b-ball__right"></div><div class="b-ball__i"></div></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><div class="b-ball__i"></div></div><div class="b-ball b-ball_n2 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div><div class="b-ball b-ball_n3 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div><div class="b-ball b-ball_n4 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div><div class="b-ball b-ball_n5 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div><div class="b-ball b-ball_n6 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div><div class="b-ball b-ball_n7 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div><div class="b-ball b-ball_n8 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div><div class="b-ball b-ball_n9 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div><div class="b-ball b-ball_i1"><div class="b-ball__right"></div><div class="b-ball__i"></div></div><div class="b-ball b-ball_i2"><div class="b-ball__right"></div><div class="b-ball__i"></div></div><div class="b-ball b-ball_i3"><div class="b-ball__right"></div><div class="b-ball__i"></div></div><div class="b-ball b-ball_i4"><div class="b-ball__right"></div><div class="b-ball__i"></div></div><div class="b-ball b-ball_i5"><div class="b-ball__right"></div><div class="b-ball__i"></div></div><div class="b-ball b-ball_i6"><div class="b-ball__right"></div><div class="b-ball__i"></div></div></i></i></div> </div>

Bước 4: Thêm đoạn css này vào EXTRA.css (Admincp -> Appearance -> Template -> page_container_js_head) hoặc tạo 1 file css mới rồi include vào forum

/* HOLIDAY BELLS */ .b-page__content { min-height:120px; }.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('holiday_bells/images/balls/b-head-decor_newyear.png') repeat-x 0 0; }.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('holiday_bells/images/balls/b-ball_n1.png') no-repeat; }.b-ball_n2 .b-ball__i { background:url('holiday_bells/images/balls/b-ball_n2.png') no-repeat; }.b-ball_n3 .b-ball__i { background:url('holiday_bells/images/balls/b-ball_n3.png') no-repeat; }.b-ball_n4 .b-ball__i { background:url('holiday_bells/images/balls/b-ball_n4.png') no-repeat; }.b-ball_n5 .b-ball__i { background:url('holiday_bells/images/balls/b-ball_n5.png') no-repeat; }.b-ball_n6 .b-ball__i { background:url('holiday_bells/images/balls/b-ball_n6.png') no-repeat; }.b-ball_n7 .b-ball__i { background:url('holiday_bells/images/balls/b-ball_n7.png') no-repeat; }.b-ball_n8 .b-ball__i { background:url('holiday_bells/images/balls/b-ball_n8.png') no-repeat; }.b-ball_n9 .b-ball__i { background:url('holiday_bells/images/balls/b-ball_n9.png') no-repeat; }.b-ball_i1 .b-ball__i { background:url('holiday_bells/images/balls/b-ball_i1.png') no-repeat; }.b-ball_i2 .b-ball__i { background:url('holiday_bells/images/balls/b-ball_i2.png') no-repeat; }.b-ball_i3 .b-ball__i { background:url('holiday_bells/images/balls/b-ball_i3.png') no-repeat; }.b-ball_i4 .b-ball__i { background:url('holiday_bells/images/balls/b-ball_i4.png') no-repeat; }.b-ball_i5 .b-ball__i { background:url('holiday_bells/images/balls/b-ball_i5.png') no-repeat; }.b-ball_i6 .b-ball__i { background:url('holiday_bells/images/balls/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); }  

Bước 5: Enjoy!

Thanks to JacquiiDesigns

Nguồn: sinhvienit.net