Menu dọc với nút ẩn hiện cho blogger

Hôm nay mình ghé qua Zing Mp3 thì thấy họ cáo một cái menu dọc khá là hay nên đã bắt chước làm theo . Menu của mình sử dụng các icon từ font Awesome và thêm một chút Javascript để có thể ẩn hiện theo ý muốn. Sau đây là các bước thực hiện:

Menu dọc cho blog

DEMO menu ngay trên bài viết này

Thêm menu

1. Đăng nhập Blogger

2. Bố cục > Thêm tiện ích > HTML/Javascrip

3. Dán code dưới vào

<script type="text/javascript">
function closeMenu() {
document.getElementById("khanh98-menu").style.left = "-45px";
}
function showMenu() {
document.getElementById("khanh98-menu").style.left = "0";
}
</script>
<style type="text/css">
#khanh98-menu{
position: fixed;
left:0;top:0;
border-right:1px solid #8F8F93;
width:42px;
height:100%;
background:#fff;
z-index:9999; 
-webkit-transition:all 0.5s ease-out;
-moz-transition:all 0.5s ease-out;
-ms-transition:all 0.5s ease-out;
-o-transition:all 0.5s ease-out;
transition:all 0.5s ease-out;
}
#khanh98-menu ul{padding: 0;
  list-style-type: none;
  text-align: left;
  margin:0;
}
#khanh98-menu ul li{height: 40px;
  line-height: 40px;padding:0}
#khanh98-menu a{display:block; font-size:200%; text-decoration:none; color:#8F8F93;padding:0 ;text-align:center}
#khanh98-menu a:hover{color:#e74c3c}
#khanh98-menu .bottom{
 position: absolute; 
 bottom:30px;
 left:8px
}
#show-menu{
  position:fixed;
  top:0;left:0;
  boder:1px solid #000;
  z-index:9998;
   }
#show-menu i{font-size:200%; padding:1px}

</style>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" media="all" rel="stylesheet"/>
<div id="khanh98-menu">
<div class="top">
 <ul>
  <li><a href="#" style="background:#e67e22"><i class="fa fa-home"></i></a></li>
  <li><a href="#"><i class="fa fa-envelope-o"></i></a></li>
  <li><a href="#"><i class="fa fa-coffee"></i></a></li>
  <li><a href="#"><i class="fa fa-sitemap"></i></a></li>
  <li><a href="#"><i class="fa fa-comments-o"></i></a></li>
  <li><a href="#"><i class="fa fa-user"></i></a></li>
  <li><a href="#"><i class="fa fa-check-circle-o"></i></a></li>
 </ul>
</div>
<div class="bottom">
 <ul>
  <li><a href="#" onclick='top.window.scrollTo(0,0)'><i class="fa fa-angle-double-up"></i></a></li>  
  <li> <a href="#" onclick="closeMenu()"><i class="fa fa-close"></i></a></li> 
 </ul>
</div>
</div>
<div id="show-menu">
 <a href="#" onclick="showMenu()"><i class="fa fa-navicon"></i></a> 
</div>

Lưu ý:

• Thay các dấu # thành URL
• Đây là menu sử dụng icon font Awesome nên bạn có thể tham khảo thêm rất nhiều icon tại http://fortawesome.github.io/Font-Awesome/icons/
• Nếu trong blog của bạn đã có cài font Awesome thì bỏ đoạn <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" media="all" rel="stylesheet"/>

4. Lưu tiện ích lại và kiểm tra kết quả.
Có thể menu này sẽ hoạt động trên blog của bạn không tốt như demo, nếu có bất kì câu hỏi nào xin để lại một bình luận vào dưới bài viết.