Menu dọc với hiệu ứng lật bằng JQuery

Đây là dạng menu dọc với hiệu ứng lật bằng JQuery. Menu này trông khá Pro cho Blog của các bạn. Thủ thuật để tạo Menu này cũng khá đơn giản. Để tạo được nenu này các bạn thực hiện theo các thao tác     mình hướng dẫn dưới đây.

Bắt đầu thủ thuật:

1. Đăng nhập vào tài khoản Blogger
2. Vào phần thiết kế (Design)
3. Chọn thêm tiện ích (Add a Gadget)
4. Thêm 1 HTML/Javascript và thêm vào code bên dưới

<script type="text/javascript" src="http://traidatmui-tips.googlecode.com/files/Jquery1.3.2.js"></script>

<script src="http://traidatmui-tips.googlecode.com/files/flipmenu.js" type="text/javascript"> </script>

<style>

.flipmenu {

font-family: Arial;

font-size: 14px;

font-weight: bold;

position: relative;

}

.flipmenu_box {

overflow: hidden;

position: relative;

}

.flipmenu_link,.flipmenu_link_over,.flipmenu_link_active {

width:300px;

text-decoration: none;

text-shadow:1px 1px 1px #fff;

text-transform: uppercase;

color: #000000;

cursor: pointer;

margin-top:2px;

padding: 6px;

position: absolute;

background: #fdd78d;

background: -moz-linear-gradient(top, #fbdc88 0%, #fbbf57 50%, #fac319 51%, #fb9709 100%);

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fbdc88), color-stop(50%,#fbbf57), color-stop(51%,#fac319), color-stop(100%,#fb9709)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fbdc88', endColorstr='#fb9709',GradientType=0 );

-webkit-border-radius: 5px;

-moz-border-radius: 5px;

}

.flipmenu_link_over,

.flipmenu_link_active {

text-decoration: none;

text-shadow:1px 1px 1px #eee;

color: #fa0320;

background: #aebcbf;

background: -moz-linear-gradient(top, #aebcbf 0%, #6e7774 50%, #0a0e0a 51%, #0a0809 100%);

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#aebcbf), color-stop(50%,#6e7774), color-stop(51%,#0a0e0a), color-stop(100%,#0a0809)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#aebcbf', endColorstr='#0a0809',GradientType=0 );

</style>

<div id="flip_menu">

<a href="#">Tên menu 1</a>

<a href="#">Tên menu 2</a>

<a href="#">Tên menu 3</a>

<a href="#">Tên menu 4</a>

<a href="#">Tên menu 5</a>

</div>

Bạn thay dấu (#) thành đường dẫn tương ứng với từng menu của bạn
và đặt tên cho từng menu phù hợp với Blog của bạn
Ở trên mình chỉ giới thiệu 5 mục menu.Nếu các bạn muốn thêm menu 6 thì chỉ cần coppy  <a href="#">Tên menu </a> dán dưới dòng <a href="#">Tên menu 5</a> là được.
5. Save tiện ích lại là xong.
Chúc các bạn thành công!!!