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

PVS

Super Moderator
Thành viên BQT
Tham gia
28/02/2015
Bài viết
16,613
Được Like
12,668
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:

hiBxyfC.gif

Yêu Cầu:
Đầ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:
Mã:
<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:

wf1.PNG


wf2.PNG

Bước tiếp theo, bạn vào template wf_widget_threads_thread_sidebar thay tất cả bằng code:
Mã:
<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:
Mã:
/* 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

Corporal
Tham gia
02/01/2016
Bài viết
170
Được Like
49
Id widget lấy ở đâu vậy. Hay là số thứ tự trong widget fw (**)
 

PVS

Super Moderator
Thành viên BQT
Tham gia
28/02/2015
Bài viết
16,613
Được Like
12,668

mcjury

Corporal
Tham gia
02/01/2016
Bài viết
170
Được Like
49
Không hiển thị bác ơi. Maplus.tk
 

PVS

Super Moderator
Thành viên BQT
Tham gia
28/02/2015
Bài viết
16,613
Được Like
12,668
mình cũng test lại mà không hiện @@, nhờ bác @datdaik000 hỗ trợ ^^
 

mcjury

Corporal
Tham gia
02/01/2016
Bài viết
170
Được Like
49
Lỗi không hiện ảnh và năm ở 2 dòng...
Sidebar nằm dưới cùng
 

Đính kèm

  • Screenshot_2016-03-15-14-53-28.png
    Screenshot_2016-03-15-14-53-28.png
    135.9 KB · Lượt xem: 25

Top Bottom