Cần slide tin tức demo: elive.vn

Xin chào mọi người

Mình cần slilde tin tức (auto) giống của elive, các bạn xem demo và làm giúp mình với.

Demo: elive.vn

Ảnh đính kèm

Cám ơn nhiều

 

Chẹp, up phát

 

Có cao nhân nào giúp mình với

 

uh cái thông kê đó đệp ai chỉ giáo phát

 

Mình chỉ cần cái slide tin tức thôi

 

Nếu cái ấy là auto thì chỉ có 1 cách là cài add-on recent thread và design nó về giống vậy, còn tự cập nhật thì đơn giản, mai sẽ có hàng cho các bác cái thống kê giống vậy! Còn cái ảnh update bài viết thì mình phải kiếm add-on và nếu có thể xin ít chi phí để làm. Đỡ bỏ công

 

Cám ơn bác

Cái thống kê thì em tự mò được rồi, còn cái slide tin tức thì không biết làm thế nào, bác làm giúp quả slile đó đi, auto được thì tốt, còn không thì cập nhật bằng tay cũng được.

 

Ok mà! Đơn giản nó chỉ là css nếu code tay, còn auto thì dùng add-on rencent và cố định vị trí + css là nó nằm đó! Bỏ phần thống kê news đi. Tất cả nằm trong wrap của Xf thống kê thôi!

 

Bác làm giúp quả auto đi, cái thống kê thì mình tự làm được. Demo: sinhvienluat.vn

 

Slide dùng js của thống kê đây nha bạn! Theo mình nghĩ thì dùng add-ons recent thread để css lại cho nó cũng được nhưng vẫn kg lấy được thumb của bài ra do add-on chưa hổ trợ, chỉ lấy avatar thôi! Thiết nghĩ vậy thì vẫn phải cập nhật bằng tay! Thôi chịu khó nhé, có update mới thì làm luôn thể! À, mà hình này, demo nó dùng timbthumb để cắt ảnh. Bạn thay theo thông tin của bạn nhé:

HTML:

Mã:

<script type="text/javascript" src="http://elive.vn/eliveslide/js/slides.min.jquery.js"></script>
<script type="text/javascript">
        $(function(){
            $('#slides').slides({
                preload: true,
                preloadImage: 'http://elive.vn/eliveslide/images/loading.gif',
                play: 4000,
                pause: 2500,
                hoverPause: true,
                animationStart: function(current){
                    $('.caption').animate({
                        bottom:-35
                    },100);
                    if (window.console && console.log) {
                        // example return of current slide number
                        console.log('animationStart on slide: ', current);
                    };
                },
                animationComplete: function(current){
                    $('.caption').animate({
                        bottom:0
                    },200);
                    if (window.console && console.log) {
                        // example return of current slide number
                        console.log('animationComplete on slide: ', current);
                    };
                },
                slidesLoaded: function() {
                    $('.caption').animate({
                        bottom:0
                    },200);
                }
            });
        });
    </script>
