DEMO
Cách thực hiện
Bước 1: Các bạn vào Chủ đề > Chỉnh sửa tìm đến thẻ ]]></b:skin> rồi dán đoạn code sau lên trước thẻ này:.logo{}Bước 2: Thêm đoạn code sau bên dưới thẻ <body>
.settings{height:73px;float:left;background:url(http://s3.postimg.org/bqfooag4z/startific.jpg);background-repeat:no-repeat;width:250px;margin:0;text-align:center;font-size:20px;font-family:'Strait',sans-serif}
.scrollbar{height:90%;width:100%;overflow-y:hidden;overflow-x:hidden}
.scrollbar:hover{height:90%;width:100%;overflow-y:scroll;overflow-x:hidden}
#style-1::-webkit-scrollbar-track{border-radius:2px}
#style-1::-webkit-scrollbar{width:5px;background-color:#F7F7F7}
#style-1::-webkit-scrollbar-thumb{border-radius:10px;-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.3);background-color:#BFBFBF}
.fa-lg{font-size:1em}
.fa{position:relative;display:table-cell;width:40px;height:36px;text-align:center;top:12px;font-size:20px}
.main-menu:hover,nav.main-menu.expanded{width:250px;overflow:hidden;opacity:1}
.main-menu{background:#F7F7F7;position:absolute;top:0;bottom:0;height:100%;left:0;width:40px;overflow:hidden;-webkit-transition:width .2s linear;transition:width .2s linear;-webkit-transform:translateZ(0) scale(1,1);box-shadow:1px 0 15px rgba(0,0,0,0.07);opacity:1}
.main-menu>ul{margin:7px 0}
.main-menu li{position:relative;display:block;width:250px}
.main-menu li>a{position:relative;width:255px;display:table;border-collapse:collapse;border-spacing:0;color:#8a8a8a;font-size:13px;text-decoration:none;-webkit-transform:translateZ(0) scale(1,1);-webkit-transition:all .14s linear;transition:all .14s linear;font-family:'Strait',sans-serif;border-top:1px solid #f2f2f2;text-shadow:1px 1px 1px #fff}
.main-menu .nav-icon{position:relative;display:table-cell;width:55px;height:36px;text-align:center;vertical-align:middle;font-size:18px}
.main-menu .nav-text{position:relative;display:table-cell;vertical-align:middle;width:190px;font-family:'Titillium Web',sans-serif}
.main-menu .share{}
.main-menu .fb-like{left:180px;position:absolute;top:15px}
.main-menu>ul.logout{position:absolute;left:0;bottom:0}
.no-touch .scrollable.hover{overflow-y:hidden}
.no-touch .scrollable.hover:hover{overflow-y:auto;overflow:visible}
.settings:hover,settings:focus{background:url(http://s17.postimg.org/74cl7s05b/logo_hover.jpg);-webkit-transition:all 0.2s ease-in-out,width 0,height 0,top 0,left 0;-moz-transition:all 0.2s ease-in-out,width 0,height 0,top 0,left 0;-o-transition:all 0.2s ease-in-out,width 0,height 0,top 0,left 0;transition:all 0.2s ease-in-out,width 0,height 0,top 0,left 0}
.settings:active,settings:focus{background:url(http://s3.postimg.org/bqfooag4z/startific.jpg);-webkit-transition:all 0.1s ease-in-out,width 0,height 0,top 0,left 0;-moz-transition:all 0.1s ease-in-out,width 0,height 0,top 0,left 0;-o-transition:all 0.1s ease-in-out,width 0,height 0,top 0,left 0;transition:all 0.1s ease-in-out,width 0,height 0,top 0,left 0}
a:hover,a:focus{text-decoration:none;border-left:0 solid #F7F7F7}
nav{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none}
nav ul,nav li{outline:0;margin:0;padding:0;text-transform:uppercase}
.darkerli{background-color:#ededed;text-transform:capitalize}
.darkerlishadow{background-color:#ededed;text-transform:capitalize;-webkit-box-shadow:inset 0 5px 5px -4px rgba(50,50,50,0.55);-moz-box-shadow:inset 0 5px 5px -4px rgba(50,50,50,0.55);box-shadow:inset 0 5px 5px -4px rgba(50,50,50,0.55)}
.darkerlishadowdown{background-color:#ededed;text-transform:capitalize;-webkit-box-shadow:inset 0 -4px 5px -4px rgba(50,50,50,0.55);-moz-box-shadow:inset 0 -4px 5px -4px rgba(50,50,50,0.55);box-shadow:inset 0 -4px 5px -4px rgba(50,50,50,0.55)}
.main-menu li:hover>a,nav.main-menu li.active>a,.dropdown-menu>li>a:hover,.dropdown-menu>li>a:focus,.dropdown-menu>.active>a,.dropdown-menu>.active>a:hover,.dropdown-menu>.active>a:focus,.no-touch .dashboard-page nav.dashboard-menu ul li:hover a,.dashboard-page nav.dashboard-menu ul li.active a{color:#fff;background-color:#00bbbb;text-shadow:0 0 0}
.area{float:left;background:#e2e2e2;width:100%;height:100%}
@font-face{font-family:'Titillium Web';font-style:normal;font-weight:300;src:local('Titillium WebLight'),local('TitilliumWeb-Light'),url(http://themes.googleusercontent.com/static/fonts/titilliumweb/v2/anMUvcNT0H1YN4FII8wpr24bNCNEoFTpS2BTjF6FB5E.woff) format('woff')}
<nav class="main-menu">Bước 3: Thêm đoạn code sau bên trên thẻ </head>
<div>
<a class="logo" href="#">
</a>
</div>
<div class="settings">
</div>
<div class="scrollbar" id="style-1">
<ul>
<li>
<a href="#">
<i class="fa fa-home fa-lg"></i>
<span class="nav-text">Home</span>
</a>
</li>
<li>
<a href="#">
<i class="fa fa-user fa-lg"></i>
<span class="nav-text">Login</span>
</a>
</li>
<li>
<a href="#">
<i class="fa fa-envelope-o fa-lg"></i>
<span class="nav-text">Contact</span>
</a>
</li>
<li>
<a href="#">
<i class="fa fa-heart-o fa-lg"></i>
<span class="share">
</span></a><span class="share"><div class="addthis_default_style addthis_32x32_style">
<a href="#"></a>
<div style="margin-left: 56px; position: absolute; top: 3px;">
<a href="#"></a><a href="#"></a><a class="share-popup" href="http://www.facebook.com/sharer/sharer.php?u=" target="_blank"><img src="http://icons.iconarchive.com/icons/danleech/simple/512/facebook-icon.png" height="30px" width="30px" /></a>
<a class="share-popup" href="http://twitter.com/share" target="_blank"><img height="30px" src="https://cdn1.iconfinder.com/data/icons/metro-ui-dock-icon-set--icons-by-dakirby/512/Twitter_alt.png" width="30px" /></a>
<a class="share-popup" href="https://plusone.google.com/_/+1/confirm?hl=en&url=_URL_&title=_TITLE_" target="_blank"><img src="http://icons.iconarchive.com/icons/danleech/simple/512/google-plus-icon.png" height="30px" width="30px" /></a>
</div>
<script type="text/javascript">var addthis_config = {"data_track_addressbar":true};</script>
<script src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-4ff17589278d8b3a" type="text/javascript"></script>
</div>
</span>
<span class="twitter"></span>
<span class="google"></span>
<span class="fb-like">
<iframe allowtransparency="true" frameborder="0" scrolling="no" src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Ffacebook.com%2Fstartific&width&layout=button&action=like&show_faces=false&share=false&height=35" style="border: none; height: 35px; overflow: hidden;"></iframe>
</span>
<span class="nav-text">
</span>
</li>
<li class="darkerlishadow">
<a href="#">
<i class="fa fa-clock-o fa-lg"></i>
<span class="nav-text">News</span>
</a>
</li>
<li class="darkerli">
<a href="#">
<i class="fa fa-desktop fa-lg"></i>
<span class="nav-text">Technology</span>
</a>
</li>
<li class="darkerli">
<a href="#">
<i class="fa fa-plane fa-lg"></i>
<span class="nav-text">Travel</span>
</a>
</li>
<li class="darkerli">
<a href="#">
<i class="fa fa-shopping-cart"></i>
<span class="nav-text">Shopping</span>
</a>
</li>
<li class="darkerli">
<a href="#">
<i class="fa fa-microphone fa-lg"></i>
<span class="nav-text">FilmMusic</span>
</a>
</li>
<li class="darkerli">
<a href="#">
<i class="fa fa-flask fa-lg"></i>
<span class="nav-text">Web Tools</span>
</a>
</li>
<li class="darkerli">
<a href="#">
<i class="fa fa-picture-o fa-lg"></i>
<span class="nav-text">Art Design</span>
</a>
</li>
<li class="darkerli">
<a href="#">
<i class="fa fa-align-left fa-lg"></i>
<span class="nav-text">Magazines
</span>
</a>
</li>
<li class="darkerli">
<a href="#">
<i class="fa fa-gamepad fa-lg"></i>
<span class="nav-text">Games</span>
</a>
</li>
<li class="darkerli">
<a href="#">
<i class="fa fa-glass fa-lg"></i>
<span class="nav-text">Life Style
</span>
</a>
</li>
<li class="darkerlishadowdown">
<a href="#">
<i class="fa fa-rocket fa-lg"></i>
<span class="nav-text">Fun</span>
</a>
</li>
</ul>
<li>
<a href="#">
<i class="fa fa-question-circle fa-lg"></i>
<span class="nav-text">Help</span>
</a>
</li>
<ul class="logout">
<li>
<a href="#">
<i class="fa fa-lightbulb-o fa-lg"></i>
<span class="nav-text">
BLOG
</span>
</a>
</li>
</ul>
</div>
</nav>
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>Cuối cùng bạn lưu lại và tận hưởng thành quả nhé. Các bạn có thể tùy chỉnh lại cho phù hợp với Blog của mình nhé.
<link href='http://fonts.googleapis.com/css?family=Titillium+Web:300' rel='stylesheet' type='text/css'/>
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'></script>
Chúc các bạn thành công.
Nếu bạn không làm được hoặc gặp lỗi gì thì comment bên dưới bài này mình sẽ hỗ trợ nhé.