Cách tạo Menu ngang cho blogger

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:

<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 etc bằng các địa chỉ  Page Links/URL và thay thế  Menu1, Menu2, Menu3 etc bằng Tên các Labelhoặ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:

<li><a href="http://www.vnblognet.com/search/label/Post" >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>

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

<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://www.vnblognet.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/AVvXsEh92ICct41mAYcKVELb7ZG8u6pEqSKuN8CYTAbm_PpuMLqlW4euxTMFqAbqWFJduwdVzDSvq3gWWyNFZlQb2dJRiCUNatO05Xt_KqYz5esXSH9hC2Q0ib2mcEKSRleVM-N4UuC9XAW1JCk/?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/AVvXsEgpYp3VsdU1DDXxYKdRp9rlbUuY_TWbnDLFsB6FGSOBOHrMRDBy2uuKpdVVs0UWUf66DoiIQ2ZfXWggbHz1bixXRQe64BRZRH0W3ZLdMg7JYen5ho3R5p-_nclGgtkU5TxHZ35D-cc9vhc/?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/AVvXsEhs22LU0Pv8DaRrOPI_Wtf6EdpxQh_VhfbX9VgXWX6PQGQ7XaAVBrbxuTL7MhohczMjJba219qcVDWV1fWEQckN03_Qh6G5BgTa4QSYELGHgUab50HOZQroCCUE99TOIltcMmpDBZB1hIBo/?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/AVvXsEiFU4oe0MId7eDXNhjRyjaKkO9tEGyQrdZ7aQdSkqgOAHcovSJ2mt4086G-FP1dP-7nGrlBkNWNH8VsFnFUZYPoq7ejdI5D7Qj745CUkgvJHsb0AeJG9UEJgLzeTkVanN_SIrkjAeedaCK9/?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/AVvXsEidx1IJ0q2JSfayrrN8PXRmYw56pW_661FAwhT4MsT0gr4VyfLHoE8hy7vLSM_fMIUUPXZ_ebmoeSTJzkssFt9sNopevBLcsj5NhsX-or0q3dRHUIZ9Z8uSHR3jh_3FtOMta6y6ctSWKeI/?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/AVvXsEgIW6SNQwNJIIX3iNEVQhIiaYQ3Gr63FnHTnQPGYn6jAp2u8A4UQr1JkGsLImMk9dyuhCIKatWX-wQP8pIBqtGj_lfUtnS2Zdu-n4HHAnFmb4acsw-S7PiJiuGu9mtAyav6UFnw27-Ldvs/?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/AVvXsEghUXX3QDJQHFN__ono7ZpKthNAIuBwaDDD_cZcgcGXu9FtAfyE9n5nhBpqDPVAd6RhopFMXlY06RlOhV7I3mVV1DB4jSlYj42d640tlHPFxPeAeVgI96WIuyhzjuW8cGdBKGdfpMWHqto/?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/AVvXsEi7XjjtGCfuhdNfgPqO7cix5GqPcU47leFN37B9LZK4Kgi8kCfVPJ4n_bB008Rt6gGJd0lWkTzFhOG-3ft7fg0FQT9_-gpViUzIDVxC1RKWpsObVxxqVNL9Q1f4B80r6cEDJd5UPdZJB5w/?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/AVvXsEhq6sVU-J3f725bBtoe16ls5ul1hu4UHe-_OAvKTMSXSolmQbYywnuENF_gIq7yGBdWPOdlHd8Usswb4_5U1DtPok8PYDsYBBjP5MfQ8bdB5Spwpw-XWe-aRteuc9GJRezJ9NoPPiBR9xXS/?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/AVvXsEivREkyo3CRGgiOyNQMJAAuAOBkfrbZliuQfwiR8T_-70eA8evfUnEzcayGDHnXk74YR8R43ppbcBh1PSup0U-aJVcecRBWQpRpl2WQV0kDwzeL1PazPDfBtGY3jZzPlselbD2xEfw8_QM/?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/AVvXsEiUg0HcwJFeeTlTeh-ThiJzv6aXcDLMVysr9IdHWiQPCWUsMPOfOIPSMWDK_cBQ8t8twxQQdL766m9mU-lpSvSlVUitLQF1k77G4v9YcTrc3W5dmXs1QsOYHR0bWbBlS7QEiSsmfHGtNic/?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/AVvXsEgPKBDa77yuUWs2pnTa3fUFx52D903tFHrY0rs0J_eOpjP004jZhrTCnXiNP8PxJpgfC2YgOTl_p93Cwc6MLFAEQYJMg2hjo9fclrtuBAdzj9tgHxD4-vK-YaKlpWb0cdW02yJmNilydMo/?imgmax=800" style="cursor: pointer;margin-right:10px" width="20" /></a> </div>
</div>
</div>
</div>
</div>
</div>
</div>