share slide đẹp cho xenforo

sanvu88

Cháu ngoan Bác Hồ
Thành viên BQT
#1
Hàng nóng vừa rip xong share luôn cho ai cần thì xài :D

demo ảnh:
sshot-1.png


Tạo temp slide_codientu

Mã:
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easyAccordion.js"></script>
<script type="text/javascript" src="js/utility.js"></script>
<div id="accordion-1">
            <dl class="easy-accordion">
                <dt class="" style="width: 230px; top: 99.5px; margin-left: -99.5px; left: 0px;">First slide<span class="slide-number" style="bottom: 0px;">01</span></dt>
                <dd class="" style="left: 46px; width: 470px; height: 193px; display: block;"><h2>This is the first slide</h2><p><img src="http://www.madeincima.it/download/samples/jquery/easyAccordion/images/monsters/img1.png" alt="Alt text to go here">Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, enim.<br><a href="#" class="more">Read more</a></p></dd>
                <dt class="hover" style="width: 230px; top: 99.5px; margin-left: -99.5px; left: 46px;">Second slide<span class="slide-number" style="bottom: 0px;">02</span></dt>
                <dd class="" style="width: 470px; height: 193px; left: 92px; display: block;"><h2>Here is the second slide</h2><p><img src="http://www.madeincima.it/download/samples/jquery/easyAccordion/images/monsters/img2.png" alt="Alt text to go here">Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, enim.<br><a href="#" class="more">Read more</a></p></dd>
                <dt class="no-more-active" style="width: 230px; top: 99.5px; margin-left: -99.5px; left: 92px;">One more slide<span class="slide-number" style="bottom: 0px;">03</span></dt>
                <dd class="no-more-active" style="width: 470px; height: 193px; left: 138px; display: block;"><h2>One more slide to go here</h2><p><img src="http://www.madeincima.it/download/samples/jquery/easyAccordion/images/monsters/img3.png" alt="Alt text to go here">Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, enim.<br><a href="#" class="more">Read more</a></p></dd>
                <dt class="active" style="width: 230px; top: 99.5px; margin-left: -99.5px; left: 563.8135759599547px;">Another slide<span class="slide-number" style="bottom: 0px;">04</span></dt>
                <dd class="active" style="width: 470px; height: 193px; left: 616.1553886625081px; display: block;"><h2>Another slide to go here</h2><p><img src="http://www.madeincima.it/download/samples/jquery/easyAccordion/images/monsters/img4.png" alt="Alt text to go here">Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, enim.<br><a href="#" class="more">Read more</a></p></dd>
                <dt style="width: 230px; top: 99.5px; margin-left: -99.5px; left: 708px;" class="">Wow one more<span class="slide-number" style="bottom: 0px;">05</span></dt>
                <dd style="width: 470px; height: 193px; left: 754px; display: block;" class=""><h2>Unbilievable one more slide here</h2><p><img src="http://www.madeincima.it/download/samples/jquery/easyAccordion/images/monsters/img5.png" alt="Alt text to go here">Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, enim.<br><a href="#" class="more">Read more</a></p></dd>
                <dt style="width: 230px; top: 99.5px; margin-left: -99.5px; left: 754px;" class="">Last one<span class="slide-number" style="bottom: 0px;">06</span></dt>
                <dd style="width: 470px; height: 193px; left: 800px; display: block;" class=""><h2>This is definitely the last one</h2><p><img src="http://www.madeincima.it/download/samples/jquery/easyAccordion/images/monsters/img6.png" alt="Alt text to go here">Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, enim.<br><a href="#" class="more">Read more</a></p></dd>
            </dl>
        </div>
copy đoạn này vào extra.css

