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

 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> Xem trước</a> </b:if> <b:if cond='data:enclosure.mimeType == &quot;Buy&quot;'> <a class='button' expr:href='data:enclosure.url' rel='nofollow' style='background-color: #2980b9;' target='_blank'><i class="fa fa-money" aria-hidden="true"></i> Mua ngay</a> </b:if> <b:if cond='data:enclosure.mimeType == &quot;Tải&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> Tải về</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.

Tải về