Vertical CSS3 menu đẹp cho blogger, Web

hủ thuật blogger hôm nay giới thiệu tới các bạn thêm 1 menu dọc cho blogger. Thực ra những Menu này được ứng dụng rất nhiều trên Website. Nó sử dụng hoàn toàn CSS nhưng tạo được những hiệu ứng bóng đổ khá đẹp mắt. Các thuộc tính CSS cũng dễ dàng chỉnh sửa đối với các bạn không nắm rõ về Code. Loại Menu Vertical CSS3 này tiện lợi khi các bạn muốn thêm danh mục gì đó bên thanh cột của blog.

Demo: http://www.tieulamtruyencuoi.com/
Cách làm thủ thuật:
Cách 1:
Vào mẫu -> chỉnh sửa mẫu và dán đoạn code CSS dưới đây ngay trên thẻ </head>
Code CSS
<style>


.shadowblockmenu-v{
font: bold 14px Germand;
width: 280px; /* width of menu */
}

.shadowblockmenu-v ul{
border: 1px solid #eee;
padding: 0;
margin: 0;
list-style: none;
}

.shadowblockmenu-v ul li{
margin:0;
padding:0;
}

.shadowblockmenu-v ul li a{
display:block;
text-transform: uppercase;
color: #494949;
padding: 10px 15px;
text-decoration: none;
border-bottom: 1px solid #cacaca;
border-right: 1px solid #cacaca; /*right border between menu items*/
-moz-box-shadow: inset 7px 0 10px rgba(114,114,114, 0.6); /* Add inset shadow to each menu item. First 3 values in (114,114,114, 0.5) specifies rgb values, last specifies opacity */
-webkit-box-shadow: inset 7px 0 10px rgba(114,114,114, 0.6);
box-shadow: inset 7px 0 10px rgba(114,114,114, 0.6);
text-shadow: 0 -1px 1px #cfcfcf; /* CSS text shadow to give text some depth */
-moz-transition: all 0.2s ease-in-out; /* Enable CSS transition between property changes */
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}

.shadowblockmenu-v ul li a:hover, .shadowblockmenu-v ul li a.selected{
color: black;
-moz-box-shadow: inset 7px 0 10px rgba(216,89,39, 0.5), inset 0 0 15px rgba(216,89,39, 0.6), inset 0 0 20px rgba(216,89,39, 0.8); /* Add 3 inset shadows to each menu item */
-webkit-box-shadow: inset 7px 0 10px rgba(216,89,39, 0.5), inset 0 0 15px rgba(216,89,39, 0.6), inset 0 0 20px rgba(216,89,39, 0.8);
box-shadow: inset 7px 0 10px rgba(216,89,39, 0.5), inset 0 0 15px rgba(216,89,39, 0.6), inset 0 0 20px rgba(216,89,39, 0.8);
}

</style>

Dòng bôi đỏ là chiền rộng của Menu (các bạn lưu ý tùy chỉnh cho nó phù hợp với độ rộng thanh bên blog của bạn)
Sau đó lưu mẫu lại
- Vào bố cục -> Thêm 1 tiện ích HTML/Javascript và dán Code HTML dưới đây

<div class="shadowblockmenu-v">
<ul>
<li><a href="http://tieulamtruyencuoi.com/search/label/truyen%20trang%20quynh"> Truyện Trạng Quỳnh</a></li>
<li><a href="http://www.itviet360.com/2012/11/tong-hop-truyen-cuoi-vova-toan-tap.html" target='_blank'> Truyện cười VOVA</a></li>
</ul>
</div>

Nếu muốn thêm nhiều hơn nữa thì các bạn lặp lại code 

<li><a href="#"> Tiêu đề</a></li>

Cách 2:
- Vào bố cục -> thêm 1 tiện ích HTML / Javascript sau đó Copy và dán lần lượt Code CSS đến Code HTML. Lưu lại là xong.

---

Chúc các bạn vui vẻ!

Read more: http://www.itviet360.com/2013/01/vertical-css3-menu-dep-cho-blogger-web.html#ixzz4AidEw8Zu

Share this

Author : Unknown

Bài Viết Cùng Chủ Đề