Tên tiện ích: Economical-web-space Blogroll
Tính năng: Liệt kê danh sách liên kết blogspot theo dạng menu đóng mở giúp tiết kiệm không gian web, đặt các liên kết blogpsot phân loại theo chủ đề
Ưu điểm: Dễ cài đặt, dễ tùy biến, gọn nhẹ, load nhanh, dễ quản lý các nhóm liên kết
Yêu cầu: CSS, Javascript, HTML
Người thực hiện: Huỳnh Nhật Hà
Đối tượng sử dụng: người dùng Blogger.

Demo.

Hướng dẫn cài đặt:

Bước 1. Đăng nhập Blogger >> Design >> Edit HTML. Đặt code CSS vào trước thẻ ]]></b:skin>.

#downmenu{padding-left:3px}
#downmenu ul li {list-style: disc url(…/iconslist.gif) inside; vertical-align: top; padding-left: 20px;margin: 0;}
#downmenu ul li:hover {list-style: disc url(…/iconslisthover.png) inside; vertical-align: top;padding-left: 20px;margin: 0;}
a.levelmenu{line-height:20px;color:#111;background:url(…/vista.gif) left center;background-repeat:no-repeat;padding-left:10px;font-weight:normal;font-size:110%}
a.levelmenu:hover{line-height:20px;color:#111;background:url(…/plus.png) left center;background-repeat:no-repeat;padding-left:47px;z-index:100;font-weight:normal;font-size:110%}

Tải các file ảnh bên dưới về rồi upload lên Blogspot của bạn, lấy URL rồi đặt đúng thứ tự vào cấu trúc CSS ở trên. Sau đó lưu Template.

iconlist
iconlisthover
vista
plus

Bước 2. Vào Page Elements. Thêm một tiện ích HTML/Javascript và đặt đoạn code bên dưới vào phần nội dung tiện ích.

<script type="text/javascript">
var desplegable = 0

function menudesplegable(id)
{
if (desplegable != 0 && desplegable != id) document.getElementById(desplegable).style.display = 'none'
if (document.getElementById(id).style.display == 'none')
document.getElementById(id).style.display = 'block'
else
document.getElementById(id).style.display = 'none'
desplegable = id
}
</script>
<div id="downmenu" style=" width: 100%;">
<a href="#" class="levelmenu" onclick="menudesplegable('topic1');return false">Chủ đề 1:</a><br />
<ul id="topic1" style="display:block">
<li><a href="#" target="_blank">Topic1 Text Link 1</a></li>
<li><a href="#" target="_blank"> Topic1 Text Link 2</a></li>
</ul>

<a href="#" class="levelmenu" onclick="menudesplegable('topic2');return false">Chủ đề 2:</a><br />
<ul id="topic2" style="display:block">
<li><a href="#" target="_blank"> Topic2 Text Link 1</a></li>
<li><a href="#" target="_blank"> Topic2 Text Link 2</a></li>
</ul>

<a href="#" class="levelmenu" onclick="menudesplegable('topic3');return false">Chủ đề 3:</a><br />
<ul id="topic3" style="display:block">
<li><a href="#" target="_blank"> Topic3 Text Link 1</a></li>
<li><a href="#" target="_blank"> Topic3 Text Link 2</a></li>
</ul>

<a href="#" class="levelmenu" onclick="menudesplegable('topic4');return false">Chủ đề 4:</a><br />

<ul id="topic4" style="display:none">
<li><a href="#" target="_blank"> Topic4 Text Link 1</a></li>
<li><a href="#" target="_blank"> Topic4 Text Link 2</a></li>
<li><a href="#" target="_blank"> Topic4 Text Link 3</a></li>
<li><a href="#" target="_blank"> Topic4 Text Link 4</a></li>
</ul>

</div>

Công việc của bạn là liệt kê các liên kết blogspot của bạn rồi phân loại theo chủ đề để dễ quản lý, sau đó tùy biến theo cấu trúc HTML ở trên sao cho phù hợp.