CÁCH TẠO MENU NGANG TÍCH HỢP TRANSLATE VỚI BIỂU TƯỢNG LÁ CỜ

(SN-MS)- 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.

Nếu muốn thay lá cờ thành  hiệu ứng đóng mở menu con khi click chuột (Tab Menu Mouseover) có thể xem TẠI ĐÂY Còn bài này mình 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.

<style type="text/css">
#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://namkna.blogspot.com/">Trang chủ</a></div>
<div id="mn1" class="mnav">
<ul class="zlstmnav">
<li> <a href="#1"><span>Menu1</span></a> </li>
<li> <a href="#2"><span>Menu2</span></a> </li>
<li> <a href="#3"><span>Menu3</span></a> </li>
<li> <a href="#4"><span>Menu4</span></a> </li>
<li> <a href="#5"><span>Menu5</span></a> </li>
<li> <a href="#6"><span>Menu6</span></a> </li>

</ul>
<div class="submenu">
<div class="translate">
<div><b><span class="Apple-style-span"  style="color:#FFFFFF;"> Languages:</span></b>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="English" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=vi%7Cen&hl=en'); return false;"><img alt="English" border="0" align="absbottom" title="English" height="20" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwbB35mu5Fa-SVxIiaDUoJY9aQ4bnaM0-u_xObC2Cj93qu3VYNDFKjsvM8a4c1A1CbTgRiUQx3CN6WCmcMz5jchM-SVsOmghmKoVsvOhlMBOxAC6QgGHN6okwReiRyT7i-VedEPVry4i0/?imgmax=800" style="cursor: pointer;margin-bottom:1px; margin-right:10px " width="20" /></a>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="French" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=vi%7Cfr&hl=en'); return false;"><img alt="French" border="0" align="absbottom" title="French" height="20" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-IYJ_EFLSDENtCx3W99b1mY3d7yultF_Z6lpNL12S437cA8znBw-uQjLt_JczZTxV_3wg37cQqp_O9CkVsJKtVW1ZYEyvdixe0M-R-mi9qKNJD7Ii9HaGNqowi0GHQhfL6PYiySl0-T8/?imgmax=800" style="cursor: pointer;margin-right:10px" width="20" /></a> <a class="google_translate" href="#" target="_blank" rel="nofollow" title="German" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=vi%7Cde&hl=en'); return false;"><img alt="German" border="0" align="absbottom" title="German" height="20" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxNtiruszNNzHHPNRhyvL9FiYz1Zydz75kz4GZh1uZPDOK79OozWmMPZFvCbFaCm4bkwslnR4OUKwWt9FDKPwuKYyzANd4hcSflwSrqV1NoBvr8p-ruX45r4cUtAxRF8lI2LTRbjO9a51y/?imgmax=800" style="cursor: pointer;margin-right:10px" width="20" /></a> <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Spain" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=vi%7Ces&hl=en'); return false;"><img alt="Spain" border="0" align="absbottom" title="Spain" height="20" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1_gtyIydsyL1yjj0K9G1znIQBvwXlHk8shTyf7uZZGI-WHLzUPFuoG1sw5YFNKmXh1kImuEj-JcYdMgFQwVUKA1NH_OrQ1z3gFe9OOJ5856DVb8aVMzSzgmsfBUH18fgTlkXjjHVWr0Y5/?imgmax=800" style="cursor: pointer;margin-right:10px" width="20" /></a> <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Italian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=vi%7Cit&hl=en'); return false;"><img alt="Italian" border="0" align="absbottom" title="Italian" height="20" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhETab4L1wszJGdKW7RiUdMiUgxyyoh_N5O-HOOK7WnF_6-vHq722iAUe56fMY6DUCLO-1KmRFJUFOdPUh3lZFyHKQBOWwgx8gZtiNqEI6Q1aHXXKNM-wXHjUcrIpaEaU3LH-kYLeZ5lDg/?imgmax=800" style="cursor: pointer;margin-right:10px" width="20" /></a> <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Dutch" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=vi%7Cnl&hl=en'); return false;"><img alt="Dutch" border="0" align="absbottom" title="Dutch" height="20" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiA6RWGaImLVNKmn3_uZC60L5EANJUOxNozjHsyNeZZyOo9w8bZ0WVa_DPKsibbXkiTriPkmm2NfTZEz4gT9MYOVNjWZd8WqJm0VDFvR2ejueGfcuVZmNDPDDvOv26oc-TczhYPPLBGnE/?imgmax=800" style="cursor: pointer;margin-right:10px" width="20" /></a> <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Russian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=vi%7Cru&hl=en'); return false;"><img alt="Russian" border="0" align="absbottom" title="Russian" height="20" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1Ls3OgCe9PmFTkdkRL1YdlVbabBMWYIIEEe_nKiYcgsHvqRIf0pfeF9S-3NMYVAJWxruJy3i1KNMMFUHVbtQmqmpXkPuNeUx7Q6fgX3C7ZX8SbjR6gPfYbTbXpExxMUakitRhzqsrh8k/?imgmax=800" style="cursor: pointer;margin-right:10px" width="20" /></a> <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Portuguese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=vi%7Cpt&hl=en'); return false;"><img alt="Portuguese" border="0" align="absbottom" title="Portuguese" height="20" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcezNGlb-Uhnb-43vjMi_oyVs_blX3C51JBGmS_wT73quAMv27cXyNHPJNdHqq4FcqQ8CwN8mxYE25Aum3Mq5iGTbzFkOgQZgektBXXXh6hIlnrHLp4Y3PoCUnXNmpZgDJRRwxCG-bV0c/?imgmax=800" style="cursor: pointer;margin-right:10px" width="20" /></a> <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Japanese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=vi%7Cja&hl=en'); return false;"><img alt="Japanese" border="0" align="absbottom" title="Japanese" height="20" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXevH6hhjj8bLHFXvSgMx5T58iYS2YHkVSc8zCoPcmT_Pqs14HLxZB5bbWPT_qkuD0DDlyddKkyWhKlsPWrel3_HftODXI7bkEnoMKZvfknaoZvy_rsAQQLHKRVL-Gdeb8QStw-g1B1iHY/?imgmax=800" style="cursor: pointer;margin-right:10px" width="20" /></a> <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Korean" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=vi%7Cko&hl=en'); return false;"><img alt="Korean" border="0" align="absbottom" title="Korean" height="20" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihnhuQNTdpnEXVgwv6qpHq-HNV760K7axMPAbgxa3L-e3-AAqgm-C2ZucCqSYhakiZfUAKzf7OsaFt-o-xwckjxsTDjOqJJ80cevj2DaZKzdZGLQoPsz3ASVucaiDoR72ezJxddROBGjw/?imgmax=800" style="cursor: pointer;margin-right:10px" width="20" /></a> <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Arabic" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=vi%7Car&hl=en'); return false;"><img alt="Arabic" border="0" align="absbottom" title="Arabic" height="20" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTNQ4hxl3gmPVG5h3dUIPkjqxXBOa8sUOtjvxyr7NFZJKsI4fvosi3gLHHqxcNafOPLk9P68LEyNdmFwgEka2BOVqemo6N6rPblcp1VdjXCdM-yXwasWmS6pJj3V2d1nl4JwTw2ABDbLY/?imgmax=800" style="cursor: pointer;margin-right:10px" width="20" /></a> <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Chinese Simplified" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=vi%7Czh-CN&hl=en'); return false;"><img alt="Chinese Simplified" border="0" align="absbottom" title="Chinese Simplified" height="20" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaJVyEgpi0p3ZCwSMB97-hdXdvPt_ggC8raJ8MyUwOBEXY6_z1oSGsekXp3jMIL1qry9G2W_FZhO9GvugEclzVwRYjDmKbWWOx_IXHpfFy9hx5AAPUWDd-D8CIWjd9NcVCzkaEzpMU7sU/?imgmax=800" style="cursor: pointer;margin-right:10px" width="20" /></a> </div>
</div>
</div>
</div>
</div>
</div>
</div>

- Các bạn nên Downloand các file ảnh về Upload lên trang của mình sau đó thay vào để phòng link ảnh bên Zing die bạn có thể Downland file ảnh TẠI ĐÂY sau khi download về thay vào tên tương ứng là được
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:

<li> <a href="#1"><span>Menu1</span></a> </li>
<li> <a href="#2"><span>Menu2</span></a> </li>
<li> <a href="#3"><span>Menu3</span></a> </li>
<li> <a href="#4"><span>Menu4</span></a> </li>
<li> <a href="#5"><span>Menu5</span></a> </li>
<li> <a href="#6"><span>Menu6</span></a> </li> 

- Thay thế  #1, #2, #3,...  bằng các địa chỉ  Trang, các Lable hoặc URL bài viết và thay thế  Menu1, Menu2, Menu3,...  bằng Tên các Label hoặc Page. Ví dụ với Các bài viết về Thủ thuật Blog trong blogger trên namkna sẽ như sau:

<li><a href="http://namkna.blogspot.com/search/label/BlogSpot" >Bài viết</a></li>

- 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:

<li> <a href="#"><span>Menu</span></a> </li> 

Chúc thành công;

Theo http://namkna.blogspot.com/2011/05/cach-tao-menu-ngang-tich-hop-translate.html