Bật mí các Code Blogspot hữu ích cho người mới

Xin chào các bạn của mình. Trong bài viết ngày hôm nay, Thành Trương Blog sẽ tổng hợp những code Blogspot hay còn gọi là Shortcodes Blogspot 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.

Code Blogspot được nhiều người dùng nhất

{tocify} $title={Contents}

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

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
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>

Lời 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.