Bài viết này sẽ tổng hợp một số mã thông dụng, hữu ích dành cho các Blogger trong quá trình thiết kế Blogspot.
1. Lựa chọn kiểu Font, màu chữ và thụt vào đầu dòng
<span style="color:red; font-family:Tahoma; font-size:14pt; margin-left:12px;">Nội dung văn bản </span>
Color: Màu cho chữ, bạn có thể chọn xanh lá cây (green); xanh da trời (blue)..
font-family: font chữ, bạn chọn Tahoma hoặc Times New Roman
font-size: Cỡ chữ
margin-left:12px - Số pixel (khoảng cách) chữ thụt vào đầu dòng. Có thể thay left bằng right cho chiều ngược lại.
2. Canh lề giữa, canh phải, canh trái hoặc canh đều hai bên
< div style="text-align:center;">Nội dung văn bản</div>
text-align: canh lề bạn có thể chọn center để canh giữa; Thay bằng right cho canh phải ; left cho căn trái hoặc justify để canh đều hai bên
3. Định dạng chữ: Đậm, Nghiêng, Gạch chân, Gạch ngang chữ
<b>Nội dung văn bản cần in đậm</b>
<i>Nội dung văn bản in nghiêng</i>
<u>Nội dung văn bản gạch chân</u>
<strike>Nội dung văn bản bị gạch ngang</strike>
4. Đánh dấu (Bookmark) đến một vị trí nhanh trong bài viết
<a href="LINK_bài_viết#Tên_vị_trí_đánh_dấu">Nội dung văn bản</a>
<a name=" Tên_vị_trí_đánh_dấu">Nội dung đánh dấu</a>
Lưu ý:
- Tên vị trí đánh dấu không được dùng khoảng trắng giữa các chữ mà phải dùng phím shift + dấu gạch _ để nối. (Ví dụ: affiliate_marketing)
- Tốt nhất nên dùng chữ không có dấu cho tên gán.
Ví dụ:
- Đến phần affiliate marketing (< a href="LINK_bài_viết_cụ thể# affiliate_marketing">Đến phần affiliate marketing</a>)
- ...
- Điểm A (<a name=" affiliate_marketing">affiliate marketing</a>)
Như vậy khi ta nhấn vào "Đến phần affiliate marketing" thì lập tức lệnh sẽ đưa ta nhảy đến vị trí "affiliate marketing".
5. Chèn hình ảnh vào bài viết
<img src="url hình ảnh cần chèn" title="Tiêu đề hình ảnh" alt="Mô tả ngắn gọn" align="bottom" width="400" height="400"/>
Title: Khi rê chuột lên ảnh, sẽ hiện tiêu đề hình ảnh.
Alt: Khi rê chuột lên ảnh, sẽ hiện mô tả.
align="bottom" - Vị trí ảnh so với chữ. Có thể đổi thành middle (giữa) – top (trên) - bottom(dưới).
6. Chèn link liên kết vào bài viết
<a href="url cần chèn" target="blank">Tên liên kết</a>
target="blank" // Mở link liên kết trong một trang mới. Bỏ lệnh này thì trang mới sẽ được mở ngay tại trang hiện tại.
7. Chèn ảnh chứa link
<a href="Link" target="blank"> <img src="Link hình ảnh"/></a>
8. Tạo button ẩn hiện nội dung
<div>
<div>
<input type="button" value="Hiện" style="width:75px; font-size:11px; margin:0px; padding:4px; border="1"" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = '';this.innerText = ''; this.value = 'Ẩn'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Hiện'; }">
</div>
<div>
<div style="display: none; border:#4F4F4F 1px solid; padding: 4px; background:# ">
Nội dung văn bản
</div>
</div>
</div>
9. Code tạo nút đơn giản và nút Download trong Blogspot
Truy cập vào Bài đăng trên blog của bạn nhấp thêm bài đăng mới. Sau đó chuyển đến chế độ xem HTML và thêm mã bên dưới vào bất kỳ đâu bạn muốn nút xuất hiện.
Code tạo nút đơn giản
<div class="small-button">
< a class="button small" href="https://www.blogger.com">Nút nhỏ</a>
< a class="button medium" href="https://www.blogger.com">Nút bình thường</a>
< a class="button large" href="https://www.blogger.com">Nút lớn</a>
</div>
Code tạo nút Download
<div class="Download-button">
< a class="button small download" href="https://www.blogger.com">Tải về</a>
< a class="button medium download" href="https://www.blogger.com">Tải về</a>
< a class="button large download" href="https://www.blogger.com">Tải về</a>
</div>
10. Code tạo bảng trên Blogspot
Truy cập vào Bài đăng trên blog của bạn nhấp vào thêm bài đăng mới và thêm đoạn mã lệnh bên dưới vào bài viết. Ở đây code sẽ tạo bảng thành 3 cột và 4 hàng. Trên cơ sở đoạn mã này các bạn có thể tùy biến theo mục đích bài viết của mình sao cho phù hợp.
<div class="tao-bang">
<table>
<thead >
<tr>
<th>Tiêu đề cột 1</th>
<th>Tiêu đề cột 2</th>
<th>Tiêu đề cột 3</th>
</tr>
</thead >
<tbody>
<tr>
<td data-label="Tiêu đề cột 1">Dòng số liệu cột 1</td>
<td data-label="Tiêu đề cột 2">Dòng số liệu cột 2</td>
<td data-label="Tiêu đề cột 3">Dòng số liệu cột 3</td>
</tr>
<tr>
<td data-label="Tiêu đề cột 1">Dòng số liệu cột 1</td>
<td data-label="Tiêu đề cột 2">Dòng số liệu cột 2</td>
<td data-label="Tiêu đề cột 3">Dòng số liệu cột 3</td>
</tr>
<tr>
<td data-label="Tiêu đề cột 1">Dòng số liệu cột 1</td>
<td data-label="Tiêu đề cột 2">Dòng số liệu cột 2</td>
<td data-label="Tiêu đề cột 3">Dòng số liệu cột 3</td>
</tr>
</tbody>
</table>
</div>
11. Chèn nhạc vào bài viết
<object name='hat' width=300 height=45>
< embed type='application/x-mplayer2' pluginspage='http://www.microsoft.com/Windows/Downloads/Contents/Products/MediaPlayer/' controls='controlpanel' width=300 height=45 src='url bài hát' autostart="0" showstatusbar="0" ShowControls='true' loop='0' name='hat'></embed></object>
URL bài hat: Phải là link trực tiếp, chẳng hạn đường liên kết có dạng http://...ten_bai_hat.mp3)
loop='0' : Không lặp lại
loop='1' : Lặp lại một lần
loop='-1' : Lặp lại mãi mãi
autostart="0" : Không tự play
autostart="1" : Play ngay khi web tải xong
12. Code tạo Form liên hệ trên 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-error-message" id="ContactForm1_contact-form-success-message">
</div>
</div>
</ form>
</div>
</div>
</div>
</div>
</div>
13. Code xem địa chỉ IP, thông tin của máy truy cập blog
<img src="http://www.wieistmeineip.de/ip-address">
Chú ý : Bạn có thể post vào widget bất kỳ ở trên blog
14. Code tạo Hộp cảnh báo trên Blogspot
Truy cập vào Bài đăng trên blog của bạn nhấp vào thêm bài đăng mới. Sau đó thêm mã bên dưới vào vị trí mà bạn muốn các hộp cảnh báo Blogspot xuất hiện.
<div class="alert-message success">
<i class="fa fa-check-circle"> </i>Thông báo này xuất hiện khi bạn đăng ký trang web thành công.</div>
<div class="alert-message alert">
<i class="fa fa-info-circle"> </i>Thông bán này bạn cần chú ý khi xem bài viết</div>
<div class="alert-message warning">
<i class="fa fa-exclamation-triangle"> </i>Thông báo này xuất hiện khi bạn bỏ qua một yêu cầu nào đó</div>
<div class="alert-message error">
<i class="fa fa-exclamation-circle"> </i>Thông báo này xuất hiện khi gặp phải một lỗi nào đó</div>
</div>
15. Script chèn trực tiếp nội dung file .js vào blogspot
<script type='text/javascript'>
//<![CDATA[
Nội dung file.js ở đây
//]]>
</script>
Kết luận:
Trên đây là những chia sẻ về những code thông dụng thường sử dụng trên Blogspot để các bạn tham khảo và có thể áp dụng cho Blog của mình nhằm tạo ra những bài viết chuyên nghiệp và chuẩn SEO. Hy vọng bài viết hữu ích cho bạn và mong bạn có thể chia sẻ bài viết lên trang mạng xã hội của bạn như: Facebook,Tiktok, Instagram..
Cảm ơn các bạn đã theo dõi bài viết và chúc các bạn thành công./.