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

[dcstylexf]

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

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/

[bd] Image: http://mamcongnghe.com/Xenforo-Add-on-Free/bd-image.156/

Sau khi cài xong, bạn vào List Widget tạo 1 widget mới với options như sau

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

Sau đó tiếp tục vào template bdimage_widget.css thay hết bằng code này

#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

@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

 

[THB]

ok, để a test thử.
thanks e. có cái gì hay nhớ giới thiệu ae nha.

 

[dcstylexf]

ok, để a test thử.
thanks e. có cái gì hay nhớ giới thiệu ae nha.

ok anh.

 

[keylove]

ok, để a test thử.
thanks e. có cái gì hay nhớ giới thiệu ae nha.

bạn test xem có lỗi không, m test không chạy test ok thì giúp mình với

 

[PVS]

để test thử ^^

 

[keylove]

để test thử ^^

test đc không @PVS

 

[PVS]

sao mình nó không hiện ta ^^

 

[dcstylexf]

sao mình nó không hiện ta ^^

bạn mở layout editor xem bị lỗi gì?

 

[keylove]

bạn mở layout editor xem bị lỗi gì?

Nothing rendered, the widget currently has no contents and users will not see it.

Mình cũng không hiện nó báo lỗi này

 

[PVS]

mình nó chả báo lỗi gì cả, làm xong hết nhưng không hiện thôi

 

[dcstylexf]

Nothing rendered, the widget currently has no contents and users will not see it.

Mình cũng không hiện nó báo lỗi này

ai biêt giúp đê

 

[dcstylexf]

mình nó chả báo lỗi gì cả, làm xong hết nhưng không hiện thôi

chả hiểu?

 

[singh]

share cái potarl bài viết được không bác

 

[dcstylexf]

share cái potarl bài viết được không bácView attachment 4696

đã share http://mamcongnghe.com/threads/portal-giong-yeutuoitho-com.2512/

 

[dcstylexf]

@PVS đã cập nhật cách fix rồi nhé, bác xem ở cuối bài viết này nha
http://mamcongnghe.com/threads/tao-slide-giong-mamcongnghe-com.2510/

 

[PVS]

vẫn vậy ^^

 

[dcstylexf]

vẫn vậy ^^

ặc ặc em hết cách :v

 

[dcstylexf]

@PVS site bác là gì nhỉ?

 

[namchelsea]

Site @datdaik000 cũng về tin học giống mình hihi

 

[PVS]

mình cài cho site free ))