Thanh Menu- Drop menu CSS - Thêm menu trỏ xuống cho blogger, Web

Làm thế nào để thêm menu ngang trỏ xuống cho blogger? Trong blogger cũng như trên nền Website khác, chúng ta thêm bằng cách chèn đoạn Code vào vị trí tương ứng. Ở bài viết thủ thuật hôm nay mình giới thiệu tới các bạn Drop menu CSS

Có 2 cách để thêm vào Blogsot

Ở đây mình hướng dẫn các bạn thêm vào bằng cách dán Code vào tiện ích HTML/Javascript vì cách còn lại sẽ thêm vào tùy theo mẫu (Template) của từng giao diện. Nếu bạn nào muốn thêm bằng cách đó thì gửi giao diện qua email cho mình.

XEM DEMO

CÁCH LÀM THỦ THUẬT: Drop menu CSS - Thêm menu trỏ xuống

1. Vào bảng điều khiển blogger -> Bố cục (Layout) -> Thêm tiện ích (Add a widget) -> HTML/Javascript

2. Dán đoạn code dưới đây vào tiện tích vừa thêm


<style> /*Start Css Menu*/
.menu {
border: none;
border: 0px;
margin: 0px;
padding: 0px;
font-family: verdana,geneva,arial,helvetica,sans-serif;
font-size: 14px;
font-weight: bold;
color: 8e8e8e;
}

.menu ul {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEib0rI3hEpfV2Xg3LzpIe-S2LVosHhSf2cyHTScMfP6qiiGQfuAATLu2r68VCT7S1pdkwaqdQ1yy3DE0zjG-wufh4ALdjUyLyHC0GlFBcTYRwpNdn2zexw6lUTsTEUZfevaOYrie0kJgaMH/h120/itviet360.com-menu-bg.gif) top left repeat-x;
height: 43px;
list-style: none;
margin: 0;
padding: 0;
}

.menu li {
float: left;
padding: 0px 8px 0px 8px;
}

.menu li a {
color: #666666;
display: block;
font-weight: bold;
line-height: 43px;
padding: 0px 25px;
text-align: center;
text-decoration: none;
}

.menu li a:hover {
color: #000000;
text-decoration: none;
}

.menu li ul {
background: #e0e0e0;
border-left: 2px solid #a80329;
border-right: 2px solid #a80329;
border-bottom: 2px solid #a80329;
display: none;
height: auto;
filter: alpha(opacity=95);
opacity: 0.95;
position: absolute;
width: 225px;
z-index: 200;
/*top:1em;
/*left:0;*/
}

.menu li:hover ul {
display: block;
}

.menu li li {
display: block;
float: none;
padding: 0px;
width: 225px;
}

.menu li ul a {
display: block;
font-size: 12px;
font-style: normal;
padding: 0px 10px 0px 15px;
text-align: left;
}

.menu li ul a:hover {
background: #949494;
color: #000000;
opacity: 1.0;
filter: alpha(opacity=100);
}

.menu p {
clear: left;
}

.menu #current {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEga3lNQn5h1z42dkmTb5AGToxY9GEK2at3Dm3AVPbLcvCe-bnTDLk9ol-HRXQ94nFNF4Mmo6Jcrg21Pdd3GbcfQHQdPjyqt1kh7tbXi1JSgfu473zFe5NtMy5mLwwOpzine31F2rbUaTR9j/h120/itviet360.com-current-bg.gif) top left repeat-x;
color: #ffffff;
}

/*End Css Menu from http://www.itviet360.com/*/
</style>


<div class="menu">
<ul>
<li><a href="#" id="current">Home</a></li>
<li><a href="#">Kiến thức</a>
<ul>
<li><a href="#">Tin học văn phòng</a></li>
<li><a href="#">itviet360.com</a></li>
<li><a href="#">Menu CSS</a></li>
<li><a href="#">Vớ va vớ vẩn</a></li>
</ul>
</li>
<li><a href="#">FAQ</a>
<ul>
<li><a href="#">Drop Down CSS Menus</a></li>
<li><a href="#">Horizontal CSS Menus</a></li>
<li><a href="#">Vertical CSS Menus</a></li>
<li><a href="#">Dreamweaver Menus</a></li>
</ul>
</li>
<li><a href="#">Contact</a></li>
<li><a href="http://langtustudio.blogspot.com/">Create This</a></li>
</ul>
</div>
Các thông số được bôi màu các bạn tùy chỉnh cho phù hợp
3. Lưu lại và xem kết quả :)

Xem nhiều thủ thuật hơn tại Lãng Tử Studio

Đừng quên Like và Share nếu thấy bài viết bổ ích


Nguồn: itviet360