Share code slider (accordion) dùng để tạo thông báo hoặc hotnews.

Cũng vẫn là vọc vạch, thấy hay nên chia sẽ, có thể dùng với RecentNews (Xenportal), bạn phải tự tùy biến phù hợp nhé.
Và sau đây là phần code nhúng vào template.
Đầu tiên mở EXTRA.CSS thêm đoạn CSS này vào:

Mã:

        .easy-accordion{display:block;position:relative;overflow:hidden;padding:0;margin:0}
        .easy-accordion dt,.easy-accordion dd{margin:0;padding:0}
        .easy-accordion dt,.easy-accordion dd{position:absolute}
        .easy-accordion dt{margin-bottom:0;margin-left:0;z-index:5;/* Safari */ -webkit-transform: rotate(-90deg); /* Firefox */ -moz-transform: rotate(-90deg);-moz-transform-origin: 20px 0px;  /* Internet Explorer */ filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);cursor:pointer;}
        .easy-accordion dd{z-index:1;opacity:0;overflow:hidden}
        .easy-accordion dd.active{opacity:1;}
        .easy-accordion dd.no-more-active{z-index:2;opacity:1}
        .easy-accordion dd.active{z-index:3}
        .easy-accordion dd.plus{z-index:4}
        .easy-accordion .slide-number{position:absolute;bottom:0;left:10px;font-weight:normal;font-size:1.1em;/* Safari */ -webkit-transform: rotate(90deg); /* Firefox */ -moz-transform: rotate(90deg);  /* Internet Explorer */ filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);}
    
        #accordion-3{-width:700px;height:195px;-padding:30px;background:#fff;-border:1px solid #b5c9e8; margin-top: 10px;}
#accordion-3 h2 {
    font-size: 20px;
    -margin-top: 10px;
}
        #accordion-3 dl{-width:700px;height:195px}
#accordion-3 dt {
    height: 56px;
    line-height: 44px;
    text-align: right;
    padding: 10px 15px 0px 0px;
    font-size: 1.1em;
    font-weight: bold;
    font-family: Tahoma,Geneva,sans-serif;
    text-transform: uppercase;
    letter-spacing: 1px;
    background: none repeat scroll 0% 0% rgba(235, 249, 246, 1);
    color: #26526C;
}
        #accordion-3 dt.active{cursor:pointer;color:#fff;background: none repeat scroll 0% 0% #007F74}
        #accordion-3 dt.hover{color:#68889b;}
        #accordion-3 dt.active.hover{color:#fff}
#accordion-3 dd {
    padding: 25px;
    background: none repeat scroll 0% 0% #EBF9F6;
    border-right: 3px solid #007F74;
    border-image: none;
    margin-right: 3px;
    height: 143.4px;
}
    #accordion-3 .slide-number{color:#68889b;left:13px;font-weight:bold}
        #accordion-3 .active .slide-number{color:#fff}
        #accordion-3 a{color:#68889b}
        #accordion-3 dd img{float:right;margin:0 0 0 30px;position:relative;top:-20px}

Sau đó thêm mã HTML để hiển thị vào bất cứ nơi nào bạn muốn:

Mã:

<script type="text/javascript" src="js/jquery.easyAccordion.js"></script>
<script type="text/javascript" src="js/utility.js"></script>
        <div id="accordion-3">
            <dl>
                <dt>Lời vắng!</dt>
                <dd>
                <p>Diễn đàn đang trong quá trình xây dựng và phát triển, vì vậy còn rất nhiều lỗi và thiếu xót, rất mong sự đóng góp - góp ý từ các bạn, để diễn đàn ngày càng hoàn thiện hơn.
                Mọi sự đóng góp - góp ý từ phía các bạn, sẽ là một lời nhắc nhở tinh thần lớn dành cho phía quản lý diễn đàn,
                ZSHARE sẽ luôn cố rắng ngày càng thật hoàn thiện, để thật sự trở thành một nơi hỗ trợ các bạn và chia sẽ với các bạn các vấn đề liên quan đến lĩnh vực Công nghệ - Thông tin.
                </p></dd>
           
                <dt>Thủ thuật hay</dt>
                <dd><h2>Các thủ thuật hay</h2>
                <p>Đang chờ cập nhật...</p></dd>
           
                <dt class="active">Khuyên dùng</dt>
                <dd><h2>ZShareVN khuyên dùng!</h2>
                <p>
                <a href="threads/winrar-lab-5-10-phan-mem-nen-va-giai-nen-tot-nhat.2/#facebook">1. Winrar 5.10 - Phần mềm nén và giải nén.</a>
<br />
                <a href="threads/cpu-z-phan-mem-giup-xem-chi-tiet-thong-tin-phan-cung.40/#facebook">2. CPU-Z - Kiểm tra thông số phần cứng.</a>
<br />
                <a href="threads/unikey-4-2-rc4-phan-mem-go-tieng-viet-khong-the-thieu-tren-may-tinh.44/#facebook">3. UniKey 4.2 RC4 - Công cụ hỗ trợ gõ tiếng Việt.</a>
<br />
                <a href="threads/ccleaner-4-16-4763-professional-phan-mem-don-rac-may-tinh-nho-ma-hay.23/#facebook">4. CCleaner Professional - Phần mềm dọn rác mạnh mẽ.</a>
<br />
                <a href="threads/avast-free-antivirus-2014-phan-mem-diet-va-ngan-ngua-virus-mien-phi-nhung-manh-me.38/#facebook">5. avast! Free Antivirus - Phần mềm diệt Virus miễn phí.</a>
<br />
                <a href="threads/moi-tai-ve-mozilla-firefox-30-0-trinh-duyet-ho-tro-duyet-web-tuyet-voi.14/#facebook">6. Mozilla Firefox - Trình duyệt hỗ trợ duyệt web.</a>

                </p></dd>
           
                <dt>Phần mềm hay</dt>
                <dd><h2>Các phần mềm hay</h2>
                <p>Đang chờ cập nhật...</p></dd>
           </dl>
        </div>

1. Nếu muốn hiển thị ở toàn bộ trang (xenportal, forum, thread_view, forum_view) thì mở template PAGE_CONTAINER tìm:

Mã:

<xen:hook name="page_container_content_top" />

sau đó chèn phía dưới nhé.

2. Nếu muốn chỉ hiển thị ở Xenportal thì mở template EWRporta_Portal tìm:

Mã:

<xen:navigation>
    <xen:breadcrumb source="$breadCrumbs" />
</xen:navigation>

sau đó chèn phía dưới nhé.

3. ...

Cuối cùng là download 2 files JS phía dưới và upload lên thư mục JS của xenforo.
À quên demo thì xem dưới chữ ký nhé.

​

 

demo đâu

 

Chữ ký đó bạn

 

vẫn còn cùi lắm

 

khắc phục đi.. chứ lỗi tùm lum kia bạn ơi

 

Lổi gì bạn phải nói rõ ra chứ?

 

bạn vào web của bạn xem đi... nó hiện ra có đẹp gi đâu.. kinh dị quá

 

mình thây cái phần kia hay nè
dạng tab ở mỗi phần wiget đó dạng đó hay chút

 

Cám ơn bác thớt