Tạo widget Có Thể Bạn Quan Tâm đẹp

[PVS]

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

Tạo widget Có Thể Bạn Quan Tâm đẹp

Bài viết này sẽ hướng dẫn các bạn cách làm widget Có Thể Bạn Quan Tâm phía cuối bài viết.

Demo:

​

Yêu Cầu:

• Cài addon [bd] Widget Framework

Đầu tiên các bạn vào template ad_message_below thêm vào trên cùng đoạn code sau:

<xen:if is="{$post.position} == 0 AND !{$message.conversation_id}">
<xen:hook name="ctbqt_extra" />
</xen:if>

Mục đích là để lấy vị trí cho widget, cho nó chỉ hiện ở dưới bài đầu tiên và không hiện trong Inbox.

Tiếp theo vào tạo 1 widget mới với nội dung như sau:

​

Bước tiếp theo, bạn vào template wf_widget_threads_thread_sidebar thay tất cả bằng code:

<li class="thread-{$thread.thread_id} thread-node-{$thread.node_id}{xen:if '{$thread.isNew}', ' unread'}">
<div class="avatar_thread">
<a href="{xen:if '{$_threadLink}', {xen:raw $_threadLink}, {xen:link threads, $thread}}" title="{$thread.title}" class="img_thread" style="display:block!important;">
<img src="{xen:if {$thread.thumbnail.thumbnailUrl}, {$thread.thumbnail.thumbnailUrl}, {$thread.thumbnail.thumbnail_url}}" title="{$thread.title}" style="width:127px;height:100px;" />
<span class="view_count">View: {xen:number $thread.view_count}</span>
<div class="thread_title">
<span class="thumbnailTitle" href="{xen:if '{$_threadLink}', {xen:raw $_threadLink}, {xen:link threads, $thread}}">{$thread.title}</span>
<span class="view_cound">{xen:number $thread.view_count}</span>
</div>
</a>
</div>
</li>

Sau đó vào EXTRA.CSS thêm đoạn này vào trên cùng:

/* Co The Ban Quan Tam */
#widget-25 {
overflow: hidden;
max-width: 100%;
max-height: 192px;
margin-left: 140px;
}
#widget-25 h3 {
font-size: 20px;
font-family: 'utmavo';
color: #21B1BD;
border-bottom: 3px solid #21B1BD;
padding: 5px 0;
margin-bottom: 5px;
}
#widget-25 .avatarList li {
width: 130px;
height: 127px;
float: left;
border: 1px solid #D7D7D7;
margin-right: 7px;
display: block;
position: relative;
}
#widget-25 a, #widget-12 .avatarList .userTitle {
display: none;
}
#widget-25 .avatar_thread {}
#widget-25 .avatar_thread .view_count {
position: absolute;
color: #fff;
padding: 5px;
background: #03A0E7;
display: block !important;
z-index: 1;
bottom: 0;
left: 0;
}
#widget-25 .avatar_thread .thumbnailTitle {
position: absolute;
color: #fff;
font-size: 10pt;
font-weight: bold;
padding: 5px;
top: 0;
left: -500px;
right: 0;
bottom: 0;
transition: 0.3s ease-in-out;
}
#widget-25 .avatar_thread .thumbnailTitle:hover {
left:0;
background: rgba(51, 51, 51, 0.68);
}
#widget-25 .avatar_thread img {
width: 130px !important;
height: 127px !important;
}
.mainContent {
margin-right: 310px;
}
.sidebar {
width: 300px;
}
@media (max-width:600px) {
.Responsive #widget-25 { margin-left:0; }
}
@media (max-width:500px) {
.Responsive #widget-25 .avatar_thread .thumbnailTitle { left:0;background: rgba(51, 51, 51, 0.68); }
}
/* Widget FrameWork Thread Edit */

Chú ý thay "#widget-25" thành id widget của bạn.

Chúc các bạn thành công.

Nguồn: mamcongnghe.com​

 

[mcjury]

Id widget lấy ở đâu vậy. Hay là số thứ tự trong widget fw (**)

 

[PVS]

Id widget lấy ở đâu vậy. Hay là số thứ tự trong widget fw (**)

khi tạo widget thì nó có 1 id giống như id của node vậy

 

[mcjury]

Không hiển thị bác ơi. Maplus.tk

 

[PVS]

mình cũng test lại mà không hiện @@, nhờ bác @datdaik000 hỗ trợ ^^

 

[mcjury]

Lỗi không hiện ảnh và năm ở 2 dòng...
Sidebar nằm dưới cùng