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 : 


tao-thanh-menu-trong-blogger


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 : 

tao-thanh-menu-trong-blogger


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é.

tao-thanh-menu-trong-blogger

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) 
tao-thanh-menu-trong-blogger

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

tao-thanh-menu-trong-blogger

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>

tao-thanh-menu-trong-blogger

  • 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 !!



Tạo thanh menu ngang trong Blogger vỏn vẹn chỉ 2 bước Đơn Giản , có ngay môt Menu đẹp và chuẩn Seo cho web.

Labels: ,

Post a Comment

chào bạn, mình sẽ vui cả ngày nếu bạn để lại cho mình một lời nhận xét, mình sẽ tiếp tục hơn nữa trong tương lai vì vậy hãy truyền cho mình chút sức mạnh nhé. Yêu bạn !!

[facebook] [blogger]

About Me

My photo
Vietnam
Chào mình là Petcute , tên thật là Ngọc Trần , phát triển website từ năm 2018 và mình nhất định sẽ cố gắng hơn nữa trong tương lai vì vậy hãy ủng hộ mình nhé

Author Name

Ngọc Trần

Contact Form

Name

Email *

Message *

Powered by Blogger.