Tạo Nút Bấm Chuyên Nghiệp trên Blogspot với Shortcode

Xin chào các bạn! Đối với người mới làm website trên Blogspot, việc thêm các nút bấm (buttons) đẹp mắt là một cách tuyệt vời để thu hút người đọc và tăng tương tác. Shortcode tạo nút bấm giúp bạn dễ dàng chèn các nút như "Call to Action", "Download", hoặc "Demo" mà không cần biết nhiều về mã hóa. Trong bài viết này, chúng tôi sẽ hướng dẫn bạn cách sử dụng shortcode nút bấm để làm cho blog của bạn thêm sinh động.

Shortcode nút bấm là gì?

Shortcode nút bấm là một đoạn mã HTML ngắn, cho phép bạn tạo các nút bấm với nhiều kích thước (nhỏ, vừa, lớn) và kiểu dáng (Call to Action, Download, v.v.). Các nút này thường được dùng để dẫn người đọc đến liên kết cụ thể, như tải tài liệu hoặc truy cập trang web.

Ví dụ

Call to Action

Download Now

Cách sử dụng shortcode nút bấm

1. Đăng nhập vào Blogger Dashboard.
2. Vào Bài đăng hoặc Trang, chọn chỉnh sửa hoặc thêm mới.
3. Chuyển sang chế độ HTML trong trình chỉnh sửa.
4. Dán mã shortcode sau vào vị trí bạn muốn nút xuất hiện:

<div class="cta-buttons">
    <a class="button small cta" href="https://example.com">Call to Action</a>
    <br>
    <div class="clear"></div>
    <a class="button small download" href="https://example.com">Download Now</a>
    
</div>
    

Lưu ý khi sử dụng

• Tùy chỉnh liên kết: Thay href="https://example.com" bằng liên kết thực tế, ví dụ: liên kết tải file hoặc trang đích.
• Thêm CSS để định dạng: Thêm CSS vào Theme > Edit HTML trước thẻ </head >:

  .cta-buttons .button { display: inline-block; padding: 10px 20px; margin: 5px; text-decoration: none; border-radius: 5px; }
  .cta-buttons .small { font-size: 14px; }
  .cta-buttons .medium { font-size: 16px; }
  .cta-buttons .large { font-size: 18px; }
  .cta-buttons .cta { background-color: #007bff; color: white; }
  .cta-buttons .download { background-color: #28a745; color: white; }
  .cta-buttons .button:hover { opacity: 0.8; }            
      

• Kiểm tra giao diện: Xem trước bài viết để đảm bảo nút hiển thị đúng trên máy tính và mobile.
• SEO: Thêm thuộc tính title vào thẻ <a>, ví dụ: <a title="Tải tài liệu miễn phí" ...> để tối ưu tìm kiếm.

Kết luận

Shortcode nút bấm giúp blog Blogspot của bạn trở nên chuyên nghiệp và dễ tương tác hơn. Với các kiểu nút đa dạng, bạn có thể dẫn người đọc đến các nội dung quan trọng một cách hiệu quả. Hãy thử ngay và tùy chỉnh theo phong cách của bạn! Nếu cần thêm hướng dẫn, hãy bình luận bên dưới.

Chúc bạn tạo được blog ấn tượng!