Tạo widget Bạn đang cần gì? đẹp cho Xenforo

PVS

Super Moderator
Thành viên BQT
Tham gia
28/02/2015
Bài viết
16,735
Được Like
12,681
Tạo widget Bạn đang cần gì? đẹp cho Xenforo

Bài viết này sẽ hướng dẫn các bạn cách tạo widget Bạn đang cần gì? khá đẹp cho Xenforo.

Demo:

1.png

Cách làm như sau:

Đầu tiên các bạn tạo 1 widget mới như hình:

2.png

Phần HTML các bạn điền:

Mã:
<div style="overflow: hidden; display: block;">
<div class="item" style="background: #39599f">
    <div class="customThumb_canbanhi">
    <a href="#" style="POSITION: ABSOLUTE; TOP: 32%; LEFT: 32%;"><i class="fa fa-gamepad fa-3"></i></a>
    <a style="POSITION: ABSOLUTE; bottom: 5%; left: 5%; right: 5%;text-align: center;color: #FFF; ">Trò chơi</a>
    <div class="caption">
        <ul>     
        <a href="#">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</a>
        </ul>
    </div>
    </div>
</div>

<div class="item" style="background: #45b0e3">
    <div class="customThumb_canbanhi">
    <a href="#" style="POSITION: ABSOLUTE; TOP: 32%; LEFT: 32%;"><i class="fa fa-tags fa-3"></i></a>
    <a style="POSITION: ABSOLUTE; bottom: 5%; left: 5%; right: 5%;text-align: center;color: #FFF; "> Ứng dụng</a>
    <div class="caption">
        <ul>     
        <a href="#">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</a>
        </ul>
    </div>
    </div>
</div>

<div class="item" style="background: #647687">
    <div class="customThumb_canbanhi">
    <a href="#" style="POSITION: ABSOLUTE; TOP: 32%; LEFT: 32%;"><i class="fa fa-newspaper-o fa-3"></i></a>
    <a style="POSITION: ABSOLUTE; bottom: 5%; left: 5%; right: 5%;text-align: center;color: #FFF; "> Tin tức</a>
    <div class="caption">
        <ul>     
        <a href="#">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</a>
        </ul>
    </div>
    </div>
</div>
<div class="item" style="background: #ff6565">
    <div class="customThumb_canbanhi">
    <a href="#" style="POSITION: ABSOLUTE; TOP: 32%; LEFT: 32%;"><i class="fa fa-life-ring fa-3"></i></a>
    <a style="POSITION: ABSOLUTE; bottom: 5%; left: 5%; right: 5%;text-align: center;color: #FFF; ">Hỗ trợ kỹ thuật</a>
    <div class="caption">
        <ul>     
        <a href="#">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</a>
        </ul>
    </div>
    </div>
</div>
</div>

Sau đó vào EXTRA.CSS thêm đoạn này vào cuối:

Mã:
/* Bạn đang cần gì? */
#widget-15 .item {
width: 133px;
height: 140px;
overflow: hidden;
position: relative;
float: left;
margin:3px;
}
#widget-15 .item .fa-3 {
font-size: 4em;
text-shadow: 0 0 0 transparent, 0 1px 0 rgba(255, 255, 255, 0.3) !important;
color: #000;
}
#widget-15 .item img
{
border: 0;
position: absolute;
}

#widget-15 .item .caption
{
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.85);
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
opacity: 0;
transition: 0.3s ease-in-out;
}
#widget-15 .item:hover .caption {
opacity:1;
}
#widget-15 .item .caption ul
{
color: #fff;
text-align: center;
top: 0;
position: absolute;
left: 0;
right: 0;
bottom:0;
padding: 10px;
}

#widget-15 .hover-grid .hover-grid-item {
    width: 181px;
    height: 181px;
    margin: 0 18px 18px 0;
    float: left;
    /*-webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;*/
    overflow:hidden;
    position:relative;
    cursor:default;
}

#widget-15 .hover-grid img {
    /*-webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;*/
    border:0;
    position:absolute;
    margin: 0;
    padding: 0;
}

#widget-15 .hover-grid-item .caption {
    background-color: #222;
    width:145px;
    height:145px;
    padding: 18px;
    position:absolute;
    left:0;
    color: #fff;
    display:none;
    line-height:1.1;
    /*-webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;*/
}

#widget-15 .hover-grid-item .caption p {
    font-size: 15px;
    font-weight: 400;
    color: #fff;
}

#widget-15 .caption ul a[href]:hover,
#widget-15 .caption ul a:link,
#widget-15 .caption ul a:visited
{
bottom: 0;
left: 0;
right: 0;
top: 0;
position: absolute;
color: #fff;
padding: 40px 10px 10px 10px;
}
/* End - Bạn đang cần gì? */

Nhớ sửa #widget-15 thành id widget của bạn.

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


Nguồn: cnttplus.com​
 

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

XenForo 1 XenForo 2
Translate by PVS

Dịch vụ XenForo của VNXF

Mr. Tuấn

Mobile/Zalo: 0988 488 096

Telegram: bluekpro

Email: [email protected]

Nhà Tài Trợ

Mút Xốp Không Gian
pallet Thịnh Phát
Top Bottom