Nav menu style

Step 1: Go to Dashboard → Template → Customize → Advanced → Add CSS. Add new style below in Add custom CSS box then click Apply to Blog button.

Vào Mẫu → Tùy chỉnh → Nâng cao → Thêm CSS. Thêm style mới bên dưới vào khung text rồi nhấn vào nút Áp dụng cho Blog.

/* style Nav Menu */ #cssnav { margin: 0px 0 0 -15px; padding: 0px 0px 0px 0px; width: 367px; /* Set your width to fit your blog - Chỉnh bề rộng tại đây*/ font: $(tabs.font); /* Template Designer - Change Font Type, Size, Etc */ color: #008000; /* Template Designer - Change Font Size */ } #cssnav ul { background-image: none; /* Template Designer - Change Menu Background */ height: 20px; /* Change Height of Menu */ list-style: none; margin: 0px; padding: 0px; color: #008000; } #cssnav li { float: left; padding: 0px; color: #008000; } #cssnav li a { background-image: none; /* Template Designer - Change Menu Background */ display: block; margin: 0px; font: #008000; /* Template Designer - Change Font Type, Size, Etc */ text-decoration: none; } #cssnav > ul > li > a { color: #008000; /* Template Designer - Change Font Color */ font-weight: bold; } #cssnav ul ul a { color: #008000; /* Template Designer - Change Color */ } #cssnav li > a:hover, #cssnav ul li:hover { font-weight: normal; color: #0099ff; /* Template Designer - Change Font Color on Hover */ background-color: $(tabs.selected.background.color); /* Template Designer - Change Font Background on Hover */ } #cssnav li ul { background-image: none; /* Template Designer - Change Menu Background */ display: none; height: auto; padding: 0px; margin: 0px; position: absolute; width: 175px; /* Change Width Of DropDown Menu */ z-index:9999; color: #008000; } #cssnav li:hover ul { display: block; } #cssnav li li { background-image: none; /* Template Designer - Change Background */ display: block; color: #008000; float: none; margin: 0px; padding: 0px; width: 175px; /* Change Width Of DropDown Menu */ } #cssnav li:hover li a { background: $(tabs.selected.background.color); /* Template Designer - Change Background of Link on Hover */ } #cssnav li ul a { display: block; height: auto; margin: 0px; padding: 10px; text-align: left; color: #008000; } #cssnav li ul a:hover, #cssnav li ul li:hover > a { color: $(tabs.selected.text.color); /* Template Designer - Change Text Color on Hover */ background-color: $(tabs.selected.background.color); /* Template Designer - Change Background on Hover */ border: 0px; text-decoration: none; } /* End style Nav Menu */

Select code

Step 2: Go to Dashboard → Template → Edit HTML. Press the CTRL + F keys to open the Blogger search box: type <div class='region-inner tabs-inner'> then add after this line the code below.

Vào Mẫu - Chỉnh sửa HTML. Nhấn Ctrl+F tìm dòng: <div class='region-inner tabs-inner'> bỏ vào bên dưới đoạn mã.

<!-- code start nav menu --> <div class='tabs section' id='crosscol'/> <div class='tabs section' id='crosscol-overflow'> <div class='widget HTML' id='HTML4'> <ul id='cssnav'> <li class='active'><a href='http://quocvietposco.blogspot.com/'>Trang chủ</a></li> <li class='sub'><a href='http://quocvietposco.blogspot.com/p/blog-page.html'>Giới thiệu</a></li> <li class='sub'><a href='http://quocvietposco.blogspot.com/p/truyen-cuoi.html'>Truyện cười</a></li> <li><a href='http://quocvietposco.blogspot.com/p/thong-tin.html'>Liên hệ</a> </li> </ul></div></div> <!-- code end nav menu -->

Select code

You just modify your own links from <li class='active'> ... Liên hệ</a>. Click Save Template and View blog to see result.

Đổi lại đường link của bạn từ <li class='active'> ... Liên hệ</a>. Nhấn lưu lại và xem kết quả.