Other Tạo nút đa chức năng như XFTEAM.NET

[hardcore]

Xin chào mọi người, Mình xin chia sẻ thêm một tut nữa cũng về nút đa chức năng.Vậy nút này có tính năng gì thế ? Xin trả lời là nút này sẽ có chức năng như:
kết nối nhanh, lưu trữ yêu thích, tiết kiệm pin và tìm kiếm nhanh.
DEMO
Trước khi click

Sau khi click

Đầu tiên các bạn thêm code sau vào sau đoạn này trong template footer :

<xen:hook name="footer">

Đoạn thêm bên dưới đây:

<div id="touch"><a href="/pages/smart-touch/" class="OverlayTrigger"></a></div>

Tiếp theo, các bạn thêm code sau vào footer.css :

#touch a {
width: 56px;
height: 56px;
display: block;
background: url(./styles/default/images/finger.png) no-repeat;
position: fixed;
bottom: 10px;
left: 50%;
margin-left: -28px;
}

Sau đó, các bạn tạo làm như sau: admincp ->Applications -> Display Node Tree ->Create New Node ->Page và điền các cột như sau:

1. URL Portion: smart-touch
2. Title: Smart touch
3. Bỏ tích ở dòng này Display in the node list
4. Bên tab Pages Options thêm code dưới đây

<div class="smart-touch">
<div class="list_item"><a href="/misc/quick-navigation-menu" class="OverlayTrigger"><span class="icon"></span>Kết nối nhanh</a></div>
<div class="list_item"><a href="/watched/threads/all" class="OverlayTrigger"><span class="icon"></span>Lưu trữ yêu thích</a></div>
<div class="list_item"><a class="lostpin" href="/misc/style?style_id=1"><span class="icon"></span>Siêu tiết kiệm pin</a></div>
<div class="list_item"><a href="search" class="OverlayTrigger"><span class="icon"></span>Tìm kiếm nhanh</a></div>
</div>

Tiếp theo đó, các bạn thêm đoạn code sau vào Extra.css nhé:

.smart-touch {
width: 220px;
display: block;
margin: 100px auto;
background: #FFF;
padding: 20px 0 20px 20px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
-khtml-border-radius: 8px;
border-radius: 8px;
border: 1px solid rgb(224, 228, 232);
}
.smart-touch .list_item {
position: relative;
padding: 30px;
padding-left: 65px;
}
.smart-touch .list_item a {
font-size: 12px;
text-transform: uppercase;
color: #989797;
}
.smart-touch .list_item .icon {
position: absolute;
left: 0;
top: 10px;
display: block;
}
.smart-touch .list_item:first-child .icon {
background: url(./styles/default/images/lienket.png) no-repeat;
width: 56px;
height: 56px;
}
.smart-touch .list_item:nth-child(2) .icon {
background: url(./styles/default/images/luutru.png) no-repeat;
width: 56px;
height: 51px;
}
.smart-touch .list_item:nth-child(3) .icon {
background: url(./styles/default/images/pin.png) no-repeat;
width: 56px;
height: 55px;
}
.smart-touch .list_item:nth-child(4) .icon {
background: url(./styles/default/images/timkiem.png) no-repeat;
width: 58px;
height: 55px;
}

Nhớ sửa lại phần id style của Tiết kiệm pin nhé.
Cuối cùng, các bạn upload file đính kèm lên root là xong.
Chúc các bạn thành công.

Nguồn: XFTEAM.NET​

 

[mcjury]

thiếu ảnh

 

[Jindo_Katori]

Rất hay.
Sẽ theo dõi bài này.

 

[THB]

hay thank.

 

[đình hoàng]

đánh dấu