Help Tạo Widget giống khatvongsong.vn

[joomdown]

Các bác giúp em tạo cái Widget như trong khatvongsong.vn với ạ. Cái Widget Xem nhiều với cái Widget Tin diễn đàn ở bên phải ấy. Em cảm ơn nhiều ạ.

 

[joomdown]

hiếp mi

 

[THB]

@MacKen ra tay giúp bác ấy.

 

[joomdown]

Bác @MacKen chia sẻ cho anh em với ạ

 

[MacKen]

OK các bác ... mình sẽ giúp .... nhưng đang trong quảng ngãi dưỡng bệnh ... mình sẽ dành it thời gian giúp các bác vào chủ nhật này ( tức ngày mai 27/03)

 

[MacKen]

WIDGETS XEM NHIỀU ( jquery.jcarousel )

Bước 1: Add file js

Vào templates >> gõ từ khóa page_container_js_head >> kiểm tra đoạn script này đã có chưa nếu chưa có thì thêm vào:

sau đoạn này :

    <script src="{xen:helper javaScriptUrl, '{$javaScriptSource}/xenforo/xenforo.js?_v={$xenOptions.jsVersion}'}"></script>

Thêm dưới đoạn trên:

<script type="text/javascript" src="{$javaScriptSource}/jquery/jquery.jcarousel.min.js"></script

Bước 2: SỬA FILE wf_widget_threads

Vào templates >>> gõ từ khóa: wf_widget_threads

Sau đoạn code này :

<xen:elseif is="{$layout} == 'list'" />

và trước đoạn này:

<xen:elseif is="{$layout} == 'full'" />

Tức là trong hàm ( elseif is="{$layout} == 'list'") ta xóa và thay = đoạn này :

<xen:include template="widget_carousel" />

Bước 3: TẠO FILE TEMPLATES widget_carousel

Ta tạo templates mới có tên: widget_carousel

dán đoạn mã dưới đây vào file mới tạo widget_carousel

<div class="widget_carousel">
<ul id="mycarousel" class="jcarousel jcarousel-skin-tango">
<xen:if hascontent="true">
            <xen:contentcheck>

                <xen:foreach loop="$threads" value="$thread">
    <li data-author="{$thread.username}">
    <xen:if is="{$thread.kid_thumb}">
     <a title="{$thread.title}" href="{xen:if '{$_threadLink}', {xen:raw $_threadLink}, {xen:link threads, $thread}}">{xen:raw {$thread.kid_thumb.0}}</a>
    <xen:else/>
        <xen:avatar user="$thread" size="m" img="true" />
    </xen:if>
           <div class="title"><a href="{xen:link threads, $thread}" title="{$thread.title}">{xen:helper snippet, $thread.title, 60}</a></div>
         <div class="info">
        <div class="poster">Bởi <xen:username user="$thread" rich="true" />, <xen:datetime time="$thread.post_date" /></div>
    </div>
    </li>
            </xen:foreach>

            </xen:contentcheck>
        </xen:if>

  </ul>
</div>
<div class="clear"></div>

Bước 4: THÊM CSS

Từ templates ta gõ từ khóa: wf_default.css để thêm css với nội dung sau:

/* Slide carousel */

.jcarousel-skin-tango .jcarousel-direction-rtl {
    direction: rtl;
}

.jcarousel-skin-tango .jcarousel-container-vertical {
    padding:0;
}
.jcarousel-skin-tango .jcarousel-clip {
    overflow: hidden;
}

.jcarousel-skin-tango .jcarousel-clip-vertical {
    height: 320px;
}

.jcarousel-skin-tango .jcarousel-item {
    height:45px;width: 100%;
}

.jcarousel-skin-tango .jcarousel-item-vertical {
margin: 10px 0;margin-bottom:0;padding-bottom:7px;
}
.jcarousel-skin-tango .jcarousel-item-placeholder {
    background: #fff;
    color: #000;
}
.jcarousel-skin-tango img {float:left;margin-right:10px;width:70px;height:50px}
.jcarousel-skin-tango ul li .title a{color: @contentText;font-size:14px;height: 16px;}
.jcarousel-skin-tango ul li .title a:hover{color:#00BCD4;font-size:14px;height: 16px;}
.jcarousel-skin-tango ul li .title{text-transform:lowercase;*overflow:hidden;*text-overflow: ellipsis;*white-space: nowrap;}
.jcarousel-skin-tango ul li .title:first-letter {text-transform: uppercase;}
.jcarousel-skin-tango ul li .poster{ color: rgb(200,200,200);font-size: 11px;display: block;}

Bước 5: EDIT WIDGET HOẶC TẠO WIDGET

• Appearance >> Widget Framework > List Widgets

Ta edit widgets nào đó rồi phần Layout ta chọn List (similar to forum_view)

HOẶC TẠO WIDGET Ở PHẦN LAYOUT: TA CŨNG CHỌN List (similar to forum_view) NHÉ

Bước 6 OK nhé:

P/s: MÌnh nghĩ sẽ có lỗi với những bạn chưa biết edit layout templates hoặc do style của các bạn khác mình ... nếu có lỗi hãy cm ở đây mình sẽ hướng dẫn tiếp