Cách tạo Menu ngang đẹp tích hợp translate với biểu tượng lá cờ

Thursday, 3 June 2010

Menu trang thethao.zing.vn nhìn rất đẹp với hiệu ứng hover, đây là menu dạng nằm ngang kèm theo hiệu ứng đóng mở menu con khi click chuột (Tab Menu Mouseover) làm nhiều Blogger rất thích sử dụng cho Blog của mình.

Trong phiên bản này do chưa test được hiệu ứng đóng mở menu con khi click chuột (Tab Menu Mouseover) nên vnblognet [dot] com hướng dẫn các bạn thực hiện mene điều hướng đơn giản có đồ họa giống vậy được thay Tab Menu Mouseover bằng tiện ích Translate bằng hình ảnh lá cờ các quốc gia.

Các bước tạo menu điều hướng :

1. Truy cập vào Blogger : Bảng điều khiển (Dashboard) >> Bố cục (Layout) >> Phần tử trang (Page Element) >> Click vào Thêm tiện ích (Add a Gadget).

2. Click chọn tiện ích HTML/JavaScript widget và dán Navigation Menu Code (Code của menu điều hướng) ở phần dưới vào trong khung nội dung của HTML/JavaScript widget .

3. Kéo HTML/JavaScript widget và thả vào vị trí phía dưới Blog Header.

4. Sau khi đã thực hiện xong các bước trên, bạn cần chỉnh lại link liên kết hiển thị trong đoạn mã HTML.

- Thay thế các tiêu đề và đường link của các menu bạn chỉ cần thay đổi các dòng in đậm trọng đoạn code như dưới:

- Thay thế #1, #2, #3 etc bằng các địa chỉ Page Links/URL và thay thế Menu1, Menu2, Menu3 etc bằng Tên các Label hoặc Page. Ví dụ với Các bài viết về Bài viết trong blogger trên vnblognet.com sẽ như sau:

- Nếu cần thêm hay xóa đi các tab (link) bạn chỉ cần thêm hoặc xóa đi đoạn code HTML dưới:

Code của menu điều hướng:

