• Downloading from our site will require you to have a paid membership. Upgrade to a Premium Membership from 10$ a month today!

    Dont forget read our Rules! Also anyone caught Sharing this content will be banned. By using this site you are agreeing to our rules so read them. Saying I did not know is simply not an excuse! You have been warned.

Share Share Code Trang Trí Noel Cho Forum VBB Và Xenforo

Hero

Hero

Well-Known Member
Staff member
Super Moderators
A Thắng add cái này cho ra không khí Noel nào
SinhVienIT.NET---noel.png






Đố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)

Code: 
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)

Code: 
<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.

Code: 
 /* 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)

Code: 
<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)

Code: 
<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

Code: 
 /* 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!
 
File đính kèm trang trí noel mình đâu có thấy đâu bạn? Ai có link tải nào khác hay không share cho mình với.
 
You must log in or register to reply here.

Facebook Comments

Similar threads

Kayashiteru
Share code đánh dấu trang
Replies
0
Views
2K
Kayashiteru
Kayashiteru
djdungcuty
Share Share Code trang trí cho website đón Tết cực đẹp
Replies
1
Views
3K
msdientu.com113
M
K
Share code xóa subscribe cuối trang xtgem
Replies
0
Views
1K
kienliolna
K
Yeukodamnoi
Ai còn code grab trang mp3.zing.vn share lại em xin cái.
Replies
3
Views
2K
Yeukodamnoi
Yeukodamnoi
M
Share Share code trang Web nhạc cực đẹp
Replies
2
Views
1K
MrLeloi
M
S
Share code Send SMS free,Trang web Scripts, Hacking Too
Replies
0
Views
1K
Sinichiandkid
S
B
Share code like hiển thị tim ra trang chủ.
Replies
0
Views
1K
Boy97
B
congtust24
Share Share code làm trang tin tức , báo chí chuẩn
Replies
2
Views
1K
congtust24
congtust24
KhanhIT
Share code làm trang tin tức , báo chí chuẩn
Replies
0
Views
2K
KhanhIT
KhanhIT
Admin
[Share] code làm trang cá nhân HTML cực đỉnh
Replies
0
Views
3K
Admin
Admin

New posts New threads New resources

Back
Top