CODE TẠO MENU DỌC THẢ XUỐNG CHO BLOGER

Bước 1: Các bạn chén code bên dưới vào ngay trên thẻ </head> trong mục quản lý html. Các bạn làm theo hình bên dưới :


 Hình 1 : Chọn chỉnh sửa HTML như hình.

Hình 2 : Nhấn Ctrl + F -> /head -> chèn code như hình.

Đoạn code html :

<link href=’https://sites.google.com/site/bloggertricksandtoolz/ddsmoothmenu.css&#8217; rel=’stylesheet’ type=’text/css’/>
<link href=’https://sites.google.com/site/bloggertricksandtoolz/ddsmoothmenu-v.css&#8217; rel=’stylesheet’ type=’text/css’/>
<script src=’http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js&#8217; type=’text/javascript’/>
<script src=’https://sites.google.com/site/bloggertricksandtoolz/ddsmoothmenu.js&#8217; type=’text/javascript’>
/***********************************************
* Smooth Navigational Menu- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
* Bloggerized by Sameera http://www.bloggertricksandtoolz.com/
***********************************************/
</script>
<script type=’text/javascript’>
ddsmoothmenu.init({
mainmenuid: &quot;smoothmenu1&quot;, //menu DIV id
orientation: 'h', //Horizontal or vertical menu: Set to &quot;h&quot; or &quot;v&quot;
classname: 'ddsmoothmenu', //class added to menu's outer DIV
//customtheme: [&quot;#1c5a80&quot;, &quot;#18374a&quot;],
contentsource: &quot;markup&quot; //&quot;markup&quot; or [&quot;container_id&quot;, &quot;path_to_menu_file&quot;]
})
ddsmoothmenu.init({
mainmenuid: &quot;smoothmenu2&quot;, //Menu DIV id
orientation: 'v', //Horizontal or vertical menu: Set to &quot;h&quot; or &quot;v&quot;
classname: 'ddsmoothmenu-v', //class added to menu's outer DIV
//customtheme: [&quot;#804000&quot;, &quot;#482400&quot;],
contentsource: &quot;markup&quot; //&quot;markup&quot; or [&quot;container_id&quot;, &quot;path_to_menu_file&quot;]
})
</script>

Bước 2 : Chèn code menu vào ngay trên thẻ </header>.


Hình 3 : Nhấn Ctrl + F -> /header -> chèn code như hình.

Đoạn code html :

<div class=’ddsmoothmenu’ id=’smoothmenu1′>
<ul>
<li><a href=’http://www.gomsucaocap.blogspot.com’>Home</a></li&gt;
<li><a href=’#’> menu chính 1</a>
<ul>
<li><link a1 ‘>  menu phụ a1</a></li>
<li><a href=’ link a2 ‘> menu phụ a2 </a></li>
</ul>
</li>
<li><a href=’#’> menu chính 2</a>
<ul>
<li><link b1 ‘>  menu phụ b1</a></li>
<li><a href=’ link b2 ‘> menu phụ b2 </a></li>
<li><a href=’ link b3 ‘> menu phụ b3 </a></li>
<li><a href=’ link b4 ‘> menu phụ b4 </a></li>
</ul>
</li>
<li><a href=’#’> menu chính 3</a>
<ul>
<li><link c1 ‘>  menu phụ c1</a></li>
<li><a href=’ link c2 ‘> menu phụ c2 </a></li>
<li><a href=’ link c3 ‘> menu phụ c3 </a></li>
<li><a href=’ link c4 ‘> menu phụ c4 </a></li>
</ul>
</li>
<li><a href=’#’> menu chính 4</a>
<ul>
<li><link d1 ‘>  menu phụ d1</a></li>
<li><a href=’ link d2 ‘> menu phụ d2 </a></li>
<li><a href=’ link d3 ‘> menu phụ d3 </a></li>
<li><a href=’ link d4 ‘> menu phụ d4 </a></li>
</ul>
</li>
<li><a href=’#’> menu chính 5</a>
<ul>
<li><link e1 ‘>  menu phụ e1</a></li>
<ul>
<li><link ee1 ‘>  menu phụ ee1</a></li>
</ul>
<li><a href=’ link e2 ‘> menu phụ e2 </a></li>
<li><a href=’ link e3 ‘> menu phụ e3 </a></li>
<li><a href=’ link e4 ‘> menu phụ e4 </a></li>
</ul>
</li>
</ul>
<br style=’clear: left’/>
</div>

Hướng dẫn :

Ở đoạn code trên, các code có cùng màu tức là có liên quan với nhau, cùng nằm trên 1 cột menu, menu chính tức là menu sẽ hiển thị trên trang chủ, menu phụ tức là khi rê chuột vào menu chính tương ứng sẽ đổ xuống 1 dọc các menu phụ cần chọn.

VD: Menu chính : Tin tức, menu phụ : thuế đường bộ 2012, link = http://gomsucaocap.blogspot.com/. Khi người dùng rê chuột vào cột tin tức sẽ xổ ra các menu phụ, click chọn thuế đường bộ 2012 lập tức trình duyệt chuyển sang đường link đã chọn

Writer : Saler Trung (0976.072.031) – Cửa hàng Sao Mai

Gửi phản hồi

Mời bạn điền thông tin vào ô dưới đây hoặc kích vào một biểu tượng để đăng nhập:

WordPress.com Logo

Bạn đang bình luận bằng tài khoản WordPress.com Log Out / Thay đổi )

Twitter picture

Bạn đang bình luận bằng tài khoản Twitter Log Out / Thay đổi )

Facebook photo

Bạn đang bình luận bằng tài khoản Facebook Log Out / Thay đổi )

Google+ photo

Bạn đang bình luận bằng tài khoản Google+ Log Out / Thay đổi )

Connecting to %s

%d bloggers like this: