Xin chào tất cả các bạn, chào mừng anh em đã quay trở lại với bài viết tiếp theo của Tôi Share! Đố anh em biết lúc mình đang ngồi gõ những dòng code này thì ngoài trời Hà Nội đang là bao nhiêu độ không? Hôm nay đã bước sang tháng 11, chính thức bước vào dịp 2 tháng cuối năm rồi, và sau bao nhiêu ngày tháng 10 nắng nóng hanh hao kiểu dở ông dở thằng do "không khí lạnh lệch đông" làm mình phát bực, thì tối nay cơn gió mùa đông bắc thực thụ đã tràn về miền Bắc.
Ngồi trong phòng tầng 2 đóng kín cửa kính mà vẫn nghe tiếng gió mùa rít qua khe cửa sổ từng cơn lạnh buốt. Nãy mình vừa xuống nhà lấy cốc nước ấm, mở hé cửa ra ngõ một cái mà gió lạnh nó tạt vào mặt rét run cầm cập luôn, hai bàn tay bắt đầu cứng đơ lại, gõ phím cơ cứ lạch cạch sai lên sai xuống. Thời tiết 2 tháng cuối năm ở miền Bắc nó cứ có cái kiểu lạnh rất đặc trưng, vừa lạnh vừa khô, đêm nằm cuộn tròn trong chăn bông ấm thì chỉ muốn ngủ nướng đến trưa chứ chẳng muốn dậy đi học tí nào, ấy thế mà nghĩ đến cảnh ôn thi THPTQG 2027 cùng lời hứa lên bài hướng dẫn cho anh em cộng đồng Blogspot là mình lại phải khoác thêm cái áo nỉ dày sụ, xoa hai bàn tay vào nhau cho ấm rồi mở máy tính lên chiến tiếp.
Biên soạn & Thực nghiệm: Anh Vũ (Tôi Share) | Nền tảng áp dụng: Plus UI v3.3.0
Mục lục bài viết
Thú thật với anh em là cách đây mấy hôm, đúng ngày mùng 2 tháng 11 vừa rồi, bên Fineshop Design cùng bác Nguyễn Khánh Tân (@nktdth) vừa tung ra bản cập nhật Plus UI v3.3 mới cứng. Nhiều anh em trong nhóm nhảy vào inbox hỏi mình rằng: "Vũ ơi sao mình cài xong template nhìn ngoài trang chủ thì đẹp xịn sò con bò, mà lúc vào viết bài nhìn nó cứ phèn phèn như web từ thời năm 2010 thế?".
Lý do đơn giản lắm anh em ạ. Bản chất của Plus UI v3.3 không phải là cứ gõ chữ bừa vào khung soạn thảo thông thường là nó tự biến hình thành mấy cái hộp ghi chú, bảng biểu hay khung code có nút copy đẹp lung linh đâu. Muốn vắt kiệt sức mạnh của cái theme này thì anh em bắt buộc phải hiểu cách nó vận hành qua từng thẻ HTML. Hôm nay, nhân tiện trời đang trở gió lạnh đầu đông chẳng muốn đi lượn hồ Tây, mình sẽ ngồi viết một bài hướng dẫn cực kỳ chi tiết, bóc tách từng ngóc ngách cách mình vẫn dùng để lên bài trên template Plus UI v3.3 sao cho chuẩn chỉnh nhất.
1. Nguyên tắc "sống còn" trước khi đặt tay gõ bài trên Plus UI v3.3
Trước khi đi vào mấy đoạn code màu mè, mình phải cảnh báo trước với anh em một chuyện cực kỳ đau thương mà hồi mới tập tành làm blog năm lớp 7 mình đã dính chưởng không biết bao nhiêu lần. Đó là thói quen dùng chế độ Chế độ xem soạn thảo (Writing view / Compose view) của Blogger.
Khi anh em viết bài trên Plus UI v3.3 mà có sử dụng các thành phần nâng cao như hộp cảnh báo, bảng chia tab, hay danh sách thu gọn, anh em bắt buộc phải viết và xuất bản trực tiếp ở Chế độ xem HTML (HTML view). Đừng bao giờ dại dột đang code ở HTML view xong ngứa tay bấm chuyển ngược về Writing view để xem thử nhé! Trình soạn thảo mặc định của Blogger nó "nhiệt tình" thái quá, nó sẽ tự động xóa sạch các thẻ <input>, làm biến dạng thẻ <details> hoặc tự chèn thêm một đống thẻ <span>, <div> rác vào bài viết của anh em, lúc đó công sức ngồi căn chỉnh coi như đổ sông đổ biển hết.
- Ở giao diện tạo bài đăng mới trên Blogger, anh em nhìn lên góc trên cùng bên trái (hoặc góc dưới tiêu đề tùy giao diện), bấm vào biểu tượng cây bút / mũi tên chuyển đổi.
- Chọn thẳng sang chế độ Chế độ xem HTML (HTML view) có biểu tượng
<>. - Tuyệt đối giữ nguyên ở chế độ này từ lúc bắt đầu viết cho đến khi bấm nút Xuất bản (Publish) hoặc Cập nhật (Update). Muốn xem bài viết hiển thị ra sao thì bấm nút Xem trước (Preview) ở góc phải.
Cảnh báo xương máu từ Tôi Share!
Có 2 lỗi ngớ ngẩn làm hỏng cả trang chủ Blogspot mà rất nhiều bạn mắc phải khi viết bài:
1. Quên chèn dấu ngắt trang (Jump Break): Anh em bắt buộc phải đặt thẻ <!--more--> ngay sau đoạn văn thứ nhất hoặc thứ hai của bài viết. Nếu bài dài hơn nghìn chữ mà không có thẻ này, bộ phân trang (Pagination) ngoài trang chủ sẽ bị lỗi nặng, thậm chí trang chủ trắng trơn không hiện bài nào luôn.
2. Dùng thẻ <div> thay vì <p>: Khi viết văn bản, hãy bọc từng đoạn trong thẻ <p>...</p>. Bản v3.3 có tính năng tự động chèn quảng cáo giữa bài (Post Middle Ads) dựa theo cấu trúc :scope > p:nth-of-type(6). Nếu anh em viết bằng thẻ <div> thì quảng cáo sẽ tịt ngóm không hiện được đâu!
2. Cấu trúc phần mở đầu bài viết (Snippet, Thumbnail ẩn và Mục lục tự động)
Anh em để ý mỗi khi chia sẻ link bài viết lên Facebook hay khi bài hiển thị ngoài trang chủ của Plus UI, có những bài mình không hề muốn tấm ảnh bìa (Thumbnail) xuất hiện chình ình ngay đầu nội dung bài viết gây choáng chỗ, hoặc mình muốn tự viết một đoạn mô tả ngắn (Snippet) riêng mà không bị lấy chữ từ câu chào đầu bài. Ở bản Plus UI v3.3, cách xử lý việc này cực kỳ gọn gàng nhờ thuộc tính data-nosnippet mới được bổ sung để ngăn Google lấy nhầm các thành phần phụ làm mô tả tìm kiếm.
Mỗi khi bắt đầu một bài viết mới trong khung HTML, mình luôn dán bộ khung mở đầu này lên trên cùng:
<!--[ Đặt đoạn trích dẫn mô tả riêng cho bài viết ]-->
<div hidden aria-hidden='true' data-nosnippet>Viết đoạn tóm tắt ngắn gọn khoảng 150 ký tự hiển thị ngoài trang chủ tại đây.</div>
<!--[ Đặt ảnh bìa Thumbnail ẩn (hiện ngoài trang chủ nhưng ẩn trong bài) ]-->
<!--[
<div class='separator'><img alt='Mô tả ảnh' src='Link_ảnh_tỷ_lệ_16_9_tối_thiểu_1280x720.png'/></div>
]-->
<p>Đoạn văn mở đầu chào hỏi độc giả của anh em viết ở đây...</p>
<!--more-->
<!--[ Dòng ghi chú tác giả hoặc nguồn tham khảo ]-->
<p class='pRef'>Tác giả: Tên của bạn</p>
<!--[ Mục lục tự động Table of Contents ]-->
<details class='sp toc' open>
<summary data-show='Show all' data-hide='Hide all'>Mục lục bài viết</summary>
<div class='aToc'></div>
</details>Anh em nhìn kỹ phần ảnh bìa nhé, dù nó nằm trong cặp thẻ đóng mở comment <!--[ ... ]--> nhưng hệ thống đọc feed của Blogger và Plus UI vẫn nhận diện được tấm ảnh đó để làm ảnh đại diện ngoài trang chủ và ảnh Open Graph khi share mạng xã hội, còn khi độc giả bấm vào đọc bài thì tấm ảnh đó sẽ tự ẩn đi. Nhớ chọn ảnh tỷ lệ chuẩn 16:9 (tối thiểu 1280x720px) để không bị cắt xén mất chữ trên ảnh nhé.
3. Cách sử dụng thẻ Tiêu đề (Headings) và Định dạng văn bản mới trên v3.3
Trời càng về khuya gió mùa đập vào cửa tôn bên hàng xóm nghe phần phật, ngồi gõ đến phần này tự nhiên nhớ lại hồi mới làm blog mình toàn phang thẻ <h1> vào giữa bài viết vì tưởng chữ càng to thì Google càng cho lên top. Sai lầm tai hại đấy anh em ạ! Trên Plus UI v3.3, tiêu đề chính của bài đăng đã được đóng khung sẵn là thẻ <h1> rồi. Trong phần thân bài viết, anh em chỉ được phép bắt đầu các mục lớn bằng <h2>, mục con bên trong dùng <h3>, <h4> theo đúng thứ tự phân cấp để bộ Mục lục tự động (.aToc) nó quét và tạo cây thư mục chuẩn xác.
Trang trí tiêu đề và làm nổi bật chữ trong đoạn văn
Nếu anh em thấy cái tiêu đề đơn điệu quá, có thể thêm thuộc tính data-before hoặc data-after vào thẻ tiêu đề để gắn ký hiệu trang trí phía trước hoặc phía sau bằng CSS mà không làm ảnh hưởng đến cấu trúc văn bản chính của SEO.
Đặc biệt trên bản v3.3 vừa ra mắt tuần này, có 2 tính năng định dạng văn bản trực tiếp trong câu mà mình cực kỳ thích là thẻ tô sáng văn bản tự động đổi màu theo theme và hiệu ứng làm mờ chữ bí mật bấm vào mới hiện ra. Anh em thử lấy chuột bấm vào dòng chữ bị nhòe ngay phía trên mà xem, nó sẽ hiện rõ chữ ra ngay lập tức và không bị mờ lại nữa!
<!--[ Tiêu đề có nhãn trang trí trước và sau ]-->
<h3 data-before='★ ' data-after=' (Mẹo nhỏ)'>Tiêu đề mục con của bạn</h3>
<!--[ Đoạn văn thụt lề dòng đầu tiên ]-->
<p class='pIndent'>Đoạn văn này sẽ tự động lùi đầu dòng giống như viết văn trên giấy.</p>
<!--[ Chữ cái lớn đầu đoạn (Drop Cap) ]-->
<p><span class='dropCap'>M</span>ùa đông Hà Nội năm nay đến muộn hơn mọi năm...</p>
<!--[ Tô sáng chữ và Làm mờ chữ (Tính năng mới của v3.3) ]-->
<p>Đoạn chữ có <mark>phần được tô sáng</mark> và <span class='spoiler'>phần nội dung ẩn bị làm mờ</span>.</p><mark> trong đoạn văn thường sẽ tự động ăn theo màu chủ đạo (Accent/Link color) mà người đọc đang chọn trên thanh đổi màu của blog, đồng thời kết hợp cực kỳ mượt với bộ font mặc định mới là Google Sans Flex.
4. Hệ thống Hộp ghi chú (Note), Cảnh báo (Alert) và Trích dẫn (Blockquote)
Một bài hướng dẫn dài mà toàn chữ là chữ thì người đọc nhìn vào chưa đầy 30 giây là ngáp ngắn ngáp dài rồi bấm thoát trang ngay, nhất là vào mấy ngày trời lạnh lười đọc như thế này. Để giữ chân độc giả ở lại lâu hơn (tăng Time on Site cho SEO), mình luôn đan xen các hộp Note và Alert ở những đoạn cần nhấn mạnh lưu ý quan trọng.
Điểm nâng cấp đáng tiền nhất trên Plus UI v3.3 ở mục này là toàn bộ hệ thống icon đã được chuyển sang Material Symbols sắc nét hơn, đồng thời bổ sung thêm kiểu câu hỏi (qs) cho Note và 2 kiểu mới là tip, question cho Alert.
Câu hỏi thường gặp (Kiểu mới trên v3.3)?
Khi nào nên dùng Note và khi nào nên dùng Alert? Theo kinh nghiệm của mình, Note (p.note) có thiết kế thanh mảnh, hợp để chèn các lưu ý phụ hoặc giải thích nhanh. Còn Alert (div.alert) đóng khung rõ ràng kèm icon lớn, rất hợp để báo lỗi, cảnh báo bước quan trọng hoặc mẹo tối ưu.
Dưới đây là mã HTML của các kiểu Note, Alert (cả dạng nền đặc lẫn dạng viền outline) và 3 kiểu Blockquote để anh em tùy biến linh hoạt trong bài:
<!--[ 1. Note thông tin mặc định ]-->
<p class='note'><b>Lưu ý!</b><br/>
Nội dung ghi chú thông tin thông thường.
</p>
<!--[ 2. Note cảnh báo màu đỏ/cam ]-->
<p class='note wr'><b>Cảnh báo!</b><br/>
Nội dung cảnh báo quan trọng không được bỏ qua.
</p>
<!--[ 3. Note câu hỏi (Chỉ có từ bản v3.3 trở lên) ]-->
<p class='note qs'><b>Thắc mắc?</b><br/>
Nội dung giải đáp câu hỏi nhanh cho độc giả.
</p><!--[ Các biến thể Alert: info, warning, success, error, tip, question ]-->
<!--[ Thêm class 'outline' nếu muốn chỉ hiện viền mảnh ]-->
<div class='alert info'><b>Thông tin!</b>
Hộp thông báo nền đặc tiêu chuẩn.
</div>
<div class='alert warning outline'><b>Chú ý!</b>
Hộp cảnh báo dạng viền mảnh (Outline).
</div>
<!--[ 2 kiểu Alert mới xuất hiện trên Plus UI v3.3 ]-->
<div class='alert tip outline'><b>Mẹo nhỏ!</b>
Chia sẻ thủ thuật nhanh giúp tối ưu bài viết.
</div>
<div class='alert question outline'><b>Bạn có biết?</b>
Đặt câu hỏi kích thích sự tò mò của người đọc.
</div><!--[ Trích dẫn mặc định ]-->
<blockquote>
<p>Nội dung câu nói hoặc đoạn trích dẫn...</p>
<span>Tên tác giả</span>
</blockquote>
<!--[ Trích dẫn Style 1 hoặc Style 2 ]-->
<blockquote class='s1'>
<p>Nội dung trích dẫn kiểu 1 có khung viền cách điệu.</p>
<span>Tôi Share</span>
</blockquote>
<blockquote class='s2'>
<p>Nội dung trích dẫn kiểu 2.</p>
<span>Tôi Share</span>
</blockquote>5. Tối ưu Hình ảnh, Thư viện ảnh dạng Lưới (Grid) và Cuộn ngang (Scroll)
Mấy hôm trước lúc mình viết bài đi dạo phố Quán Thánh với ăn bún ngan ngày trời trở lạnh, mình chụp một đống ảnh bằng điện thoại rồi tải thẳng lên bài. Nếu cứ để từng tấm ảnh nối đuôi nhau từ trên xuống dưới thì bài viết dài lê thê, người dùng điện thoại vuốt mỏi cả tay mới qua hết đống ảnh. Trên Plus UI v3.3, anh em có thể gom nhiều ảnh vào thành một khung lưới (Grid Layout), làm nút Show All để giấu bớt ảnh thừa, hoặc tạo thanh cuộn ngang cực kỳ gọn mắt.
- Ảnh tràn viền trên điện thoại: Thêm class
fullvào thẻ<img>(ví dụ:<img class='full' width='1280' height='720' alt='...' src='...'/>) để ảnh tự động tràn sát 2 mép màn hình trên thiết bị di động. - Chú thích ảnh chuẩn ngữ nghĩa (Semantic HTML): Thay vì dùng cấu trúc bảng
table.tr-caption-containercũ kỹ do trình soạn thảo Blogger tự sinh ra, anh em khi gõ HTML tay hãy dùng thẻ<figure>và<figcaption>để vừa sạch code vừa tự động kích hoạt tính năng phóng to ảnh (Lightbox) khi bấm vào. - Cảnh báo về Lazy Load ảnh đầu bài: Tuyệt đối không gắn class
lazyloadkèmdata-srcthủ công cho tấm ảnh đầu tiên xuất hiện trên màn hình (Above-the-fold image), vì nó sẽ làm chậm chỉ số LCP (Largest Contentful Paint) khi đo tốc độ trên PageSpeed Insights. Hãy bật sẵn tính năng Lazy load images và WebP image serving trong phần Cài đặt của Blogger là đủ.
<!--[ 1. Ảnh đơn kèm chú thích chuẩn HTML5 và tự động có Lightbox ]-->
<figure>
<img width='1280' height='720' alt='Gió mùa đông bắc về trên phố Phan Đình Phùng' src='link_anh_cua_ban.jpg'/>
<figcaption>Chú thích cho bức ảnh viết tại đây.</figcaption>
</figure>
<!--[ 2. Ghép nhiều ảnh thành dạng Lưới (Grid Layout) ]-->
<div class='psImg'>
<img width='1280' height='720' alt='Ảnh 1' src='link_anh_1.jpg'/>
<img width='1280' height='720' alt='Ảnh 2' src='link_anh_2.jpg'/>
<img width='1280' height='720' alt='Ảnh 3' src='link_anh_3.jpg'/>
<img width='1280' height='720' alt='Ảnh 4' src='link_anh_4.jpg'/>
</div>
<!--[ 3. Thư viện ảnh cuộn ngang (Có thể thêm class h150, h200, h250 để chỉnh chiều cao) ]-->
<div class='glImg h200'>
<img width='1280' height='720' alt='Ảnh cuộn 1' src='link_anh_1.jpg'/>
<img width='1280' height='720' alt='Ảnh cuộn 2' src='link_anh_2.jpg'/>
<img width='1280' height='720' alt='Ảnh cuộn 3' src='link_anh_3.jpg'/>
</div>Còn nếu bài viết của anh em có tầm 7-8 tấm ảnh chụp màn hình giao diện (như mấy bài mình hay review template hoặc công cụ quản trị Cloudflare Worker ấy), hãy dùng cấu trúc ẩn bớt ảnh kèm nút bấm Xem tất cả (Show All) dưới đây:
<!--[ Thư viện ảnh có nút bấm mở rộng Show All ]-->
<input hidden class='inImg' id='hideImg1' type='checkbox'>
<div class='psImg hdImg'>
<img alt='Ảnh 1' src='link_anh_1.jpg'/>
<img alt='Ảnh 2' src='link_anh_2.jpg'/>
<img alt='Ảnh 3' src='link_anh_3.jpg'/>
<div class='btImg'>
<img alt='Ảnh 4 làm nền nút bấm' src='link_anh_4.jpg'/>
<label for='hideImg1' aria-label='Xem tất cả ảnh'>Xem tất cả</label>
</div>
<!--[ Các ảnh được giấu đi cho đến khi người đọc bấm nút ]-->
<div class='psImg shImg'>
<img alt='Ảnh 5' src='link_anh_5.jpg'/>
<img alt='Ảnh 6' src='link_anh_6.jpg'/>
</div>
</div>6. Cách chèn Bảng biểu (Table) và Cạm bẫy chính tả "stripped"
À rồi, đến phần này là đáng chú ý nhất đây này! Hồi mới chuyển sang dùng dòng theme nhà Fineshop, mình ngồi code một cái bảng so sánh thông số mà gõ đi gõ lại class striped (có 1 chữ p theo đúng chuẩn tiếng Anh và Bootstrap) để làm màu nền xen kẽ từng dòng cho bảng mà nó cứ trơ ra không nhận CSS. Mò vào tận mã nguồn XML của theme mới phát hiện ra các pháp sư thiết kế đặt tên class là stripped (gấp đôi chữ p). Anh em nào không đọc kỹ tài liệu mà cứ gõ theo thói quen là ngồi vò đầu bứt tai cả đêm không hiểu sao bảng không lên màu đấy!
Dưới đây là bảng tổng hợp các class tùy biến bảng dữ liệu chuẩn xác nhất trên Plus UI v3.3 mà mình đã lọc ra cho anh em dễ tra cứu:
| Tên Class (Gắn vào div.table) | Chức năng hiển thị | Kinh nghiệm sử dụng thực tế |
|---|---|---|
bordered / noborder |
Bật hoặc tắt đường kẻ viền chia ô trong bảng | Nên dùng bordered cho bảng nhiều cột số liệu để dễ gióng hàng. |
stripped |
Tô màu nền xen kẽ chẵn/lẻ giữa các hàng | Nhớ gõ đúng 2 chữ p (stripped), gõ striped sẽ không hoạt động. |
hovered |
Làm sáng dòng dữ liệu khi rê chuột qua | Rất hữu ích khi đọc trên máy tính để bàn. |
sticky |
Cố định thanh tiêu đề bảng (thead) khi cuộn |
Kết hợp cùng các class giới hạn chiều cao như mh200 hoặc mh300. |
clr / primary / success / warning / error |
Đổi màu nền cho hàng tiêu đề bảng | Chọn 1 class để tạo điểm nhấn đồng bộ với màu chủ đạo của bài viết. |
sp5 / sp10 / sp20 |
Điều chỉnh khoảng đệm (padding) bên trong ô | Bảng nhiều chữ nên dùng sp10 cho thoáng mắt. |
7. Hướng dẫn chèn Khung Code (Syntax Highlighter) và Chia Tab thông minh
Với một blog chuyên chia sẻ thủ thuật, share code HTML/CSS/JS như Tôi Share, thì bộ khung hiển thị mã nguồn (Code Block) chính là linh hồn của bài viết. Trên Plus UI v3.3, thư viện highlight.js được tích hợp sẵn giúp tự động tô màu cú pháp, đánh số dòng và tạo nút Copy cực nhanh. Nhưng anh em phải nhớ một quy tắc bất di bất dịch: Mọi đoạn code nằm bên trong thẻ <code> đều phải được mã hóa (Escape HTML).
Nghĩa là toàn bộ dấu & phải đổi thành &, dấu mở ngoặc nhọn < phải đổi thành < và dấu đóng ngoặc nhọn > phải đổi thành >. Nếu anh em ném thẳng code HTML sống vào giữa thẻ <code> mà chưa mã hóa, trình duyệt sẽ thực thi luôn đoạn code đó thay vì hiển thị chữ cho người đọc copy! Trước đây mình còn hayเตือน anh em đừng dán nhầm HTML vào CSS, giờ thêm khoản quên escape code này nữa là giao diện bài viết vỡ tan nát ngay.
// Ví dụ khung code có đánh số dòng và tô sáng dòng số 2, 4
const blogName = "Tôi Share";
const templateVersion = "Plus UI v3.3.0";
console.log(`Đang chạy ${blogName} trên nền tảng ${templateVersion}`);Để tạo ra khung code có ghi chú nhãn file, đường dẫn nguồn và tự động bôi đậm dòng lệnh cụ thể như trên, anh em dùng cấu trúc sau:
<!--[ Khung Code đơn có đầy đủ tùy chọn ]-->
<pre data-comment='.js' data-source='src/example.js' data-lines='2,4' data-copy='true' data-highlight='true'><code class='language-javascript'>const a = 1;
const b = 2; // Dòng 2 được đánh dấu qua data-lines='2,4'
console.log(a + b);
console.log('Hoàn tất!'); // Dòng 4 được đánh dấu</code></pre>Ngoài ra, nếu anh em muốn chia sẻ một tiện ích gồm cả 3 phần HTML, CSS và JavaScript (giống như bài mình share code Recent Comments hay công cụ trích xuất URL từ Sitemap), thay vì bắt người đọc cuộn qua 3 khung code dài ngoằng, hãy gom chúng lại vào một khung Multi-tabs Code Block. Đặc biệt trên bản v3.3, thanh tiêu đề Tab đã được nâng cấp tự động căn giữa tab đang mở và có hiệu ứng chỉ báo tràn viền cực mượt:
<!--[ Khung Code chia nhiều Tab (HTML / CSS / JS) ]-->
<div class='pre tabs'>
<input id='preT1-1' type='radio' name='preTab1' checked/>
<input id='preT1-2' type='radio' name='preTab1'/>
<input id='preT1-3' type='radio' name='preTab1'/>
<div>
<label for='preT1-1' data-text='HTML'></label>
<label for='preT1-2' data-text='CSS'></label>
<label for='preT1-3' data-text='JS'></label>
</div>
<pre class='preC1-1' data-source='index.html'><code class='language-html'>[Mã HTML đã được Escape đặt tại đây]</code></pre>
<pre class='preC1-2' data-source='style.css'><code class='language-css'>[Mã CSS đặt tại đây]</code></pre>
<pre class='preC1-3' data-source='main.js'><code class='language-javascript'>[Mã JS đặt tại đây]</code></pre>
</div>Lưu ý nhỏ về ID của Tab:
Nếu trong một bài viết anh em sử dụng nhiều bộ Tab khác nhau, hãy nhớ đổi tên thuộc tính name và cặp id / for kèm class nội dung (ví dụ bộ thứ hai đổi thành preT2-1, name='preTab2', class='preC2-1') để khi bấm chuyển tab ở khung dưới nó không làm nhảy tab ở khung trên nhé!
8. Tạo Nút bấm (Button), Hộp tải file (Download Box) và Liên kết ngoài
Khi chia sẻ tài nguyên hay file template (như đợt mình share bản Lantro UI hay T-Plus UI Liquid Glass), việc đặt một cái nút bấm đẹp mắt hoặc một hộp thông tin file rõ ràng dung lượng, định dạng sẽ giúp người đọc tin tưởng và dễ thao tác hơn rất nhiều. Nếu blog anh em đã bật tính năng Safelink (trang chuyển hướng bảo vệ link ra mắt từ bản v3.2), chỉ cần gắn thêm class safeL vào thẻ <a> là link tải sẽ tự động đi qua trang đếm ngược bảo mật.
<!--[ 1. Liên kết trỏ ra trang web bên ngoài (Có icon mũi tên nhỏ) ]-->
<a class='extL' href='https://www.toishare.net' rel='nofollow noreferrer noopener' target='_blank'>Ghé thăm Tôi Share</a>
<!--[ 2. Nút bấm xem Demo và Tải xuống (Kết hợp Safelink qua class safeL) ]-->
<a class='button' href='#'><i class='icon demo'></i>Xem Demo</a>
<a class='button ln safeL' href='#'><i class='icon dl'></i>Tải xuống bản chuẩn</a>
<!--[ 3. Hộp thông tin tải file (Download Box) ]-->
<div class='dlBox'>
<span class='fT' data-text='zip'></span>
<div class='fN'>
<span>ten_file_tai_xuong.zip</span>
<span class='fS'>2.5MB</span>
</div>
<a class='button safeL' aria-label='Download' href='link_tai_file' rel='nofollow noreferrer noopener' target='_blank'><i class='icon dl'></i></a>
</div>9. Tối ưu Đa phương tiện (Audio, Video tự dừng trên v3.3, Lazy YouTube) và Khối FAQ
Một cải tiến cực kỳ tinh tế trên Plus UI v3.3 mà ít người để ý là khi anh em nhúng video trực tiếp bằng thẻ <video> chuẩn HTML5 vào bài viết, nếu độc giả đang bật video xem mà cuộn chuột lướt xuống đọc tiếp phần chữ bên dưới khiến khung video khuất khỏi màn hình, video sẽ tự động tạm dừng (Auto-pause) và giữ nguyên vị trí giây đang phát (trừ khi người đọc đang bật chế độ Toàn màn hình hoặc Hình trong hình - PiP). Tính năng này giúp người đọc không bị tiếng video làm phiền khi đang đọc phần dưới của bài viết.
Còn với video từ YouTube, anh em tuyệt đối đừng nhúng thẳng mã <iframe> mặc định của YouTube vào bài nhé, nó kéo theo cả tá file script nặng trịch làm tụt điểm tốc độ trang thê thảm lắm. Hãy dùng thành phần Lazy YouTube (chỉ tải ảnh thu nhỏ nhẹ tênh, khi nào người đọc bấm nút Play mới bắt đầu tải khung phát):
<!--[ 1. Nhúng YouTube siêu nhẹ bằng ID video ]-->
<div class='lazyYt' data-embed='r1XE8ON8fos'></div>
<!--[ 2. Trình phát Video HTML5 tự động tạm dừng khi cuộn qua trên v3.3 ]-->
<video controls preload='metadata' playsinline style='width:100%;height:auto'>
<source src='https://example.com/video-demo.mp4' type='video/mp4'>
Trình duyệt của bạn không hỗ trợ phát video HTML5.
</video>
<!--[ 3. Trình phát âm thanh Audio (Hợp chèn nhạc nghe đêm mùa đông) ]-->
<audio controls preload='metadata'>
<source src='https://example.com/audio.mp3' type='audio/mpeg'>
</audio>Giải đáp thắc mắc cuối bài bằng Accordion (FAQ) và Bài viết liên quan
Ở phần cuối mỗi bài hướng dẫn chuyên sâu, mình luôn tạo một nhóm câu hỏi thường gặp bằng thẻ Accordion (details.ac) kết hợp với hộp Bài viết liên quan tự động (Automatic Related Posts). Cách làm này vừa giúp bài viết trông cực kỳ chuyên nghiệp, giải quyết trọn vẹn ý định tìm kiếm của người dùng, vừa tạo luồng liên kết nội bộ (Internal Link) giữ chân độc giả đọc tiếp các bài khác trên blog:
Tại sao mình chèn code Bài viết liên quan tự động (.aRel) mà lúc Xem trước (Preview) không thấy hiện gì?
Tính năng Automatic Related Posts sử dụng nguồn cấp dữ liệu (Feed) thực tế của blog để lọc bài theo nhãn (Label), nên nó sẽ không hoạt động ở chế độ Preview của Blogger. Bạn chỉ cần xuất bản bài viết ra là danh sách bài liên quan sẽ hiển thị đầy đủ.
Mình có thể chia một bài viết cực dài thành nhiều trang Tab ngay từ đầu bài được không?
Hoàn toàn được! Bạn có thể dùng cấu trúc <div class='tabs stick'> bao bọc toàn bộ bài viết để chia bài thành từng phần (ví dụ: Phần 1, Phần 2, Phần 3) với thanh tiêu đề Tab dính chặt trên đỉnh màn hình khi cuộn.
Làm sao để đổi tên bài viết sang Schema NewsArticle cho các bài tin tức thời sự?
Mặc định Plus UI v3.3 gán cấu trúc dữ liệu BlogPosting cho bài đăng thường. Nếu bạn viết bài điểm tin thời sự nóng hổi và muốn Google nhận diện là NewsArticle, chỉ cần gắn thêm nhãn (Label) có tên chính xác là News cho bài viết đó.
<!--[ Nhóm câu hỏi thường gặp Accordion (FAQ) ]-->
<div class='showH'>
<details class='ac'>
<summary>Câu hỏi thứ nhất viết tại đây?</summary>
<div>
<p>Câu trả lời chi tiết cho câu hỏi thứ nhất.</p>
</div>
</details>
<details class='ac alt'>
<summary>Câu hỏi thứ hai (kiểu viền thay thế alt)?</summary>
<div>
<p>Câu trả lời chi tiết cho câu hỏi thứ hai.</p>
</div>
</details>
</div>
<!--[ Khung Bài viết liên quan tự động theo Nhãn (Label) ]-->
<details class='sp arp' open>
<summary data-show='Hiện tất cả' data-hide='Ẩn tất cả'>Bài viết cùng chủ đề</summary>
<div class='aRel' data-label='blogger' data-max-results='6'></div>
</details>Lời kết
Ngồi gõ xong trọn bộ cẩm nang hướng dẫn viết bài trên template Plus UI v3.3 này cho anh em thì đồng hồ trên góc màn hình máy tính cũng điểm sang gần nửa đêm rồi, ngoài trời gió mùa đông bắc vẫn thổi rào rạt qua mấy tán cây dọc đường Quán Thánh nghe lành lạnh mà lòng lại thấy vui vì hoàn thành xong một bài viết tâm huyết bằng chính trải nghiệm thực tế của bản thân. Giữa thời buổi nhiều người lười suy nghĩ cứ quăng đại vài chữ vào công cụ tự động cho ra mấy bài viết rỗng tuếch chưa đầy 30 giây, việc anh em mình vẫn kiên trì ngồi chăm chút từng thẻ <p>, từng khung code, từng cái bảng dữ liệu trong chế độ HTML thế này chính là thứ tạo nên chất riêng không thể trộn lẫn của dân chơi Blogspot chân chính.
Đừng quên nhấn vào chiếc chuông màu xanh dưới góc phải màn hình để nhận thông báo mới nhất từ Tôi Share nhé. Nếu anh em áp dụng bộ code nào trong bài mà bị vướng hay lệch giao diện thì cứ để lại bình luận ngay phía dưới, sáng mai đi học về mình sẽ vào hỗ trợ giải đáp tận tình cho anh em!
Cảm ơn bạn đã đến đây, cảm ơn bạn đã đọc bài viết này. Nhớ theo dõi và ủng hộ Tôi Share nhé. Chúc bạn luôn mạnh khỏe, giữ ấm cơ thể để tận hưởng trọn vẹn những ngày gió mùa đông bắc cuối năm nay! (update 21:20 PM - 07/11/2026)
Bài viết liên quan
Copyright © Tôi Share
