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. Đ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 đó. Bạn có thể xem demo tại trang Hợp âm Guitarhoặc hình minh họa bên dưới.
![[HTML] Tạo liên kết theo bảng chữ cái](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhG2BlSGnwIx6ifroqAB_epmonF2rWv4Q4SFHCz_89y76Lj5lCCjJ_yRz6o11A-RtG9aQNXs7eP9jkkZl0NORflu1CW9cQXbZvUxv2y5u3vL5Tcv6R5zFtkcYbIWwCEXcjRs2wQkNGAHZ4/s1600/bang-lien-ket-theo-chu-cai.jpg "[HTML] Tạo liên kết theo bảng chữ cái")
- 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 ý.
0 nhận xét:
Đăng nhận xét