Làm thế nào để Thêm Top Navigation menu (Bar) Blogger (blogspot)

Làm thế nào để Thêm Top Navigation menu (Bar) Blogger (blogspot)

Rất nhiều blogger hỏi tôi về việc làm thế nào để thêm thanh điều hướng cho một mẫu blogger, 
Và thông qua hướng dẫn này, bạn sẽ biết làm thế nào để thêm một menu điều hướng cho blogger mẫu.
đó là nhiệm vụ rất dễ dàng, vì vậy chúng ta hãy làm điều đó.
1. Thêm Css Để mẫu của bạn
Bảng điều khiển Blogger của bạn, Layout>> Edit HTML>>
Và tìm Mã này
 </ B: skin> 
Và trước khi thêm mã tiếp theo.
 / * URL: http://www.AllBlogTools.com/ * /



. Basictab {

padding: 3px 0;

margin-left: 0;

font: đậm 12px Verdana;

biên giới-bottom: 1px rắn màu xám;

danh sách-style-type: none;

text-align: left; / * thiết lập bên trái, trung tâm, hoặc phải để sắp xếp các trình đơn như mong muốn * /

}



Basictab li ... {

hiển thị: nội tuyến;

margin: 0;

}



Basictab li. A {

text-decoration: none;

padding: 3px 7px;

bên phải: 3px;

biên giới: 1px solid màu xám;

biên giới-dưới cùng: không có;

-color: # f6ffd5;

2d2b2b

}



. Basictab li a: visited {

2d2b2b

}



Basictab li a: hover {

-color: # DBFF6C;

màu: đen;

}



Basictab li a: active {

màu: đen;

}



Basictab li.selected một {/ * hiệu ứng tab được chọn * /

vị trí: tương đối;

top: 1px;

padding-top: 4px;

-color: # DBFF6C;

màu: đen;

}

đó là nó, và bây giờ chúng ta hãy thêm menu nó tự mẫu của chúng tôi.
2. Menu mẫu của chúng tôi
Bảng điều khiển Blogger của bạn, Layout>> Page Elements>>
và bây giờ ở trên khu vực bài đăng trên blog, nhấn thêm tiện ích,
Add top navigation menu for blogger template
Và chọn HTML / JavaScript
Để lại danh hiệu trống rỗng, và tại khu vực nội dung, thêm mã này
 <ul class="basictab">

<li class="selected"> <a href="http://www.AllBlogTools.com.com"> Trang chủ </ a> </ li>

<li> <a href="http://www.allblogtools.com/blogger-templates/"> Blogger Templates </ a> </ li>

<li> <a href="http://www.allblogtools.com/blogger-tricks-and-hacks/"> Blogegr thuật </ a> </ li>

<li> <a href="#"> Chỉnh sửa </ a> </ li>

<li> <a href="#"> Chỉnh sửa </ a> </ li>

<li> <a href="#"> Chỉnh sửa </ a> </ li>

<li> <a href="#"> Chỉnh sửa </ a> </ li>

</ Ul>

Nhấp vào Lưu và kiểm tra blog của bạn,
3. Tùy chỉnh đơn của bạn
Bây giờ bạn phải thay đổi các liên kết trình đơn cho các liên kết và các chức danh của bạn, và bạn có thể muốn thay đổi màu sắc đơn.
3,1 Thay đổi Liên kết đơn
Trong bước 2 bạn sẽ tìm thấy điều này từ trong các mã
 <li> <a href="#"> Chỉnh sửa </ a> </ li> 
Sự thay đổi biểu tượng # để liên kết của bạn, và thay đổi Chỉnh sửa tiêu đề của bạn.
bạn có thể lặp lại điều này một phần của mã như bạn muốn,
mỗi khi bạn thêm một phần của mã này một lần nữa để mã thực đơn của bạn, một liên kết mới sẽ được bổ sung vào thực đơn của bạn.
3,2 Thay đổi màu sắc đơn
Để thay đổi màu sắc thực đơn của bạn, bạn phải chỉnh sửa mã css trong bước 1 trước khi bạn thêm nó vào mẫu của bạn. Vì vậy, Sao chép và qua nó trong văn bản tập tin notepad để chỉnh sửa nó ở đó.
Chúng tôi sẽ sử dụng AllBlogTools.com html Generator Mã Colors để chỉnh sửa màu sắc trình đơn.
trong bước một mã tìm mã số này và thay đổi mã màu yêu thích của bạn, bạn có thể lấy mã màu yêu thích của bạn ở đây.
Để thay đổi màu nền chính.
Tìm
 -color: # f6ffd5; 
và thay đổi f6ffd5 màu yêu thích của bạn.
Để thay đổi lựa chọn và di chuột màu nền.
Tìm
 -color: # DBFF6C; 
và thay đổi DBFF6C màu sắc yêu thích của bạn.
Để thay đổi màu sắc văn bản
Tìm
 màu: đen; 
và thay đổi màu đen # xxxxxx và xxxxxx là mã màu mới của bạn
bạn đã làm xong, và bạn đã có mã số riêng tùy chỉnh của bạn, bây giờ sử dụng nó như là chúng tôi sử dụng mã trong bước 1.
Sống Demo
Click vào đây để xem bản demo trình đơn được thêm vào mẫu blogger .
Thưởng thức.

Đăng nhận xét

item