Mã:
/* Begind slide */
html {
    font-size: 62.5%;
}
body {
    color: #294F88;
    font-size: 1.2em;
}
.sample {
    background: none repeat scroll 0 0 #D7E7FF;
    border: 1px solid #92CDEC;
    margin: 30px;
    padding: 30px;
}
h1 {
    font-size: 2em;
    margin: 0 0 20px;
    padding: 0;
}
h2 {
    font-size: 1.6em;
    margin: 40px 0 20px;
    padding: 0;
}
.easy-accordion h2 {
    font-size: 1.6em;
    margin: 0 0 20px;
    padding: 0;
}
p {
    font-size: 1.2em;
    line-height: 170%;
    margin-bottom: 20px;
}
.easy-accordion {
    display: block;
    margin: 0;
    overflow: hidden;
    padding: 0;
    position: relative;
}
.easy-accordion dt, .easy-accordion dd {
    margin: 0;
    padding: 0;
}
.easy-accordion dt, .easy-accordion dd {
    position: absolute;
}
.easy-accordion dt {
    cursor: pointer;
    margin-bottom: 0;
    margin-left: 0;
    transform: rotate(-90deg);
    transform-origin: 20px 0 0;
    z-index: 5;
}
.easy-accordion dd {
    opacity: 0;
    overflow: hidden;
    z-index: 1;
}
.easy-accordion dd.active {
    opacity: 1;
}
.easy-accordion dd.no-more-active {
    opacity: 1;
    z-index: 2;
}
.easy-accordion dd.active {
    z-index: 3;
}
.easy-accordion dd.plus {
    z-index: 4;
}
.easy-accordion .slide-number {
    bottom: 0;
    font-size: 1.1em;
    font-weight: normal;
    left: 10px;
    position: absolute;
    transform: rotate(90deg);
}
dd p {
    line-height: 120%;
}
#accordion-1 {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #B5C9E8;
    height: 245px;
    padding: 30px;
    width: 800px;
}
#accordion-1 dl {
    height: 245px;
    width: 800px;
}
#accordion-1 dt {
    background: url("http://www.madeincima.it/download/samples/jquery/easyAccordion/images/slide-title-inactive-1.jpg") no-repeat scroll 0 0 #FFFFFF;
    color: #26526C;
    font-family: Tahoma,Geneva,sans-serif;
    font-size: 1.1em;
    font-weight: bold;
    height: 46px;
    letter-spacing: 1px;
    line-height: 44px;
    padding: 0 15px 0 0;
    text-align: right;
    text-transform: uppercase;
}
#accordion-1 dt.active {
    background: url("http://www.madeincima.it/download/samples/jquery/easyAccordion/images/slide-title-active-1.jpg") no-repeat scroll 0 0 #FFFFFF;
    color: #FFFFFF;
    cursor: pointer;
}
#accordion-1 dt.hover {
    color: #68889B;
}
#accordion-1 dt.active.hover {
    color: #FFFFFF;
}
#accordion-1 dd {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background: url("http://www.madeincima.it/download/samples/jquery/easyAccordion/images/slide.jpg") repeat-x scroll left bottom transparent;
    border-color: #DBE9EA #DBE9EA #DBE9EA -moz-use-text-color;
    border-image: none;
    border-style: solid solid solid none;
    border-width: 1px 1px 1px 0;
    margin-right: 3px;
    padding: 25px;
}
#accordion-1 .slide-number {
    color: #68889B;
    font-weight: bold;
    left: 10px;
}
#accordion-1 .active .slide-number {
    color: #FFFFFF;
}
#accordion-1 a {
    color: #68889B;
}
#accordion-1 dd img {
    float: right;
    margin: 0 0 0 30px;
}
#accordion-1 h2 {
    font-size: 2.5em;
    margin-top: 10px;
}
#accordion-1 .more {
    display: block;
    padding-top: 10px;
}
/* End slide */
Chèn

Mã:
<xen:include template="slide_codientu" />
vào vị trí muốn hiển thị

Tải file đính kèm up lên host

Bác nào copy nhớ để cho em cái nguồn. Thank
 

Đính kèm

  • 21.6 KB Lượt xem: 79

MeoHoang2009

Học sinh phổ thông
#2
Bài này mình có yêu cầu bên xf mà chưa thấy phản hồi, qua đây thấy có. Hi. nhanh thiệt. Rất thích cách làm việc của bạn sanvu88.
 

khanhhung37

Học sinh phổ thông
#7
Ví dụ mình muốn chèn vào ngay đầu trang dưới navigation thì chèn code vào đâu các bạn nhỉ? Mình mới làm quen với XFR nên mong các bạn giúp đỡ
 

sanvu88

Cháu ngoan Bác Hồ
Thành viên BQT
#9
Ví dụ mình muốn chèn vào ngay đầu trang dưới navigation thì chèn code vào đâu các bạn nhỉ? Mình mới làm quen với XFR nên mong các bạn giúp đỡ[/quot
Mã:
<xen:include template="slide_codientu" />
Chèn code đó xuống dưới code hiển thị của nav là đc mà bạn :D
Mà cụ thể là bạn muốn nó hiển thị dưới nav hay dưới breadcum
 

Quảng cáo Google