Tạo Menu cho Blogspot

10:00 PM JilinTour.Com 0 Comments

Bứơc1:
Download 2 files dưới:
DDM1_script.js, and
DDM1_style.css

Bước 2:
Upload chúng lên HotLinkFiles.com, và lấy LINK trực tiếp 2 file này từ HotLinkFiles.

Bước 3:
Log in vào Blogger, vào Layout và click chọn "Edit HTML"

Bước 4:
Tìm (CTRL+F) đoạn code:</head>

và Dán trên nó đoạn mã dưới:

    <!--MULTI-LEVEL-DD-MENU-STARTS-->

<link rel="stylesheet" href="http://......HotLinkFiles.com...../DDM1_style.css" type="text/css" />

<script type="text/javascript" src="http://......HotLinkFiles.com...../DDM1_script.js"></script>

<!--MULTI-LEVEL-DD-MENU-http://www.vnpressnet.com-->

Thay thế link màu đỏ bằng LINK trực tiếp mà bạn đã thực hiện ở Bước 2.

Bước 5:
Bạn vào "Layout" -> "Edit HTML" -> "Page Elements" và click vào "Add a Gadget" và chọn kiểu tiện ích "HTML/JavaScript".

Và dán đoạn code dưới vào đó:

<ul class="menunew" id="menu">
<li><a href="#" class="menulink">Dropdown One</a>
<ul>
<li><a href="#">Navigation Item 1</a></li>
<li>
<a href="#" class="sub">Navigation Item 2</a>
<ul>
<li class="topline"><a href="#">Navigation Item 1</a></li>
<li><a href="#">Navigation Item 2</a></li>
<li><a href="#">Navigation Item 3</a></li>
<li><a href="#">Navigation Item 4</a></li>
<li><a href="#">Navigation Item 5</a></li>
</ul>
</li>
<li>
<a href="#" class="sub">Navigation Item 3</a>
<ul>
<li class="topline"><a href="#">Navigation Item 1</a></li>
<li><a href="#">Navigation Item 2</a></li>
<li>
<a href="#" class="sub">Navigation Item 3</a>
<ul>
<li class="topline"><a href="#">Navigation Item 1</a></li>
<li><a href="#">Navigation Item 2</a></li>
<li><a href="#">Navigation Item 3</a></li>
<li><a href="#">Navigation Item 4</a></li>
<li><a href="#">Navigation Item 5</a></li>
<li><a href="#">Navigation Item 6</a></li>
</ul>
</li>
<li><a href="#">Navigation Item 4</a></li>
</ul>
</li>
<li><a href="#">Navigation Item 4</a></li>
<li><a href="#">Navigation Item 5</a></li>
</ul>
</li>
<li><a href="http://www.vnpressnet.com" class="menulink">Blogger Help</a></li>
<li>
<a href="#" class="menulink">Dropdown Two</a>
<ul>
<li><a href="#">Navigation Item 1</a></li>
<li>
<a href="#" class="sub">Navigation Item 2</a>
<ul>
<li class="topline"><a href="#">Navigation Item 1</a></li>
<li><a href="#">Navigation Item 2</a></li>
<li><a href="#">Navigation Item 3</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#" class="menulink">Dropdown Three</a>
<ul>
<li><a href="#">Navigation Item 1</a></li>
<li><a href="#">Navigation Item 2</a></li>
<li><a href="#">Navigation Item 3</a></li>
<li><a href="#">Navigation Item 4</a></li>
<li><a href="#">Navigation Item 5</a></li>
<li>
<a href="#" class="sub">Navigation Item 6</a>
<ul>
<li class="topline"><a href="#">Navigation Item 1</a></li>
<li><a href="#">Navigation Item 2</a></li>
</ul>
</li>
<li><a href="#">Navigation Item 7</a></li>
<li><a href="#">Navigation Item 8</a></li>
<li><a href="#">Navigation Item 9</a></li>
<li><a href="#">Navigation Item 10</a></li>
</ul>
</li>
</ul>
<script type="text/javascript">
var menu=new menu.dd("menu");
menu.init("menu","menuhover");
</script>

Như vậy bạn đã thực hiện được Menu dạng thanh ngang bao gồm các cộc chính sổ xuống các menu phụ cùng nội dung chính như hình minh họa trên. Tất nhiên bạn phải điều chỉnh nội dung các Navigation Item cũng như đường link # trước khi lưu lại công việc đã thưucj hiện.
Tiện ích Menu trên được phattrien@so tham khảo từ: Leigeber và Boggerstop