Tiện ích Blogroll tiết kiệm không gian web

Tiện ích Blogroll đối với blogspot dùng để liệt kê danh sách các liên kết blogspot, đó là một phần trong việc trao đổi liên kết giúp kết nối cộng đồng blogspot đồng thời tăng lượng truy cập cho blogspot của bạn. Blogger vốn đã có sẵn tiện ích này nhưng ở dạng cơ bản. Qua bài viết này mình giới thiệu một kiểu Blogroll 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ủ đề, như bạn có thể thấy trên phần sidebar của Bloggerism vậy. Ưu điểm của tiện ích này là 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, có thể áp dụng cho blogspot, wordpress, nền tảng web khác.

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.