Một điều hướng tốt và rõ ràng là rất quan trọng đối với sự phổ biến của blog và Seo. Một blog có điều hướng rõ ràng có lưu lượng truy cập nhiều hơn so với blog có điều hướng không rõ ràng bởi vì khách truy cập truy cập blog cho nội dung mong muốn không thể tìm thấy nó. Điều hướng không chỉ là việc có các danh mục cho nội dung hoặc có sơ đồ trang web mà một menu cũng đóng một vai trò quan trọng trong điều hướng của blog. vì blogger không cung cấp bất kỳ tùy chọn nào để thêm một menu trực tiếp như wordpress và các trang web khác do đó blogger phải thêm nó từ các trang web khác. Chúng tôi có thể tìm thấy một số trang web trên internet cung cấp các menu miễn phí nhưng hầu hết các menu này không hoạt động trong blogger hoặc rất khó sử dụng đặc biệt cho người mới bắt đầu, rất khó để thêm menu trong blogger.
Menu này có thiết kế thanh lịch, đáp ứng và phong cách, nó hoạt động trên Css nhưng hoạt động trượt / nổi của nó bằng jquery. Nó được trang trí bởi Css nhưng để tạo hiệu ứng nổi tôi đã thêm một mã jquery. Bạn có thể tạo hiệu ứng trượt / nổi trong bất kỳ tiện ích nào bằng cách sử dụng cùng một tập lệnh bằng cách đọc một bài đăng về cách làm cho thanh bên nổi trong blogger, ở đây tôi đã chỉ ra cách làm cho thanh bên nổi trong blogger và cả cách làm cho bất kỳ tiện ích nào nổi trong blogger.
Cách thêm menu nổi trong blogger:
Để thêm menu này vào blog của bạn, hãy làm theo các bước dưới đây nhưng trước đó thay đổi thiết kế bố cục của blog vì bạn có thể thấy menu thả xuống của menu này ở bên phải do đó bạn phải thêm menu bên trái blog của mình. Tôi đã chia sẻ một bài đăng gần đây, trong đó tôi đã chỉ ra cách thay đổi thiết kế bố cục trong blogger, đọc bài đăng đó ở đây và thay đổi thiết kế bố cục của blog của bạn sau đó làm theo các bước dưới đây để thêm nó vào blog của bạn làm cho nó nổi. Nếu bạn đã có không gian để thêm tiện ích ở bên trái blog của mình thì chỉ cần làm theo các bước dưới đây và bạn đã hoàn thành:
Bước 1: Chuyển đến bảng điều khiển blogger.
Bước 2: Nhấp vào bố trí trong menu bên trái.
Bước 3: Nhấp vào thêm tiện ích, đảm bảo thêm tiện ích ở bên trái blog của bạn nếu bạn không có không gian để thêm tiện ích ở bên trái blog của mình, sau đó theo dõi bài đăng này để tạo khoảng trống cho tiện ích ở bên trái thay đổi phong cách bố trí blog của bạn.
Bước 4: Khi bạn nhấp vào thêm một tiện ích, một cửa sổ nhỏ sẽ được mở, cuộn nó xuống và nhấp vào Html / javascript.
Bước 5: Sao chép mã dưới đây và dán mã vào winodow Html / javascript:
<div id='cssmenu'>Bước 6: Nhấp vào lưu và chuyển sang bước 7.
<ul>
<li><a href='#'><span>Home</span></a></li>
<li class='active has-sub'><a href='#'><span>Products</span></a>
<ul>
<li class='has-sub'><a href='#'><span>Product 1</span></a>
<ul>
<li><a href='#'><span>Sub Product</span></a></li>
<li class='last'><a href='#'><span>Sub Product</span></a></li>
</ul>
</li>
<li class='has-sub'><a href='#'><span>Product 2</span></a>
<ul>
<li><a href='#'><span>Sub Product</span></a></li>
<li class='last'><a href='#'><span>Sub Product</span></a></li>
</ul>
</li>
</ul>
</li>
<li><a href='#'><span>About</span></a></li>
<li class='last'><a href='#'><span>Contact</span></a></li>
<li><a href='#'><span>Sitemap</span></a></li>
</ul>
</div>
Bước 7: Chọn mẫu trong menu và nhấp vào Chỉnh sửa Html.
Bước 8: Nhấp vào bất cứ nơi nào trong mã Html và tìm kiếm]]> </ b: skin> bằng cách sử dụng Ctrl + F trên bàn phím của bạn.
Bước 9: Sao chép mã bên dưới và dán nó ngay phía trên]]> </ b: skin>:
@charset "UTF-8";Bước 10: Bây giờ tìm kiếm <head> và ngay bên dưới nó dán mã bên dưới:
/* Some stylesheet reset */
#cssmenu > ul {
list-style: none;
margin: 0;
padding: 0;
vertical-align: baseline;
line-height: 1;
}
/* The container */
#cssmenu > ul {
display: block;
position: relative;
width: 150px;
/* The list elements which contain the links */
}
#cssmenu > ul li {
display: block;
position: relative;
margin: 0;
padding: 0;
width: 100%;
}
/* General link styling */
#cssmenu > ul li a {
/* Layout */
display: block;
position: relative;
margin: 0;
border-top: 1px dotted #3a3a3a;
border-bottom: 1px dotted #1b1b1b;
padding: 11px 20px;
/* Typography */
font-family: Helvetica, Arial, sans-serif;
color: #d8d8d8;
text-decoration: none;
text-transform: uppercase;
text-shadow: 0 1px 1px #000;
font-size: 13px;
font-weight: 300;
/* Background & effects */
background: #282828;
}
/* Rounded corners for the first link of the menu/submenus */
#cssmenu > ul li:first-child > a {
border-top-left-radius: 4px;
border-top-right-radius: 4px;
border-top: 0;
}
/* Rounded corners for the last link of the menu/submenus */
#cssmenu > ul li:last-child > a {
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
border-bottom: 0;
}
/* The hover state of the menu/submenu links */
#cssmenu > ul li > a:hover,
#cssmenu > ul li:hover > a {
color: #ffffff;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
background: #54cdf1;
background: -webkit-linear-gradient(#72d4f2, #54cdf1);
background: -moz-linear-gradient(#72d4f2, #54cdf1);
background: linear-gradient(#72d4f2, #54cdf1);
border-color: transparent;
}
/* The arrow indicating a submenu */
#cssmenu > ul .has-sub > a::after {
content: "";
position: absolute;
top: 16px;
right: 10px;
width: 0px;
height: 0px;
/* Creating the arrow using borders */
border: 4px solid transparent;
border-left: 4px solid #d8d8d8;
}
/* The same arrow, but with a darker color, to create the shadow effect */
#cssmenu > ul .has-sub > a::before {
content: "";
position: absolute;
top: 17px;
right: 10px;
width: 0px;
height: 0px;
/* Creating the arrow using borders */
border: 4px solid transparent;
border-left: 4px solid #000;
}
/* Changing the color of the arrow on hover */
#cssmenu > ul li > a:hover::after,
#cssmenu > ul li:hover > a::after {
border-left: 4px solid #ffffff;
}
#cssmenu > ul li > a:hover::before,
#cssmenu > ul li:hover > a::before {
border-left: 4px solid rgba(0, 0, 0, 0.3);
}
/* THE SUBMENUS */
#cssmenu > ul ul {
position: absolute;
left: 100%;
top: -9999px;
padding-left: 5px;
opacity: 0;
width: 140px;
/* The fade effect, created using an opacity transition */
-webkit-transition: opacity 0.3s ease-in;
-moz-transition: opacity 0.3s ease-in;
transition: opacity 0.3s ease-in;
}
/* Showing the submenu when the user is hovering the parent link */
#cssmenu > ul li:hover > ul {
top: 0px;
opacity: 1;
}
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2'></script>
<script type="text/javascript">
$(function() {
var offset = $("#cssmenu").offset();
var topPadding = 0;
$(window).scroll(function() {
if ($(window).scrollTop() > offset.top) {
$("#cssmenu").stop().animate({
marginTop: $(window).scrollTop() - offset.top + topPadding
});
} else {
$("#cssmenu").stop().animate({
marginTop: 0
});
};
});
});
</script>
Bước 11: Nhấp vào lưu mẫu và bạn đã hoàn tất, hãy mở blog của bạn để xem menu nổi.
Tùy chỉnh:
Tất cả các thay đổi bạn có thể thực hiện trong menu này là thêm hoặc xóa nút và đặt liên kết blog của bạn vào các nút, vì vậy hãy đọc bên dưới để tìm hiểu cách thêm hoặc xóa nút và thêm liên kết trong menu này
Thay thế băm màu đen (#) trong mã được sử dụng trong Bước 5 bằng các liên kết. Ví dụ: nếu bạn muốn thêm liên kết trang chủ của blog của mình, thay thế # bằng liên kết trang chủ trong mã được sử dụng ở bước 5, mã tổng thể sẽ trông giống như mã bên dưới:
<li> <a href='http://www.abc.blogspot.com'> <span> Trang chủ </ span> </a> </ li>Để thay đổi tên của một nút hiện có, thay thế văn bản của nút bằng tên mà bạn muốn. Giả sử bạn muốn thay thế Trang chủ bằng Trang chủ ngay bây giờ, tất cả những gì bạn phải làm là xóa Trang chủ và nhập Trang chủ thay vì Trang chủ, mã chung sẽ như sau:
<li> <a href='http://www.abc.blogspot.com'> <span> Trang chủ </ span> </a> </ li>Để thêm một nút mới trong menu, bạn phải thêm đoạn mã bên dưới sau nút mà bạn muốn nút đó tồn tại. Ví dụ: bạn muốn thêm một nút mới có tên Nút mới sau nút Home bây giờ bạn phải dán bên dưới đoạn mã bên dưới mã của nút Home:
<li> <a href='#'> <span> Nút mới </ span> </a> </ li>
<div id='cssmenu'>Để thêm nút thả xuống có các nút phụ, bạn phải thêm đoạn mã bên dưới vào mã được sử dụng trong bước 5:
<ul>
<li><a href='#'><span>Home</span></a></li>
<li><a href='#'><span>New button</span></a></li>
<li class='active has-sub'><a href='#'><span>Products</span></a>
<ul>
<li class='has-sub'><a href='#'><span>Product 1</span></a>
<ul>
<li><a href='#'><span>Sub Product</span></a></li>
<li class='last'><a href='#'><span>Sub Product</span></a></li>
</ul>
</li>
<li class='has-sub'><a href='#'><span>Product 2</span></a>
<ul>
<li><a href='#'><span>Sub Product</span></a></li>
<li class='last'><a href='#'><span>Sub Product</span></a></li>
</ul>
</li>
</ul>
</li>
<li><a href='#'><span>About</span></a></li>
<li class='last'><a href='#'><span>Contact</span></a></li>
<li><a href='#'><span>Sitemap</span></a></li>
</ul>
</div>
<li class='active has-sub'><a href='#'><span>Products</span></a>Đoạn mã trên có các nút thả xuống và các nút này hiện cũng có các nút thả xuống nếu bạn chỉ muốn các nút thả xuống (thả xuống một lần) nói rằng bạn muốn có một nút có tên Giới thiệu và các nút của nó Công ty, Tác giả và blog sau đó bạn chỉ phải thêm đoạn mã bên dưới:
<ul>
<li class='has-sub'><a href='#'><span>Product 1</span></a>
<ul>
<li><a href='#'><span>Sub Product</span></a></li>
<li class='last'><a href='#'><span>Sub Product</span></a></li>
</ul>
</li>
<li class='has-sub'><a href='#'><span>Product 2</span></a>
<ul>
<li><a href='#'><span>Sub Product</span></a></li>
<li class='last'><a href='#'><span>Sub Product</span></a></li>
</ul>
</li>
<li class='has-sub'><a href='#'><span>About</span></a>
<ul>
<li><a href='#'><span>Company</span></a></li>
<li><a href='#'><span>Author</span></a></li>
<li class='last'><a href='#'><span>Blog</span></a></li>
</ul>
</li>
Nếu bạn muốn thêm một nút có thả xuống và thả xuống đó cũng có một nút thả xuống thì bạn phải dán đoạn mã bên dưới:
<li class='active has-sub'><a href='#'><span>Dropdown</span></a>
<ul>
<li class='has-sub'><a href='#'><span>Dropdown 1</span></a>
<ul>
<li><a href='#'><span>Sub-dropdown 1</span></a></li>
<li class='last'><a href='#'><span>Sub-dropdown 2</span></a></li>
</ul>
</li>
</ul>
Bằng cách thêm đoạn mã ở trên, bạn đang thêm một nút có trình đơn thả xuống có tên là Dropdown 1, cũng có 2 trình đơn thả xuống có tên là Sub-dropdown 1 và Sub-dropdown 2.
Để xóa / xóa một nút hiện có, bạn phải xóa mã của nó. Ví dụ: nếu bạn muốn xóa một nút như Home bây giờ, bạn phải xóa đoạn mã bên dưới khỏi mã được sử dụng trong bước 5 ở trên:
<li> <a href='#'> <span> Trang chủ </ span> </a> </ li>
Tương tự để xóa nút Giới thiệu, bạn phải xóa <li> <a href='#'> <span> Trang chủ </ span> </a> </ li> khỏi mã được sử dụng trong bước 5.
Nếu bạn muốn xóa một thả xuống, bạn phải xóa mã của nó, ví dụ nếu bạn muốn loại bỏ các nút Sản phẩm phụ bây giờ, bạn phải xóa đoạn mã bên dưới:
Nếu bạn muốn xóa một nút, hãy xóa <li> <a href='#'> <span> Sản phẩm phụ </ span> </a> </ li> nhưng nếu bạn muốn xóa cả hai nút sản phẩm phụ thì bạn có để loại bỏ mã trên. Làm tương tự nếu bạn muốn loại bỏ nút thả xuống như sản phẩm 1 hoặc sản phẩm 2.
Tôi đã giải thích sâu sắc về cách thêm hoặc xóa hoặc thêm liên kết trong các nút hoặc cách thêm hoặc xóa nút thả xuống, nhưng nếu bạn vẫn bối rối hoặc không hiểu hãy hỏi tôi trong các bình luận hoặc liên hệ với tôi.
Tôi hy vọng bạn thích thực đơn này và bài đăng này hữu ích cho bạn, nếu bạn có bất kỳ vấn đề nào liên quan đến bài đăng này, hãy hỏi tôi trong phần bình luận. Cảm ơn bạn đã ghé thăm 101Helper. Nếu bạn thích bài đăng này chia sẻ nó với những người khác, hãy theo dõi và đăng ký để nhận các bản cập nhật mới nhất trong hộp thư đến của bạn. Nếu bạn có bất kỳ đề nghị hoặc ý kiến để lại một bình luận dưới đây.
Thẻ tìm kiếm: Menu blogger, cách thêm menu nổi trong blogger, menu nổi blogger, menu cuộn cho blogger, menu trượt cho blogger, tập lệnh menu nổi cho blogger, tiện ích blogger, hướng dẫn viết blog, menu nổi dọc cho blogger, Trượt từ menu từ trên xuống dưới cho blogger, tiện ích nổi cho blogger, Menu phong cách cho blogger.
