Lần trước Namkna đã giới thiệu một Menu xổ dọc khá đẹp nhưng lại chưa biết cách áp dụng trên Blogger. Sau khi tìm hiểu thì mình thấy loại menu này bố cục khá phức tạp, hơi khó để viết hướng dẫn nên đã loại bớt một số thành phần và điều chỉnh lại CSS, được kết quả như thế này:
Xem Demo
Đầu tiên, bạn chèn đoạn sau ngay bên dưới thẻ <body> hoặc phía trên <div id='outer-wrapper'>
Lưu lại và kiểm tra kết quả. Do mã CSS của menu khá dài nên Noct đã chuyển chúng vào trong file menu.css để tiện đăng bài, bạn có thể chuyển ngược lại vào phía trên thẻ </b:skin> trong template để chỉnh sửa, và đừng quên xóa dòng màu xanh.
Nếu file die các bạn copy dòng này đặt trước thẻ ]]></b:skin>:
<link href='http://dl.dropbox.com/u/11103024/menu.css' media='screen' rel='stylesheet' type='text/css'/> <b:section id='menu' maxwidgets='1' showaddelement='no'> <b:widget id='HTML91' locked='false' title='Menu' type='HTML'/> </b:section>Đoạn mã trên sẽ tạo một tiện ích Javascript/HTML mới trên blog của bạn, hãy quay lại Phần tử trang rồi tiếp tục chèn vào tiện ích này:
<ul class="menu">
<li class="no_drop"><a href="#">Home</a></li>
<li><a href="#" class="drop">1 Column</a>
<div class="dropdown_1column">
<div class="col_1">
<ul>
<li><a href="#">FreelanceSwitch</a></li>
<li><a href="#">Creattica</a></li>
<li><a href="#">WorkAwesome</a></li>
<li><a href="#">Mac Apps</a></li>
<li><a href="#">Web Apps</a></li>
<li><a href="#">NetTuts</a></li>
<li><a href="#">Design</a></li>
<li><a href="#">Logo</a></li>
<li><a href="#">Flash</a></li>
<li><a href="#">Illustration</a></li>
<li><a href="#">More...</a></li>
</ul>
</div></div></li>
<li><a href="#" class="drop">2 columns</a>
<div class="dropdown_2columns">
<div class="col_1">
<h3>Some Links</h3>
<ul>
<li><a href="#">ThemeForest</a></li>
<li><a href="#">GraphicRiver</a></li>
<li><a href="#">ActiveDen</a></li>
</ul>
</div>
<div class="col_1">
<h3>Useful Links</h3>
<ul>
<li><a href="#">NetTuts</a></li>
<li><a href="#">VectorTuts</a></li>
<li><a href="#">PsdTuts</a></li>
</ul>
</div>
<div class="col_1">
<h3>Other Stuff</h3>
<ul>
<li><a href="#">FreelanceSwitch</a></li>
<li><a href="#">Creattica</a></li>
<li><a href="#">WorkAwesome</a></li>
</ul>
</div>
<div class="col_1">
<h3>Misc</h3>
<ul>
<li><a href="#">Design</a></li>
<li><a href="#">Logo</a></li>
<li><a href="#">Flash</a></li>
</ul>
</div></div></li></ul>
Lưu lại và kiểm tra kết quả. Do mã CSS của menu khá dài nên Noct đã chuyển chúng vào trong file menu.css để tiện đăng bài, bạn có thể chuyển ngược lại vào phía trên thẻ </b:skin> trong template để chỉnh sửa, và đừng quên xóa dòng màu xanh.
Nếu file die các bạn copy dòng này đặt trước thẻ ]]></b:skin>:
#menu h2 {display:none} .menu,.menu h3,.menu a,.menu ul,.menu li { margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; } :focus { outline: 0 } .menu ul,.menu li { font-size:14px; font-family:Arial, Helvetica, sans-serif; line-height:21px; text-align:left; } .menu h3 { font-family:Arial, Helvetica, sans-serif; font-weight:600; font-size:14px; line-height:21px; margin-top:7px; margin-bottom:14px; padding-bottom:7px; text-shadow: 1px 1px 1px #FFFFFF; border-bottom:1px solid #888888; } .menu { list-style:none; width:900px; margin:30px auto 0px auto; height:43px; padding:0px 20px 0px 20px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; background: #830701; border: 1px solid #a40802; border-top: 1px solid #fd190f; background: -moz-linear-gradient(top, #d70b02, #830701); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#d70b02), to(#830701)); } .menu li { float:left; text-align:center; position:relative; padding: 4px 10px 4px 10px; margin-right:30px; margin-top:7px; border:none; -moz-border-radius: 5px; -webkit-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px; } .menu li:hover { z-index:2; background:#F4F4F4; border:1px solid #aaaaaa; padding: 4px 9px 4px 9px; background: -moz-linear-gradient(top, #F4F4F4, #EEEEEE); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F4F4F4), to(#EEEEEE)); -moz-border-radius: 5px 5px 0px 0px; -webkit-border-radius: 5px 5px 0px 0px; -khtml-border-radius: 5px 5px 0px 0px; border-radius: 5px 5px 0px 0px; } .menu li.no_drop:hover { -moz-border-radius: 5px; -webkit-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px; } .menu li a { color: #FFFFFF; outline:0; text-decoration:none; display:block; text-shadow: 1px 1px 1px #000; } .menu li:hover a { color:#161616; text-shadow: none; } .menu li .drop { padding-right:21px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUJliSciVN-MykQvYx3ubnahspmHNT-j_npwgkyS8_WuQ9SQGbZmGiyqRAParT6YNOqsH4JsW0EMyHtc0hwwo9HiWEc8wG4H4Dhn23sYRaKiPmR321K70GiQr7Lpj4EakRSy1iuf_qQMs/) no-repeat right 8px; } .menu li:hover .drop { padding-right:21px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUJliSciVN-MykQvYx3ubnahspmHNT-j_npwgkyS8_WuQ9SQGbZmGiyqRAParT6YNOqsH4JsW0EMyHtc0hwwo9HiWEc8wG4H4Dhn23sYRaKiPmR321K70GiQr7Lpj4EakRSy1iuf_qQMs/) no-repeat right 7px; } .menu li:hover div a { color:#a40802; } .menu li:hover div a:hover { color:#fd190f; } .menu li ul li a:hover { color:#fd190f; } .dropdown_1column,.dropdown_2columns { margin:4px auto; position:absolute; background:#F4F4F4; border:1px solid #aaaaaa; border-top:none; padding:10px 5px 10px 5px; background: -moz-linear-gradient(top, #EEEEEE, #BBBBBB); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EEEEEE), to(#BBBBBB)); } .dropdown_1column,.dropdown_2columns { left:-999em; text-align:left; -moz-border-radius: 0px 5px 5px 5px; -webkit-border-radius: 0px 5px 5px 5px; -khtml-border-radius: 0px 5px 5px 5px; border-radius: 0px 5px 5px 5px; } .dropdown_1column {width: 140px;} .dropdown_2columns {width: 280px;} .menu li:hover .dropdown_1column,.menu li:hover .dropdown_2columns{left:-1px;top:auto} .col_1,.col_2 { display:inline; float: left; position: relative; margin-left: 5px; margin-right: 5px; } .col_1 {width:130px;} .col_2 {width:270px;} .menu li ul { list-style:none; padding:0; margin:0 0 12px 0; } .menu li ul li { font-size:12px; line-height:24px; position:relative; text-shadow: 1px 1px 1px #ffffff; padding:0; margin:0; float:none; text-align:left; width:130px; } .menu li ul li:hover {background:none; border:none; padding:0; margin:0; }
Chúc thành công!.
Nhận xét
bạn ơi cho mình hỏi cái Web GREEN VIETNAM của mình í
Trả lờiXóaMình muốn cái menubar nó dài hết chiều ngang của site chứ ko chỉ ngắn như bây h, mình phải làm thế nào?
@TDTBạn tìm đoạn Code sau:
Trả lờiXóa.nav23 {
height: 30px;
padding: 2px 0 0;
margin-right:5px;
width: 100%;
border-top:1px solid #bbb;
border-bottom:1px solid #ffdab6;
background-color:#88bb22;
}
Và sửa thành:
.nav23 {
height: 30px;
padding: 2px 0 0;
margin-right:5px;
width: 1000 Px;
border-top:1px solid #bbb;
border-bottom:1px solid #ffdab6;
background-color:#88bb22;
}
Thay đổi giá trị width: 1000 Px; cho phù hợp độ rộng blog của bạn nha :D) :D) :D) :D)
Bạn xem có các kiểu nút share nào thuận tiện, dễ lắp đặt post cho ace thực hành đi :D
Trả lờiXóaGREEN VIETNAM
@Fairstar
Trả lờiXóathanks :)
tớ đang tìm thủ thuật tạo cảnh lá rơi chỉ riêng cho bài viết được chọn, code cho vào bài viết đó í
Trả lờiXóabạn có thủ thuật nào vậy không?
GREEN VIETNAM
Bạn ơi cho mình hỏi là làm sao để khi vào một nhãn nào đó, nó không hiện lên Hiển thị tất cả bài viết có trong nhãn mà hiện HOME>Tên nhãn>Bài viết giống của bạn ý
Trả lờiXóaTahaefments
@Tahaefment bạn tham khảo bài Thanh trạng thái "breadcrumb" cho Blogspot Tại ĐÂY
Trả lờiXóaNamkna ơi mình có chèn dropdown menu đơn giản rồi nhưng khi hiện mình bấm vào một cái nào đó nhiều mục quá thì nó bị khuất bởi menu chính, bạn xem tại đây và giúp mình sữa nha, mình chưa xóa quyền quản trị của bạn, bạn nhớ sửa dùm mình vì mai mốt có lẽ mình không online được rồi:H)
Trả lờiXóa@Tahaefment Trong Template bạn tìm đoạn code như sau:
Trả lờiXóa.menu-secondary-container{position:relative;height:38px;z-index:300;background:url(http://4.bp.blogspot.com/-UE1l1p1I32I/Ty6LWcoa7gI/AAAAAAAAAdQ/JEHuF3u7_3c/s1600/menu-namkna-blogspot-com-ngoctra.png) left top repeat-x}
Và xóa đoạn code in đậm z-index:300; trong đó đi là được. :3) :3) :3)
- Đoạn code đó làm nổi Menu chính mà :3) :3) :3)
Vậy có cách nào xóa bỏ cái phần dư ra của menu có sẵn trên blogger để mình thay cái dropdown này vào chỗ đó không bạn
Trả lờiXóa@Tahaefment Cái này làm mất thời gian lắm. tóm lại là được. Bạn phải tìm Widget HTML99 trong Template
Trả lờiXóa<b:widget id='HTML91' locked='false' title='Menu' type='HTML'/>
sau đó thay vào Wiget laber trong Template.
<b:widget id='widget Label' locked='false' title='Menu' type='Label1'/>
Và chỉnh lại toàn bộ Code CSS rất mất thời gian :3) :3) :3) Bạn có thể mày mò từ từ :3) :3) :3)
Amin thay giao diện liên tục thế :L) :L) :L) :L)
Trả lờiXóaCó cách nào tạo thêm nhiều mục ko bạn
Trả lờiXóa@dung coi Làm thế cho mới lạ thôi hi hi
Trả lờiXóa@Tahaefment Thêm đoạn này
Trả lờiXóa<li><a href="#" class="drop">2 columns</a>
<div class="dropdown_2columns">
<div class="col_1">
<h3>Some Links</h3>
<ul>
<li><a href="#">ThemeForest</a></li>
<li><a href="#">GraphicRiver</a></li>
<li><a href="#">ActiveDen</a></li>
</ul>
</div>
<div class="col_1">
<h3>Useful Links</h3>
<ul>
<li><a href="#">NetTuts</a></li>
<li><a href="#">VectorTuts</a></li>
<li><a href="#">PsdTuts</a></li>
</ul>
</div>
<div class="col_1">
<h3>Other Stuff</h3>
<ul>
<li><a href="#">FreelanceSwitch</a></li>
<li><a href="#">Creattica</a></li>
<li><a href="#">WorkAwesome</a></li>
</ul>
</div>
<div class="col_1">
<h3>Misc</h3>
<ul>
<li><a href="#">Design</a></li>
<li><a href="#">Logo</a></li>
<li><a href="#">Flash</a></li>
</ul>
</div></div></li>
Vài trước thẻ đóng </ul> Cuối cùng của Code thứ 2 :3) :3) :3)
Template mới của mình sau khi xóa menu-secondary-container{position:relative;height:38px;z-index:300;background:url(http://4.bp.blogspot.com/-UE1l1p1I32I/Ty6LWcoa7gI/AAAAAAAAAdQ/JEHuF3u7_3c/s1600/menu-namkna-blogspot-com-ngoctra.png) left top repeat-x}
Trả lờiXóaVà xóa đoạn code in đậm z-index:300; trong đó đi là được chổ bạn chỉ nó vẫn bị khuất
@Tahaefment Bạn tìm trong template và xóa các phần có chữ z-index:300; đi.
Trả lờiXóa=> Nhớ lưu Template trước nha.
chào bạn Namkna
Trả lờiXóaCảm ơn bài viết của bạn. Mình đã thêm thành công menu cho blog của mình. Tuy nhiên bài hướng dẫn của bạn làm cho Menu nằm trên Blog Title. Mình muốn menu này nằm dưới Blog title thì có được không bạn?