Chia Sẻ Shortcode Blogspot Cực Hot Dành Cho Người Mới

Những Shortcode này cực kì hữu ích để cho các bạn mới làm website Blogspot có thể thiết kế web trông đẹp mắt hơn. Đồng thời các Shortcodes này cũng giúp cho việc trang hoàng đẹp cho bài viết Blog có những điểm nhấn sinh động hơn.

---

Tạo bảng trên Blogspot

Minh họa tạo bảng trên blogspot

Cách thực hiện:

• Bạn truy cập vào Bài đăng trên blog nhấp vào chỉnh sửa bài viết hoặc thêm bài đăng mới

• Sau đó chuyển sang chế độ HTML và thêm đoạn code bên dưới vào bất kì vị trí nào mà bạn muốn làm xuất hiện bảng

• Sửa https://www.blogger.com thành địa chỉ của bạn

<div class="post-table">

<table>

    <thead>

<tr>

        <th>Cột 1</th>

        <th>Cột 2</th>

        <th>Cột 3</th>

      </tr>

</thead>

    <tbody>

<tr>

        <td data-label="Cột 1">Dòng 1.0</td>

        <td data-label="Cột 2">Dòng 1.1</td>

        <td data-label="Cột 3">Dòng 1.2</td>

      </tr>

<tr>

        <td data-label="Cột 1">Dòng 2.0</td>

        <td data-label="Cột 2">Dòng 2.1</td>

        <td data-label="Cột 3">Dòng 2.2</td>

      </tr>

<tr>

        <td data-label="Cột 1">Dòng 3.0</td>

        <td data-label="Cột 2">Dòng 3.1</td>

        <td data-label="Cột 3">Dòng 3.2</td>

      </tr>

<tr>

        <td data-label="Cột 1">Dòng 4.0</td>

        <td data-label="Cột 2">Dòng 4.1</td>

         <td data-label="Cột 3">Dòng 4.2</td>

      </tr>

</tbody>

</table>

</div> 

Tạo Buttons đơn giản trên Blogspot

Hình ảnh minh họa buttons demo, download trên blogspot

Tạo nút Buttons đơn giản

• Bạn truy cập vào Bài đăng trên blog nhấp vào chỉnh sửa bài viết hoặc thêm bài đăng mới
• Sau đó chuyển sang chế độ HTML và thêm đoạn code bên dưới vào bất kì vị trí nào mà bạn muốn làm xuất hiện
• Sửa https://www.blogger.com thành địa chỉ của bạn

<div class="small-button">

<a class="button small" href="https://www.blogger.com">Button Small</a>

<a class="button medium" href="https://www.blogger.com">Button Medium</a>

<a class="button large" href="https://www.blogger.com">Button Large</a>

</div>

Tạo nút Buttons icon biểu tượng Demo, Download, Buy Now và Visit a Link

<div class="small-button">

<a class="button small demo" href="https://www.blogger.com">Demo Button</a>

<a class="button medium demo" href="https://www.blogger.com">Demo Button</a>

<a class="button large demo" href="https://www.blogger.com">Demo Button</a>

                <br>

<div class="clear">

</div>

<a class="button small download" href="https://www.blogger.com">Download Button</a>

<a class="button medium download" href="https://www.blogger.com">Download Button</a>

<a class="button large download" href="https://www.blogger.com">Download Button</a>

                <br>

<div class="clear">

</div>

<a class="button small buy" href="https://www.blogger.com">Buy Now Button</a>

<a class="button medium buy" href="https://www.blogger.com">Buy Now Button</a>

<a class="button large buy" href="https://www.blogger.com">Buy Now Button</a>

                <br>

<div class="clear">

</div>

<a class="button small visit" href="https://www.blogger.com">Visit a Link Button</a>

<a class="button medium visit" href="https://www.blogger.com">Visit a Link Button</a>

<a class="button large visit" href="https://www.blogger.com">Visit a Link Button</a>

</div>

Tạo Form liên hệ Blogspot

<div class="contact-form">

<div class="contact section" id="contact" style="display: block;">

<div class="widget ContactForm" id="ContactForm1">

<div class="contact-form-widget">

<div class="form">

<form name="contact-form">

<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" placeholder="Name" size="30" type="text" value="" />

                                <input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" placeholder="Email" size="30" type="text" value="" />

                                <textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Message" rows="5"></textarea>

                                <input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Send" />

                                <br />

<div style="text-align: center; width: 100%;">

<div class="contact-form-error-message" id="ContactForm1_contact-form-error-message">

</div>

<div class="contact-form-success-message" id="ContactForm1_contact-form-success-message">

</div>

</div>

</form>

</div>

</div>

</div>

</div>

</div>

Tổng kết

Trong bài viết trên mình đã chia sẻ những code Blogspot mà thường được hay sử dụng cho các bạn cùng tham khảo và dụng cho Blog của bạn đẹp và chuyên nghiệp với từng dạng bài. Chúc các bạn thành công.

Go to Link