CSS Side Menu với hiệu ứng hover đẹp mắt cho blog

LIVE DEMO

Bài viết này mình sẽ chia sẻ tới các bạn một thủ thuật tạo menu dọc, tương thích với sidebar dành cho Blogger. Các bạn có thể xem qua live demo của menu và theo dõi các bước thực hiện như bên dưới:

Bước 1: Tại trang quản trị blog, các bạn vào Bố cục, tạo một tiện ích HTML/Javascript.

Bước 2: Paste đoạn code bên dưới vào phần nội dung và lưu lại:

<!--Side Menu by kjmagic.blogspot.com-->
<style type="text/css">
/* Side Menu :: kjmagic.blogspot.com */
#kjsidemenu { 
    margin: 0; 
    padding: 0; 
    font-family: Verdana, Helvetica, Arial, sans-serif; 
}

#kjsidemenu { 
    width: 275px; 
}

#kjsidemenu ul { 
    list-style: none; 
    text-indent: 0px; 
}

#kjsidemenu li { 
    margin-top: 0px; 
    border-bottom: 1px solid #414141; 
}

#kjsidemenu a { 
    font-family:Verdana, Geneva, sans-serif; 
    font-size: 15px; 
    font-weight:bold; 
    font-variant: inherit; 
    text-transform:uppercase; 
    padding: 0px; 
    color:#CCC; 
    display: block; 
    padding: 13px 50px; 
    height: 26px; 
    line-height: 26px; 
    text-decoration: none; 
    background:#333 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgu2lNx_hG-qXQcslUBgK7fTODWXv4FJtx1IF-aoDefqCtS5sI2eHs3fc8pjWbERX8AnRvXEFTZnznvpxFXVdR7IzAj-1CVCWTi5FBs7T_cfNCEZbma58LekkSEUItXhFDrEiDHpbn21y4/s1600/menu-bg.png) no-repeat; 
    text-shadow: 1px 1px 1px #111; 
    -webkit-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715); 
    -moz-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715); 
    -o-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715); 
    -ms-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715); 
    transition: all 600ms cubic-bezier(0.47, 0, 0.745, 0.715); 
}

#kjsidemenu a:hover { 
    background: #5e5e5e url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiti6kVEFpULdwM4yX9gWGMdthJCif7Lnaff90sk5Fwmoq1AAJ7B3JfJgpr04m6ucF_gXQsKIzWa6YRYY-_dUd0suAUwZ3q9MKc8lEglvO3H7sVrq__KFY-D3WdN5w57DDdyKIzHqbnMug/s1600/hover-bg.png) no-repeat; 
    font-size: 14px; 
    padding: 13px 60px; 
    -webkit-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715); 
    -moz-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715); 
    -o-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715); 
    -ms-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715); 
    transition: all 600ms cubic-bezier(0.47, 0, 0.745, 0.715); 
    
}

#kjsidemenu a:visited { 
    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiti6kVEFpULdwM4yX9gWGMdthJCif7Lnaff90sk5Fwmoq1AAJ7B3JfJgpr04m6ucF_gXQsKIzWa6YRYY-_dUd0suAUwZ3q9MKc8lEglvO3H7sVrq__KFY-D3WdN5w57DDdyKIzHqbnMug/s1600/hover-bg.png) no-repeat;    
}

#kjsidemenu a:active { 
    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiti6kVEFpULdwM4yX9gWGMdthJCif7Lnaff90sk5Fwmoq1AAJ7B3JfJgpr04m6ucF_gXQsKIzWa6YRYY-_dUd0suAUwZ3q9MKc8lEglvO3H7sVrq__KFY-D3WdN5w57DDdyKIzHqbnMug/s1600/hover-bg.png) no-repeat;    
} 
/* Side Menu :: kjmagic.blogspot.com */
</style>

<div id='kjsidemenu'> 
<ul> 
<li><a href="#">Home</a></li> 
<li><a href="#">Widgets</a></li> 
<li><a href="#">SEO</a></li> 
<li><a href="#">Adsense</a></li> 
<li><a href="#">Templates</a></li> 
</ul> 
</div>
<!--/Side Menu by kjmagic.blogspot.com-->

Chỉnh sửa các dấu # thành link và Home, Widgets... thành tên link của bạn.

Chúc các bạn thành công !