Hướng Dẫn Tạo Thanh Menu Ngang Cho Blogspot

 Hướng Dẫn Tạo Thanh Menu Ngang Cho Blogspot

Tạo thanh menu ngang trong Blogger cực kì đơn giản và dễ dàng đến không 

ngờ. Bài này mình sẽ hướng dẫn mọi người thực hiện chỉ trong 2 bước, nhanh 

gọn trong 3 phút. Nào cùng bắt đầu thôi. 


Các thanh Menu trong Blogspot trên thực tế là các nhãn khi bạn thêm vào trong
 bài viết : 

MẸO : Mỗi khi đăng bài hãy thêm nhãn theo kiểu "ten-nhan-cua-bai" . 

Tuyệt đối không thêm theo cách " tên nhãn của bạn " . Vì khi xuất ra url sẽ có

 dạng rất xấu không tốt cho Seo chút nào. Vì vậy hãychắc chắn rằng bạn đã 

 phân loại các bài viết theo nhãn trước khi thức hiện nhé!!

Bước 1 : Tìm và copy url của nhãn

  bạn hãy bấm vào xem bài viết , sau đó kéo xuống cuối trang bấm vào nhãn hiện ở cuối bài : 

Nó sẽ đưa bạn đến url Nhãn của bạn, hãy copy nó và thực hiện bước tiếp theo nhé.

Bước 2 : Tạo thanh ngang Cho Blogger

Bạn vào Trang chủ Blog bạn ➤ Layout ( bố cục ) ➤ Cross - column ( cột chéo) 

➤ thêm một tiên ích ➤ HTML/JavaScript 

Và thêm đoạn code này vào : 

<style>
#000vmenu{height:46px;display:block;overflow:hidden;padding:5px 0;margin-bottom:6px;border:1px solid #A84300;-moz-border-radius:07px; -khtml-border-radius:07px;-moz-border-radius:15px; -khtml-border-radius:15px;box-shadow:0px 0px 15px #A84300;
-webkit-box-shadow:0px 0px 10px #A80010;
-moz-box-shadow: 0px 0px 10px #252525;background:#222 url() left top repeat-x}
#bt4unavmenu .current-cat a{background:#4AA02C url() top left repeat-x;color:#000;-moz-border-radius:15px; -khtml-border-radius:15px;border:1px solid #000}
#bt4unav a,#subMenusContainer a{text-decoration:none;display:block}
#bt4unav a{margin:0;float:left;background:none;padding:15px 15px 15px 15px;color:#000;text-transform:uppercase;font-weight:bold;font-size:12px;border:1px solid #000}
#bt4unav li a:hover,#bt4unav li a:focus,#bt4unav a.mainMenuParentBtnFocused{background:#8eda22 url() top left repeat-x;color:#fff;-moz-border-radius:15px; -khtml-border-radius:15px;border:1px solid #333}
#bt4unav,#bt4unav ul,#bt4unav ol,#subMenusContainer ul,#subMenusContainer ol{padding:0;margin:0;list-style:none;line-height:1em}
#bt4unav ol,#bt4unav ul,#subMenusContainer ul,#subMenusContainer ol{background:none;left:0}
#bt4unav li{cursor:pointer;float:left;margin:0 2px 0 0;padding:0 2px 0 4px;height:44px;display:inline;background:url() left center no-repeat}
#bt4unav li:first-child{background:none;padding:0 2px 0 0}
#bt4unav{width:940px;margin:0 auto;clear:both;overflow:hidden;font-size:12px;display:block}
</style>
<div id='bt4unavmenu'>
<ul id='bt4unav'>
<li class='current-cat'><a href='https://petcute.ml/'>Home</a></li>
<li><a href='https://www.petcute.ml/search/label/SEO/'>SEO</a></li>

<li><a href='https://www.petcute.ml/search/label/khac'>KHÁC</a></li>

</ul>
</div>

• Chú Ý : màu XANH: là url của nhãn mà bạn đã copy ở trên

màuTRẮNG BÊN CẠNH : là tên Menu của bạn tương ứng với mỗi nhãn

•  #4AA02C là mã màu của nút home
• #222 là màu của menu

<li><a href='https://www.petcute.ml/search/label/khac'>KHÁC</a></li>

    chỗ này mọi người muốn thêm bao nhiêu khung menu thì thêm nha , thay đổi địa chỉ và đặt lại tên nhãn là ok

                                Sau đó nhấn Lưu lại là được.

 Bây giờ bạn đã có Menu như ý rồi đấy, ngoài ra còn một cách nữa mình sẽ 

hướng dẫn trong bài sau. Nếu thấy hay bạn hãy để lại một comment cho mình 

có tí động lực nha . Mình up bài này 1h sáng đấy huhu. Chúc các bạn thành 
công !!