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

Nếu chưa có kinh nghiệm về Blogspot đừng lo lắng mình có dịch vụ Cầm Tay Chỉ Việc, hãy gọi hoặc Zalo ngay cho mình: 097.1539.681 để được tư vấn và hỗ trợ nhanh nhất nhé!

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.

• Đầ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.

• 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

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.

Bài viết: Tạo nút Demo và Download cho blog được viết bởi admin trang Giaodien.blog

Vui lòng để lại nguồn nếu bạn chia sẻ lại bài viết này.

Để lại nguồn có nghĩa là bạn tôn trọng tác giả.

Động lực để mình chia sẻ nhiều bài viết hay.

Tags: Blog