#kmenu
{
    height: 80px;
    background: url(http://thethao.zing.vn/news/images/menu-bg.gif) repeat-x;
}
#kmenu .kmenu-r
{
    height: 80px;
    background: url(http://thethao.zing.vn/news/images/menu-right-bg.gif) no-repeat top right;
}
#kmenu .kmenu-l
{
    height: 80px;
    background: url(http://thethao.zing.vn/news/images/menu-left-bg.gif) no-repeat top left;
}
#kmenu .homepage
{
    padding: 20px 0px 0px 8px;
    width: 78px;
    float: left;
}
#kmenu .homepage a
{
    font-weight: bold;
}
#kmenu .homepage a:hover
{
    color: #f68121;
    text-decoration: none;
}
#kmenu .mnav
{
    width: 854px;
    float: left;
    padding: 17px 0 0 20px;
}
#kmenu .mnav ul.zlstmnav
{
    list-style: none;
    margin: 0px;
    padding: 0px;
    position: relative;
    height: 28px;
}
#kmenu .mnav .zlstmnav li
{
    list-style: none;
    margin: 0px;
    padding: 0px;
    float: left;
}
#kmenu .mnav .zlstmnav li a
{
    float: left;
    display: block;
    color: #fff;
    font-weight: bold;
    text-decoration: none;
    padding: 0 0 0 0px;
    height: 27px;
    line-height: 27px;
    text-align: center;
    cursor: pointer;
    font-family: Arial;
}
#kmenu .mnav .zlstmnav li a span
{
    float: left;
    display: block;
    padding: 0 0px 0 20px;
}
#kmenu .mnav .zlstmnav li a:hover, #kmenu .mnav .zlstmnav li.selected a
{
    margin-top: 1px;
    height: 26px;
    line-height: 26px;
    background: #2e2e2e url(http://thethao.zing.vn/news/images/nav-left-bg.gif) no-repeat top left;
}
#kmenu .mnav .zlstmnav li.first a:hover
{
    background: #2e2e2e url(http://thethao.zing.vn/news/images/nav-left-home.gif) no-repeat top left;
}
#kmenu .mnav .zlstmnav li a:hover span, #kmenu .mnav .zlstmnav li.selected a span
{
    background: url(http://thethao.zing.vn/news/images/nav-right-bg.gif) no-repeat top right;
    padding: 0 20px 0 20px;
}
#kmenu .submenu
{
    padding-left: 10px;
}
#kmenu .submenu li
{
    float: left;
}
#kmenu .submenu li a
{
    color: #fff;
    display: block;
    padding-right: 15px;
}

.translate{
    display:inline;
    float:right;
    margin: 0px 20px 10px 0;
}

.google_translate img {
filter:alpha(opacity=100); -moz-opacity: 1.0; opacity: 1.0; border:0; } .google_translate:hover img { filter:alpha(opacity=30); -moz-opacity: 0.30; opacity: 0.30; border:0; } .google_translatextra:hover img { filter:alpha(opacity=0.30); -moz-opacity: 0.30; opacity: 0.30; border:0; }

</style>

<div id="kmenu">
<div class="kmenu-r">
<div class="kmenu-l">
<div class="homepage"><a href="http://www.vnblognet.com/">Trang chủ</a></div>
<div id="mn1" class="mnav">
<ul class="zlstmnav">

</ul>

<div><b><span class="Apple-style-span" style="color:#FFFFFF;"> Languages:</span></b>

</div>
</div>
</div>
</div>
</div>
</div>

CHÚC CÁC BẠN THÀNH CÔNG !!!

Tags: Breakingnews, Header - Navigation, Khoi tao Blog

Ý kiến bạn đọc [ 23 ]

Tùng Lâm 3 June 2010 21:30

Là menu của Vnblognet đây mà. Chia sẻ luôn hả anh Ch?
Đây là menu đẹp hay...
Thank you for sharing!

Thienthan 3 June 2010 21:35

A chinh cho e tham gia viết bài với !

chinhnd 3 June 2010 21:52

oh, tưởng gì điều đó mình rất sẵn lòng bạn à.

Tùng Lâm 3 June 2010 22:19

Anh Ch send cho Lâm cách hướng dẫn chèn code vào bài viết với. Mấy bài gửi cho anh code nó không hiện ra nên... bó tay.

---Xzip--- 4 June 2010 06:24

Thế là an tâm sữ dụng rồi .hehhe.Để em hỏi bác FD thử có làm được cái submenu cho nó được.Được thì tốt quá

---Xzip--- 4 June 2010 06:25

Ủa mà bác sợ đụng hàng hay sao mà cây menu zing của anh nó "không cánh mà bay " rồi

chinhnd 4 June 2010 07:54

không, do nhìn nó rất không hợp với mẫu mình đang dùng.

---Xzip--- 5 June 2010 06:29

Bác có thể cho em tham gia viết bài cho vnblognet được không ạ

hoàng anh vũ 6 June 2010 07:54

sao mình tạo nó ko giống với hình nhỉ. Dòng "menu" nhảy xuống dưới dòng "trang" chủ rồi, nó ko nằm cùng hàng với nhay

hoàng anh vũ 6 June 2010 07:57

sao lại ko giống với hình trên nhỉ. dòng menu nhay xuống dưới dòng trang chủ rồi! bác chỉ em với!

chinhnd 6 June 2010 09:16

Bạn thử copy code gốc xem thế nào hay do chỉnh sửa tên nav nên bị thế, mình chéck lại code đó không bị vậy bạn à.

hoàng anh vũ 6 June 2010 12:15

cảm ơn bác vì trả lời rất nhanh! nhưng em vẫn ko làm được. thôi! em chuyển sang dạng menu khác cũng được! cảm ơn nhiều!

Khánh Trắng 9 June 2010 13:43

Menu này rất đẹp, Nhưng nếu Chinh test được hiệu ứng đóng mở menu con khi click chuột (Tab Menu Mouseover) và share code cho anh em thì sẽ rất tuyệt vời.
Nếu test được thì Chinh share cho Khánh Trắng theo địa chỉ Email admin@khanhtrangonline.com nhé!
Thanks và chúc một ngày vui vẻ

VnPress@net 10 June 2010 08:56

mình không giỏi và hiện giờ chưa biết về js nên sẽ cố gắng nhiều mới bằng được các cao thủ như fandung nên chắc khó lắm. Dù sao cám ơn khanhtrang nhieu nhé.

Anonymous 14 July 2010 17:06

Nhin co ve dai qua, minh thay o blog tips nao do cung theo cach nay nhung ngan hon rat nhieu

VnPress@net 14 July 2010 17:09

Cái gì ngắn vậy bạn?

khaled 6 October 2010 06:43

Thanks brother for sharing it..very nice woork

Mr.Tùng 14 October 2010 19:39

anh oi on chi giup em cach dien thi tom tat bai viet, trong trung chu,

chinhnd 14 October 2010 19:43

Mr Tung tham khảo bài viết này nhé http://www.vnblognet.com/2009/12/tao-chuc-nang-read-more-oc-tiep-cho.html

xuandat719 26 December 2010 18:35

nếu không dùng tiện ích lá cờ thì phải bỏ những dòng code nào.giúp em nha

MoigioiForex.Com 31 May 2011 08:04

Thích style kiểu này: http://nettuts.s3.amazonaws.com/819_megamenu/demo/index.html nhưng ko convert đc =,=

visit Vietnam 15 October 2011 22:57

bạn cho mình hỏi: Nếu menu1 menu2.... đều bị che phủ bằng màu trắng như vậy.Chỉ khi đưa chuột đến thì các menu này mới hiện ra. Như vay thì quả la bất cập, ko biết ban có thay đổi code gi khong mình nghĩ bạn đã đưa nên cho mọi người xem ròi thì sao lại dùng thu thuật ẩn đi làm gì. mình đang ngiên cứu dân ngoại đạo thoi mong bạn đừng tụ ái nhé.Nếu bạn nhiệt tình thi chi giao giúp mình cảm ơn bạn nhiều nếu được thì chả lời mình vào cuong.dientu.dsc@gmail.com

Phần mềm kế toán 23 April 2012 21:45

Cám ơn bạn!

Cách tạo Menu ngang đẹp tích hợp translate với biểu tượng lá cờ

Ý kiến bạn đọc [ 23 ]

Ý kiến của bạn

TIÊU ĐIỂM

Total Pageviews

VnBlogNet

CƠ QUAN CHÉM GIÓ NHÂN DÂN TỐI CAO

01683 234 xxx hoặc 01665 667 xxx

BAY68.COM