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.
