Hướng dẫn Tạo slide giống MamCongNghe.Com

dcstylexf

dcstylexf

SergeantMajor
Code hoặc hướng dẫn này được sử dụng trên phiên bản Xenforo cũ đã quá hạn sử dụng. Bạn hãy click để tìm bản mới hơn
Chào các bạn. Mình thấy cái slide này của CongNgheAZ.Com khá đẹp mà admin bên đó chưa share. Nên hôm nay mình share luôn.

@THB @PVS test hộ em với ạ.

Demo: http://mamcongnghe.com

untitled-png.828


Yêu cầu:
Bạn phải cài 2 addon sau
[bd] Widget FrameWork: http://mamcongnghe.com/Xenforo-Add-on-Free/bd-widget-framework-2-6-0-dev108.147/
Nhấn để mở rộng...
[bd] Image: http://mamcongnghe.com/Xenforo-Add-on-Free/bd-image.156/
Nhấn để mở rộng...

Sau khi cài xong, bạn vào List Widget tạo 1 widget mới với options như sau
Mã: 
Renderer: [bd] Image: Thread Images Carousel
Limit: 20
Widget Type: New Threads
Thumbnail Width: 235
Thumbnail Height: 250
Tiêu đề: 80
Gap (between thumbnails): 5
Visible Thumbnails: 5
Position: hook:page_container_content_top
Những cái option khác tùy chọn.

Vào Admin -> Options -> [bd] Image và set như sau
options.png


Sau đó tiếp tục vào template bdimage_widget.css thay hết bằng code này
Mã: 
#widget-23 h3 { display:none; }

.bdImage_Widget_Slider_Container
{
    overflow: hidden; margin: 0 -14.3%; margin-top: -40px;
}

    .bdImage_Widget_Slider_Container .jcarousel-clip
    {
        margin: 0 auto;
        overflow: hidden;
    }

    .bdImage_Widget_Slider_Container .jcarousel-clip ul li a:first-child {

    }

    .bdImage_Widget_Slider_Container .jcarousel-clip ul li a:last-child {
  background: rgba(0, 0, 0, 0.51);
  position: absolute;
  top: 0;
  bottom: 4px;
  width: 213px;
  font-size: 15pt;
  color: #FFF;
  padding: 20px;
  text-decoration: none;
    }

    .bdImage_Widget_Slider_Container .jcarousel-prev-horizontal,
    .bdImage_Widget_Slider_Container .jcarousel-prev-horizontal:after
    {
        position: absolute;
        left: 5px;
        bottom: 0;
        width: 32px;
        height: 32px;
        cursor: pointer;
        background: transparent;
    }
    .bdImage_Widget_Slider_Container .jcarousel-next-horizontal,
    .bdImage_Widget_Slider_Container .jcarousel-next-horizontal:after
    {
        position: absolute;
        right: 5px;
        bottom: 0;
        width: 32px;
        height: 32px;
        cursor: pointer;
        background: transparent;
    }

    .bdImage_Widget_Slider_Container .jcarousel-prev-horizontal:after
    {
        content: '←';
        line-height: 15px;
        font-size: 30px;
        color: #FFF;
    }
    .bdImage_Widget_Slider_Container .jcarousel-next-horizontal:after
    {
        content: '→';
        line-height: 15px;
        font-size: 30px;
        color: #FFF;
    }

    .bdImage_Widget_Slider_Container .bx-wrapper .bx-viewport
    {
        border: 0;
    }

    .bdImage_Widget_Slider_Container .bx-wrapper img
    {
        width: 100%;
    }

.bdImage_Widget_Items
{
}
{xen:helper clearfix, '.bdImage_Widget_Items'}
    .bdImage_Widget_Items > li
    {
        float: left;
    }

