Nếu blog của bạn có chứa một lượng lớn thông tin và bạn quan tâm đến việc phân loại các liên kết của bạn tốt hơn một chút, một trình đơn thả xuống có thể là tấm vé! Kể từ Blogger không cung cấp tùy chọn để tự động thêm một trình đơn thả xuống như WordPress không, chúng ta phải làm của riêng của chúng tôi.
Điều này đòi hỏi một chút về CSS và kiến thức về HTML, nhưng tôi sẽ hướng dẫn bạn thông qua nó để nó dường như không quá khó hiểu. Thực đơn Tôi đã đặt cùng được xây dựng hoàn toàn bằng CSS3 và HTML. Không có Javascript để đối phó với ở đây, vì vậy nó là tốt đẹp và trọng lượng nhẹ và dễ dàng để cấu hình. Để bắt đầu, bạn sẽ cần phải đầu trên để trang Giao diện trong bảng điều khiển Blogger của bạn và thêm một HTML / Javascript tiện ích trong khu vực trên / tiêu đề:
Thêm mã sau đây để widget mới của bạn, tùy biến các chức danh, liên kết để phù hợp với blog của riêng bạn:
<ul id="icbabdrop"> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li> Topics <ul> <li><a href="#">Lifestyle</a></li> <li><a href="#">Blogging</a></li> <li><a href="#">Art and Design</a></li> </ul> </li> <li><a href="#">Portfolio</a></li> <li><a href="#">Contact</a></li> </ul>
Bạn sẽ cần phải thay thế các ký tự # với các liên kết thực tế của các trang của bạn, và các chức danh đơn của riêng bạn. Mẹo: muốn liên kết đến các trang nhãn / thể loại cụ thể trong Blogger ? Các văn bản nêu trên trong RED cho thấy một tiêu đề menu ( "Chủ đề") với các mặt hàng ba sub-menu xuất hiện khi bạn cuộn qua nó.Để thêm các mục trình đơn bổ sung với sub-menu, bạn có thể sao chép các phần màu đỏ của các mã và dán một bản sao trước khi hoặc sau khi bất kỳ <li> hoặc </ li> Mã, như vậy:
<ul id="icbabdrop"> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li> Topics <ul> <li><a href="#">Lifestyle</a></li> <li><a href="#">Blogging</a></li> <li><a href="#">Art and Design</a></li> </ul> </li> <li> Topics 2 <ul> <li><a href="#">Lifestyle 2</a></li> <li><a href="#">Blogging 2</a></li> <li><a href="#">Art and Design 2</a></li> </ul> </li> <li><a href="#">Portfolio</a></li> <li><a href="#">Contact</a></li> </ul>
Bây giờ, bạn sẽ muốn bật trên để các Template> Tùy chỉnh trang của Blogger và cuộn xuống để nâng cao> CSS. Thêm mã sau đây để cung cấp cho đơn rằng một số phong cách:
/* DROPDOWN MENU BY icanbuildablog.com */
.tabs-inner .widget ul#icbabdrop {
text-align: left;
display: inline;
margin: 0;
padding: 15px 4px 17px 0;
list-style: none;
border:none;
}
.tabs-inner .widget ul#icbabdrop li {
font-size: 12px/18px;
font-family: sans-serif; /* Font for the menu */
display: inline-block;
margin-right: -4px;
position: relative;
padding: 15px 20px;
background: #fff; /* background colour of the main menu */
float:none;
cursor: pointer;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
}
.tabs-inner .widget ul#icbabdrop li a {
padding:0;
font-family: sans-serif; /* Font for the menu links */
border:0;
}
.tabs-inner .widget ul#icbabdrop li:hover {
background: #555; /* background colour when you roll over a menu title */
color: #fff; /* font colour when you roll over a menu title */
}
.tabs-inner .widget ul#icbabdrop li:hover a {
background: transparent;
color: #fff; /* font colour when you roll over a menu title link */
}
.tabs-inner .widget ul#icbabdrop li ul {
z-index:1000;
border:none;
padding: 0;
position: absolute;
top: 45px;
left: 30px;
float:none;
width: 150px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
display: none;
opacity: 0;
visibility: hidden;
-webkit-transiton: opacity 0.2s;
-moz-transition: opacity 0.2s;
-ms-transition: opacity 0.2s;
-o-transition: opacity 0.2s;
-transition: opacity 0.2s;
}
.tabs-inner .widget ul#icbabdrop li ul li {
background: #555; /* background colour of the sub menu items */
display: block;
color: #fff; /* font colour of the sub menu items */
text-shadow: 0 -1px 0 #000;
}
ul#icbabdrop li ul li a{
color:#fff /* link colour of the sub menu items */
}
.tabs-inner .widget ul#icbabdrop li ul li:hover {
background: #666; /* background colour when you roll over sub menu items */
}
.tabs-inner .widget ul#icbabdrop li:hover ul {
display: block;
opacity: 1;
visibility: visible;
}
Bạn có thể thay đổi màu sắc và phông chữ bất cứ nơi nào tôi đã đặt các ý kiến trong các mã. Nếu bạn muốn tập trung thực đơn của bạn như trong bản demo , chỉ cần thêm: <center> trước khi mã HTML của bạn trong các tiện ích bạn thêm vào, và </ center> ở phần cuối của nó.
No comments:
Post a Comment