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

PVS

Generalissimo
Thành viên BQT
Tham gia
28/02/2015
Bài viết
15,961
Được Like
12,454
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

Generalissimo
Thành viên BQT
Tham gia
28/02/2015
Bài viết
15,961
Được Like
12,454

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

Generalissimo
Thành viên BQT
Tham gia
28/02/2015
Bài viết
15,961
Được Like
12,454
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: 24

Hướng dẫn sử dụng

XenForo 1 XenForo 2
Translate by PVS

Hỗ trợ trực tuyến

Support Quảng cáo
Mr. San (PVS)

Skype chat, instant message

Mr. Tuấn (Blue)

Skype chat, instant message

Mr. Tuấn
0988 488 096
Mr. Trọng
0906 081 284
kinhdoanh@vnxf.vn

Nhà Tài Trợ

Mút Xốp Không Gian
pallet Thịnh Phát
Điện Lạnh Thịnh Phát
Top Bottom