.bdImage_WidgetRenderer_ThreadsTwo
    {
        display: block;
    }

    .bdImage_WidgetRenderer_ThreadsTwo .bdImage_Feature
    {
        display: block;
        float: left;
        overflow: hidden;
    }

        .bdImage_WidgetRenderer_ThreadsTwo .bdImage_Feature .text .title
        {
            width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .bdImage_WidgetRenderer_ThreadsTwo .bdImage_Feature .text .body
        {
            text-align: justify;
        }

    .bdImage_WidgetRenderer_ThreadsTwo .bdImage_Small
    {
        display: block;
        float: none;
        overflow: hidden;
    }
        
    .bdImage_WidgetRenderer_ThreadsTwo .bdImage_Small.bdImage_SmallWithThumbnail .thumbnail
    {
        display: block;
        float: left;
    }

    .{$cssClass} .bdImage_Small.bdImage_SmallWithThumbnail .text
    {
        display: block;
        float: none;
    }
    {xen:helper clearfix, '.{$cssClass} .bdImage_Small.bdImage_SmallWithThumbnail li'}

    .bdImage_WidgetRenderer_ThreadsTwo .bdImage_Small li
    {
        border-bottom: 1px dashed @primaryLighterStill;
        display: block;
        float: none;
        overflow: hidden;
    }
    .bdImage_WidgetRenderer_ThreadsTwo .bdImage_Small li:last-child { border-bottom: 0; }

.bdImage_Widget_Grid_Container
{
    overflow: hidden;
    overflow-x: scroll;
    width: 100%;
}
ul.bdImage_Widget_Grid
{
    list-style: none;
    margin: 0;
    padding: 0;
}
{xen:helper clearfix, 'ul.bdImage_Widget_Grid'}
    .bdImage_Widget_Grid li
    {
        float: left;
    }
    .bdImage_Widget_Grid a
    {
        display: block;
    }
Nếu muốn ẩn trên mobile thì thêm code này vào cuối
Mã: 
@media (max-width:600px)
{
        .Responsive .bdImage_Widget_Slider_Container { display:none; }
}

Bạn ra ngoài forum xem nó hiện chưa. Chưa hiện thì thử rebuild thread information với rebuild Attachment Thumbnails xem sao.

Read more: http://www.vnxf.vn/threads/huong-dan-tao-slide-giong-mamcongnghe-com.3128/page-2#ixzz3gW89joiK

Save lại và thưởng thức. Copy đi đâu cho xin cái nguồn MamCongNghe.Com
 
Sửa lần cuối:
Bài viết liên quan
Xin hướng dẫn cách làm mục này bởi ngoctuanvnnn,
Định dạng ngày custom_fields d-m-Y bởi muabandalat,
Làm sao để tạo hiển thị đăng nhập google tự động khi truy cập diễn đàn bởi bloghocpiano,
Mong các AE giúp đỡ em tạo Custom thread fields bởi nguyendinhnham,
Make the media slider horizontal scroll arrows more visible - Làm cho các mũi tên cuộn ngang của media slider hiển thị rõ ràng hơn cho XenForo 2.2 bởi PVS,
Make collapsible sub-forums of a forum with no parent in forum list - Tạo sub-forum thu gọn của diễn đàn không có parent trong forum list XenForo 2 bởi PVS,
Bài viết mới
Xin hướng dẫn cách làm mục này bởi ngoctuanvnnn,
Bị Lỗi share facebook không hiển thị ảnh đại diện xenforo bởi bloghocpiano,
Lỗi Nội dung không mong muốn bởi muabandalat,
Cho em xin code chèn comment facebook bởi quang9292,
Socials & Languages PREFIXES - Tiền tố mạng xã hội & ngôn ngữ cho XenForo 2.3 bởi PVS,
Bị lỗi ErrorException: Template error: [E_USER_WARNING] Cannot call method first on a non-object (NULL) src/XF/Template/Templater.php:1177 bởi bloghocpiano,
ok, để a test thử.
thanks e. có cái gì hay nhớ giới thiệu ae nha.
 
mình nó chả báo lỗi gì cả, làm xong hết nhưng không hiện thôi :)
 
4,265 28 4
Bạn phải đăng nhập hoặc đăng ký để bình luận.

Dịch vụ XenForo của VNXF

Zalo 0906081284
avatar Silzedt InboxPVS
[VNXF 2x] Best Statistics Pro – Thống kê nâng cao, tối ưu hiệu năng cho XenForo 1.1 Bảng giá dịch vụ thiết kế, làm diễn đàn XenForo năm 2024

Xử lý sự cố

Hướng dẫn sử dụng

XenForo 1 XenForo 2
Translate by PVS
Xenforo là gì?
Xây dựng MXH bằng Xenforo

Texlink

Khám phá AI cùng người Việt
Diễn đàn chia sẻ kinh nghiệm massage
Review dịch vụ massage toàn quốc
Cộng Đồng Massage Việt Nam
Cộng đồng AI Việt Nam
Liên hệ đặt Textlink

Nhà Tài Trợ

Mút Xốp Không Gian
Mút Sofa Không Gian
Back
Top