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

dcstylexf

Major
Tham gia
24/03/2015
Bài viết
2,005
Được Like
1,615
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

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:

THB

Founder
Thành viên BQT
Tham gia
25/02/2015
Bài viết
6,646
Được Like
3,931
ok, để a test thử.
thanks e. có cái gì hay nhớ giới thiệu ae nha.
 

PVS

Super Moderator
Thành viên BQT
Tham gia
28/02/2015
Bài viết
16,832
Được Like
12,694
để test thử ^^
 
  • Like
Reactions: THB

PVS

Super Moderator
Thành viên BQT
Tham gia
28/02/2015
Bài viết
16,832
Được Like
12,694
sao mình nó không hiện ta ^^
 

PVS

Super Moderator
Thành viên BQT
Tham gia
28/02/2015
Bài viết
16,832
Được Like
12,694
mình nó chả báo lỗi gì cả, làm xong hết nhưng không hiện thôi :)
 

singh

Sergeant
Tham gia
08/06/2015
Bài viết
470
Được Like
276
share cái potarl bài viết được không bác
Untitled.png
 

PVS

Super Moderator
Thành viên BQT
Tham gia
28/02/2015
Bài viết
16,832
Được Like
12,694
vẫn vậy ^^
 

PVS

Super Moderator
Thành viên BQT
Tham gia
28/02/2015
Bài viết
16,832
Được Like
12,694
mình cài cho site free :)))
 

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

XenForo 1 XenForo 2
Translate by PVS

Dịch vụ XenForo của VNXF

Mobile/Zalo: 0906081284

Telegram: anhanhxf

Chỉ nhận web nội dung lành mạnh

Nhà Tài Trợ

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