<div class="outset-shadow-slider">
        <div class="elivevn_slider">
            <div id="slides">
                <div class="slides_container" style="overflow: hidden; position: relative; display: block;">
                <!--elive.vn - Slider-->
                <div class="slide" style="position: absolute; top: 0px;">
                              <a class="slide-list-item-link" href="showthread.php?t=1486">
                                <span class="slide-list-item-thumb"><img src="http://elive.vn/imgresize/timthumb.php?src=http://cdn.liva.com.vn/cdn/webphunu.net/sites/default/files/2010-26/la-trau.jpg&amp;w=280&amp;h=210?1366536750816" alt="Cách chữa đau họng bằng tỏi và lá trầu" title="Cách chữa đau họng bằng tỏi và lá trầu"></span></a>
                                <div class="caption" style="bottom: 0px;">
                                <span class="title"><a href="showthread.php?t=1486" title="Cách chữa đau họng bằng tỏi và lá trầu">Cách chữa đau họng bằng tỏi và lá trầu</a></span>
                                <div class="starter"><span class="title-slider"></span>EnzymeLove</div><span class="view-count">12 lần Xem</span>
                                </div>
                            </div><div class="slide" style="position: absolute; top: 0px; left: 290px; z-index: 0; display: none;">
                              <a class="slide-list-item-link" href="showthread.php?t=1485">
                                <span class="slide-list-item-thumb"><img src="http://elive.vn/imgresize/timthumb.php?src=http://cdn.liva.com.vn/cdn/webphunu.net/sites/default/files/2013-16/dau-an.jpeg&amp;w=280&amp;h=210" alt="Cách chọn mua dầu ăn tốt cho sức khỏe" title="Cách chọn mua dầu ăn tốt cho sức khỏe"></span></a>
                                <div class="caption" style="bottom: 0px;">
                                <span class="title"><a href="showthread.php?t=1485" title="Cách chọn mua dầu ăn tốt cho sức khỏe">Cách chọn mua dầu ăn tốt cho sức khỏe</a></span>
                                <div class="starter"><span class="title-slider"></span>EnzymeLove</div><span class="view-count">13 lần Xem</span>
                                </div>
                            </div><div class="slide" style="position: absolute; top: 0px; left: 290px; z-index: 0; display: none;">
                              <a class="slide-list-item-link" href="showthread.php?t=1484">
                                <span class="slide-list-item-thumb"><img src="http://elive.vn/imgresize/timthumb.php?src=http://img-eva.24hstatic.com/upload/2-2013/images/2013-04-19/1366383738-meo-2.jpg&amp;w=280&amp;h=210" alt="Một số mẹo hay cho người dùng Internet" title="Một số mẹo hay cho người dùng Internet"></span></a>
                                <div class="caption" style="bottom: 0px;">
                                <span class="title"><a href="showthread.php?t=1484" title="Một số mẹo hay cho người dùng Internet">Một số mẹo hay cho người dùng Internet</a></span>
                                <div class="starter"><span class="title-slider"></span>EnzymeLove</div><span class="view-count">12 lần Xem</span>
                                </div>
                            </div><div class="slide" style="position: absolute; top: 0px; left: 290px; z-index: 5; display: block;">
                              <a class="slide-list-item-link" href="showthread.php?t=1483">
                                <span class="slide-list-item-thumb"><img src="http://elive.vn/imgresize/timthumb.php?src=http://k14.vcmedia.vn/k:thumb_w/600/TUcCKsDLlXNsjUG7RZV5C4G4GPDR4i/Image/2013/04/2-d40bd/xuc-dong-clip-chu-cho-an-ui-vo-ve-mot-cau-be-thieu-nang-.PNG&amp;w=280&amp;h=210" alt="Clip Chú chó an ủi, vỗ về một em bé thiểu năng gây xúc động hàng triệu người xem" title="Clip Chú chó an ủi, vỗ về một em bé thiểu năng gây xúc động hàng triệu người xem"></span></a>
                                <div class="caption" style="bottom: 0px;">
                                <span class="title"><a href="showthread.php?t=1483" title="Clip Chú chó an ủi, vỗ về một em bé thiểu năng gây xúc động hàng triệu người xem"> Clip Chú chó an ủi, vỗ về một em bé thiểu năng gây...</a></span>
                                <div class="starter"><span class="title-slider"></span>EnzymeLove</div><span class="view-count">14 lần Xem</span>
                                </div>
                            </div><div class="slide" style="position: absolute; top: 0px; left: 290px; z-index: 0; display: none;">
                              <a class="slide-list-item-link" href="showthread.php?t=1482">
                                <span class="slide-list-item-thumb"><img src="http://elive.vn/imgresize/timthumb.php?src=http://www.quicksprout.com/images/seoboard.jpg&amp;w=280&amp;h=210" alt="Khái niệm Dublin core trong Seo nghĩa là gì? Cách tạo và sử dụng dublin core" title="Khái niệm Dublin core trong Seo nghĩa là gì? Cách tạo và sử dụng dublin core"></span></a>
                                <div class="caption" style="bottom: 0px;">
                                <span class="title"><a href="showthread.php?t=1482" title="Khái niệm Dublin core trong Seo nghĩa là gì? Cách tạo và sử dụng dublin core"> Khái niệm Dublin core trong Seo nghĩa là gì? Cách tạo và sử...</a></span>
                                <div class="starter"><span class="title-slider"></span>EnzymeLove</div><span class="view-count">15 lần Xem</span>
                                </div>
                            </div></div>
                <!--elive.vn - Slider-->
               
