Tạo liên kết Labels theo bảng chữ cái (Blogger)

July 23, 2012
Dưới đây là đoạn mã HTML dùng để tạo widget liên kết labels cho Blogger (blogspot) dạng bảng chữ cái.
[HTML] Tạo liên kết theo bảng chữ cái
Đoạn mã này rất phù hợp trong việc liệt kê danh sách bài viết theo chữ cái cho những blog phát triển dạng thư viện (lời bài hát, bài hát, ca sĩ, truyện,...). Khi click vào chữ cái bất kỳ trong bảng liên kết thì sẽ hiện ra danh sách những bài viết có ký tự đầu tiên trong tựa đề là chữ cái đó.
Hướng dẫn:
- Dựa vào chữ cái đầu tiên của tựa đề bài viết để tạo Nhãn (labels)
VD: Bài viết "Tạo liên kết theo bảng chữ cái" thì labels là chữ "T"
- Cách tạo Wedget: Bạn vào Bảng điều khiển, chọn Thiết kế, bấm Thêm tiện ích, chọn HTML/Javascript. Dán đoạn mã bên dưới vào.
<center><table border="1" width="95%" id="table1"> <tr> <td align="center"> <a href="http://www.hopamguitar.com/search/label/A?&max-results=10"> <span style="text-decoration: none">A</span></a></td> <td align="center"> <a href="http://www.hopamguitar.com/search/label/B?&max-results=10"> <span style="text-decoration: none">B</span></a></td> <td align="center"> <a href="http://www.hopamguitar.com/search/label/C?&max-results=10"> <span style="text-decoration: none">C</span></a></td> <td align="center"> <a href="http://www.hopamguitar.com/search/label/D?&max-results=10"> <span style="text-decoration: none">D</span></a></td> <td align="center"> <a href="http://www.hopamguitar.com/search/label/Đ?&max-results=10"> <span style="text-decoration: none">Đ</span></a></td> <td align="center"> <a href="http://www.hopamguitar.com/search/label/E?&max-results=10"> <span style="text-decoration: none">E</span></a></td> <td align="center"> <a href="http://www.hopamguitar.com/search/label/F?&max-results=10"> <span style="text-decoration: none">F</span></a></td> <td align="center"> <a href="http://www.hopamguitar.com/search/label/G?&max-results=10"> <span style="text-decoration: none">G</span></a></td> <td align="center"> <a href="http://www.hopamguitar.com/search/label/H?&max-results=10"> <span style="text-decoration: none">H</span></a></td> </tr> <tr> <td align="center"> <a href="http://www.hopamguitar.com/search/label/I?&max-results=10"> <span style="text-decoration: none">I</span></a></td> <td align="center"> <a href="http://www.hopamguitar.com/search/label/J?&max-results=10"> <span style="text-decoration: none">J</span></a></td> <td align="center"> <a href="http://www.hopamguitar.com/search/label/K?&max-results=10"> <span style="text-decoration: none">K</span></a></td> <td align="center"> <a href="http://www.hopamguitar.com/search/label/L?&max-results=10"> <span style="text-decoration: none">L</span></a></td> <td align="center"> <a href="http://www.hopamguitar.com/search/label/M?&max-results=10"> <span style="text-decoration: none">M</span></a></td> <td align="center"> <a href="http://www.hopamguitar.com/search/label/N?&max-results=10"> <span style="text-decoration: none">N</span></a></td> <td align="center"> <a href="http://www.hopamguitar.com/search/label/O?&max-results=10"> <span style="text-decoration: none">O</span></a></td> <td align="center"> <a href="http://www.hopamguitar.com/search/label/P?&max-results=10"> <span style="text-decoration: none">P</span></a></td> <td align="center"> <a href="http://www.hopamguitar.com/search/label/Q?&max-results=10"> <span style="text-decoration: none">Q</span></a></td> </tr> <tr> <td align="center"> <a href="http://www.hopamguitar.com/search/label/R?&max-results=10"> <span style="text-decoration: none">R</span></a></td> <td align="center"> <a href="http://www.hopamguitar.com/search/label/S?&max-results=10"> <span style="text-decoration: none">S</span></a></td> <td align="center"> <a href="http://www.hopamguitar.com/search/label/T?&max-results=10"> <span style="text-decoration: none">T</span></a></td> <td align="center"> <a href="http://www.hopamguitar.com/search/label/U?&max-results=10"> <span style="text-decoration: none">U</span></a></td> <td align="center"> <a href="http://www.hopamguitar.com/search/label/V?&max-results=10"> <span style="text-decoration: none">V</span></a></td> <td align="center"> <a href="http://www.hopamguitar.com/search/label/X?&max-results=10"> <span style="text-decoration: none">X</span></a></td> <td align="center"> <a href="http://www.hopamguitar.com/search/label/Y?&max-results=10"> <span style="text-decoration: none">Y</span></a></td> <td align="center"> <a href="http://www.hopamguitar.com/search/label/Z?&max-results=10"> <span style="text-decoration: none">Z</span></a></td> <td align="center"> <a href="http://www.hopamguitar.com/search/label/0-9?&max-results=10"><span style="text-decoration: none">9</span></a></td> </tr> </table></center>
Lưu ý: Thay tên miền hopamguitar.com thành tên miền của bạn. Giá trị "10" là số bài viết tối đa hiển thị trong 1 trang, bạn có thể thay đổi thành giá trị khác tùy ý.
  1. Anonymous cảm ơn anh đã chia sẽ đoạn mã này nhé. rất ngắn gọn và dễ hiểu/