Tạo nút Demo và Download cho blog

Zalo 0971539681 Tư vấn & Hỗ trợ
Hướng dẫn các bạn tạo nút Tạo nút Demo và Download cho blogspot đơn giản và tự động, kết hợp với liên kết đính kèm của blog.

Cách làm này giúp bạn có thể tạo chức năng xem trước, tải về cho blogspot.

Tạo nút Demo và Download cho blog

  • Đầu tiên các bạn vô cài đặt và bật liên kết đính kèm của blog lên.

bật liên kết đính kèm lên

  • Tiếp theo các bạn thêm thư viện icon, nếu blog có rồi thì bỏ qua bước này.


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />

  • Tiếp theo thêm CSS

<style>
.action{text-align:center;margin-top:40px;margin-bottom:20px}
.action a.button{display:inline-block;height:31px;background-color:#ff3d00;font-size:14px;color:#ffffff;font-weight:400;line-height:31px;text-align:center;text-decoration:none;cursor:pointer;padding:0 15px;margin:0 5px 5px 0;border:1px solid rgba(0,0,0,.1);border-bottom-width:2px;border-radius:2px}
.action a.button:hover{background-color:#ff3d00!important}
</style>

Tiếp đến là phần HTML, các bạn vô chỉnh sửa blog tìm thẻ <data:post.body/>

Nó sẽ có nhiều thẻ <data:post.body/> các bạn tìm đúng thẻ <data:post.body/> cho bài viết.

Sau đó dán HTML này ngay dưới thẻ <data:post.body/> của bài viết bạn vừa tìm được.


<div class='action'>
    <b:loop index='i' values='data:post.enclosures' var='enclosure'>
        <b:if cond='data:enclosure.mimeType == &quot;Demo&quot;'>
            <a class='button' expr:href='data:enclosure.url' rel='nofollow' style='background-color: #8e44ad;' target='_blank' title='Demo'><i class="fa fa-link" aria-hidden="true"></i> Live demo</a>
        </b:if>
        <b:if cond='data:enclosure.mimeType == &quot;Download&quot;'>
            <a class='button' expr:href='data:enclosure.url' rel='nofollow' style='background-color: #2980b9;' target='_blank'><i class="fa fa-download" aria-hidden="true"></i> Download</a>
        </b:if>
    </b:loop>
</div>

Và cuối cùng là viết bài., khi viết bài nếu muốn chèn 2 nút demo và download thì các bạn nhập như sau

Tạo nút Demo và Download cho blog

Trong đó chính là 2 link nó sẽ lấy ra trong bài viết. Và 2 vị trí bạn nhập cái nào trước cũng được và bắt buộc text là Demo và Download.

Còn ngược lại nếu các bạn không nhập liên kết đính kèm thì 2 nút đó sẽ không hiển thị khi xem bài viết.

Nhận xét

Đăng nhận xét

2 nhận xét
Hiển thị
×