</div>
        </div>
            </div>

CSS:

Mã:

.outset-shadow-slider {
width: 302px;
height: 255px;
border-radius: 4px 0 0 4px;
padding: 0;
float: left;
margin-top: -265px;
}
.elivevn_slider {
width: 290px;
padding: 5px 5px 20px 5px;
background: #FFFFFF;
border: 1px solid #fff;
height: 228px;
margin-bottom: 4px;
border-radius: 4px 0 0 4px;
float: left;
}
#slides {
position: absolute;
z-index: 100;
height: 220px;
}
.slides_container {
width: 290px;
overflow: hidden;
position: relative;
display: none;
}
.slides_container div.slide {
width: 290px;
height: 220px;
display: block;
}
.slide-list-item-thumb {
float: left;
box-shadow: 0 0 3px #EAEAEA;
width: 280px;
height: 210px;
margin: 5px;
overflow: hidden;
}
.slide-list-item-thumb img {
float: left;
padding: 0;
background: url(http://elive.vn/eliveslide/images/no-img113.png) no-repeat;
width: 278px;
border: 1px solid #999;
}
.caption {
z-index: 500;
position: absolute;
bottom: -65px;
left: 0;
height: 60px;
padding: 5px 5px 5px 5px;
background: #000;
background: rgba(0,0,0,.5);
width: 270px;
line-height: 18px;
color: #fff;
text-shadow: none;
text-shadow: 0 1px #000;
margin: 5px;
}
.caption .title {
font-size: 14px;
font-weight: bold;
width: 270px;
height: 40px;
overflow: hidden;
float: left;
border-bottom: 1px dotted #999999;
}
.caption .title a {
color: #fff;
text-shadow: 0 1px 2px #000;
text-decoration: none;
}
.caption .starter {
width: 150px;
height: 15px;
overflow: hidden;
float: left;
}
.caption .starter, .caption .view-count {
font-size: 12px;
color: #CCCCCC;
}
.caption .view-count {
width: 120px;
white-space: 15px;
float: right;
overflow: hidden;
text-align: right;
}
.caption .starter, .caption .view-count {
font-size: 12px;
color: #CCCCCC;
}
.pagination {
margin: 7px auto 0 !important;
}
.pagination li {
float: left;
margin: 0 1px;
list-style: none;
}
.pagination li.current a {
background-position: 0 -12px;
}
.pagination li a {
display: block;
width: 12px;
height: 0;
padding-top: 12px;
background-image: url(http://elive.vn/eliveslide/images/pagination113.png);
background-position: 0 0;
float: left;
overflow: hidden;

 

Làm được kg mà like vậy bạn mình

 

like điên đảo rồi mà bạn.

Cám ơn lần nữa nhé

 

Chỉ hỏi là slide chạy chưa thôi

 

Bạn có thể chỉnh kích thích cho nó nằm trên banner được không. Mình add vào nhảy lung tung. Mà chỉnh thì lại không chỉnh được, vốn dĩ code quá yếu , css càng yếu hơn.

 

Dùng như nào vậy bác

 

Có thể tạo 1 temp chứa html và css trên rồi chèn vào nơi nào muốn hiển thị là ổn thôi! Mình rip và check trên các trình duyệt chưa thấy vỡ bạn à! Do mặc định vị trí của các slide là absolute nên nếu chèn vào hơi vỡ tí thì định lại vị trí slide là được!

 

Ah, mình để trên banner kia, không phải để ở dưới, vì mình muốn tạo slide đặt quảng cáo.

 

Slide quảng cáo thì nên đặt những flash img hoặc img gif chuyển động cho nhẹ nhàng, làm chi cái này cho nặng vậy bạn mình!

 

Cám ơn bạn đã góp ý. Mình vẫn đang chờ skin muare của cậu đấy