188bongda.com

Cách trang trí forum xenforo noel - giáng sinh

Thảo luận trong 'Thủ thuật xenforo - Tut' bắt đầu bởi administrator, 13/12/14.

  1. Lượt xem: 1,391

    administrator
    Administrator
    Thành viên BQT Admin Smod Mod

    Tham gia ngày:
    6/2/13
    Bài viết:
    1,513
    Đã được thích:
    404
    Chào bạn, bạn muốn trang trí forum của bạn nhân dịp noel, giáng sinh thật ấm áp, hãy theo dõi Tuturial này nhé..

    [​IMG]


    Các bạn cần download tập tin này tại đây.

    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)

    Mã:
    <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)

    HTML:
    <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 hoặc public.css (tùy skin) (Admincp -> Appearance -> Template -> page_container_js_head) hoặc tạo 1 file css mới rồi include vào forum

    Mã:
    /* 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); }



    Comment tại topic này nếu chưa hoàn thành nhé ! :D
     
    #1
  2. marketingonline Tôi yêu SEO hơn chính mình ! Thành viên BQT Mod

    Tham gia ngày:
    20/12/13
    Bài viết:
    204
    Đã được thích:
    84
    Em có 1 thắc mắc ! nếu làm cho blogspot thì làm như thế nào ah! hay có cách làm nào để được như thế không ah!
     
    #2
  3. raovathieuqua PageRank 1 Member

    Tham gia ngày:
    23/8/13
    Bài viết:
    111
    Đã được thích:
    7
    Mình cũng làm hôm qua mà khác của bác admin làm, của mình nếu làm giống bác thì mất tiêu cái phần login cho thành viên. :(
     
    #3
  4. duy toi PageRank 2 Member

    Tham gia ngày:
    12/5/14
    Bài viết:
    102
    Đã được thích:
    38
    Chào ad, hồi sáng có hỏi ở chát box cái vụ bên trên. Mình có tìm hiểu và oánh lên ok rồi nhưng không có hiệu ứng chuôn kêu leng keng là sao nhỉ. AD xem giúp mình nhé. Mình không dùng xenforo mà WP nhờ bác check dùm mình. site dưới chữ ký. Thanks AD
     
    #4
    administrator thích bài này.
  5. vuongseo2 PageRank 1 Member

    Tham gia ngày:
    15/1/14
    Bài viết:
    232
    Đã được thích:
    4
    hay quá, vừa vào diễn đàn cái thấy ấn tượng quá bác ak
     
    #5
  6. datdathcmutrans PageRank 1 Member

    Tham gia ngày:
    7/4/14
    Bài viết:
    72
    Đã được thích:
    4
    Đẹp, để mình thử phát cho forum của mình có không khí xíu ;)
     
    #6
  7. land24h PageRank 1 Member

    Tham gia ngày:
    30/6/14
    Bài viết:
    178
    Đã được thích:
    12
    Mình ko làm trên web ai hướng dẫn mình làm blog pos mới muốn trang trí cho nó có không khis1 chút
     
    #7

Chia sẻ trang này