Flip Menu - Menu dọc với hiệu ứng lật JQuery cho Blogspot

Xem thử

Tiến hành:
1. Đăng nhập Blogspot.
2. Vào Thiết kế => Bố cục => Thêm tiện ích => HTML/Javascript.
3. Copy và paste đoạn Code dưới đây vào khung nội dung tiện ích.

<script type="text/javascript" src="https://bongnguoilangle.googlecode.com/files/jquery.min-1.8.2.js"></script>
<script src="https://bongnguoilangle.googlecode.com/files/flipmenu.js" type="text/javascript">   </script>
<style>
.flipmenu {
font-family: Arial;
font-size: 15px;
font-weight: bold;
position: relative;
}

.flipmenu_box {
overflow: hidden;
position: relative;
}

.flipmenu_link,.flipmenu_link_over,.flipmenu_link_active {
width:214px;
text-decoration: none;
text-shadow:1px 1px 1px #010101;
text-transform: uppercase;
color: #000000;
cursor: pointer;
margin-top:2px;
padding: 6px;
position: absolute;
background: #010101;
background: -moz-linear-gradient(top, #565656 0%, #3b3b3b 50%, #262626 51%, #121212 100%);
background:
 -webkit-gradient(linear, left top, left bottom, color-stop(0%,#616161),
 color-stop(50%,#454545), color-stop(51%,#2c2c2c), 
color-stop(100%,#131313)); 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="http://bongnguoilangle.blogspot.com/search/label/T%C3%B9y%20ch%E1%BB%89nh%20Blogspot?max-results=5">Blogspot Tips</a>
<a href="http://bongnguoilangle.blogspot.com/search/label/B%C3%A0i%20Vi%E1%BA%BFt?max-results=5">Blog Entries</a>
<a href="http://bongnguoilangle.blogspot.com/search/label/Notes?max-results=5">Notes</a>
<a href="http://bongnguoilangle.blogspot.com/search/label/Astrology%20-%2012%20cung%20Ho%C3%A0ng%20%C4%90%E1%BA%A1o?max-results=5">Astrology</a>
<a href="#">Tên menu 5</a>
<a href="#">Tên menu 6</a>
<a href="#">Tên menu 7</a>
<a href="#">Tên menu 8</a>
<a href="#">Tên menu 9</a>
<a href="#">Tên menu 10</a>
</div>

4. Lưu tiện ích.
5. Kéo tiện ích đến vị trí muốn đặt trên trang Blogspot của bạn rồi Lưu sắp xếp và hoàn thành.
Trong đoạn Code trên:
- Thay các giá trị màu (được tô màu đỏ) để có màu sắc như ý bạn.
- Chỉnh lại độ rộng width:214px; (được tô màu hồng) cho phù hợp với Blog của bạn.
- Thay các đường link (được tô màu xanh) bằng các đường link tới các trang mục tiêu cần hiển thị trên Menu của bạn.
- Thay tên các mục của thanh Menu (được tô màu tím) thành tên mà bạn muốn.