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

[PVS]

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