Hướng dẫn tạo menu dọc cực đẹp cho blogger

Chào các ban, hôm nay mình sẽ chia sẻ đến các bạn cách Tạo menu dọc cực đẹp cho blogger.

DEMO

Đầu tiên các bạn vào Chủ đề >> Chỉnh sửa

Tiếp theo bạn tìm đến thẻ ]]></b:skin> và chèn đoạn code sau đây lên trên nó

div.fixed-navbar {z-index:999;position: fixed; top: 0; left: 0;text-align: left;width: 100%;}
.menu-right{position:absolute;right:2px;top:2px;padding:10px 14px;color:#fff;background:#222;font-weight:400;font-size:25px;line-height:20px;cursor:pointer;z-index:9999;transition:background-color .3s ease 0s}
#css-menu{position:fixed;top:0;right:-250px;z-index:9999;background:#fff;height:100%;transition:all .5s ease-in-out;border-left:1px solid #eee}
#cssmenu,#cssmenu ul,#cssmenu li,#cssmenu a{margin:0;padding:0;border:0;list-style:none;font-weight:normal;text-decoration:none;line-height:1;font-family:"Open Sans",sans-serif;font-size:13px;position:relative}
#cssmenu a{line-height:1.3;padding:12px 15px}
#cssmenu{width:240px}
#cssmenu >ul >li{cursor:pointer;background:#fff;border-bottom:1px solid #eee}
#cssmenu >ul >li:first-child{border-top:none}
#cssmenu >ul >li >a{font-weight:600;font-size:15px;display:block;color:#22313F;background:#fff;padding:12px 15px;transition:initial}
#cssmenu >ul >li >a:hover{text-decoration:none;background:#22313F;color:#fff;transition:initial}
#cssmenu >ul >li.active{font-weight:400}
#cssmenu >ul >li.home .close-menu{background:#34495e;color:#fff;font-size:18px;padding:16px 16px 16px 60px;display:block;text-transform:uppercase;font-weight:bold}
#cssmenu >ul >li.home .close-menu:before{content:'\f00d';display:inline-block;font-family:FontAwesome;line-height:25px;margin-right:5px;transform:rotate(0);font-size:20px;font-style:normal;font-weight:normal;top:4px;left:5px;position:absolute;padding:8px 15px;color:#fff;background:rgba(0,0,0,0.1)}
#cssmenu >ul >li.has-sub >a:after{content:'';position:absolute;top:15px;right:10px;border:5px solid transparent;border-left:5px solid #666;transition:initial}
#cssmenu >ul >li.has-sub >a:hover:after{border-left:5px solid #444}
#cssmenu >ul >li.has-sub.active >a:after{right:14px;top:17px;border:5px solid transparent;border-top:5px solid #666;transition:initial}
#cssmenu >ul >li.has-sub.active >a:hover:after{border-top:5px solid #444}
#cssmenu ul ul{padding:0;display:none}
#cssmenu ul ul.expand{max-height: 250px;overflow:auto}
#cssmenu ul ul a{background:#34495e;display:block;color:#fff;font-size:14px;font-weight:600;transition:initial}
#cssmenu ul ul a:hover{background:#22313F;color:#fff;transition:initial}
#cssmenu ul ul li:first-child{border-top:none}
#cssmenu ul ul li:last-child{border-bottom:none}
#cssmenu ul ul li{border-bottom:1px solid #34495e}
.form-control{display:block;width: auto;height: 20px;padding:6px 12px;font-size:14px;line-height:1.42857143;color:#555;background-color:#fff;background-image:none;border:1px solid #ccc;border-radius:4px;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075);box-shadow:inset 0 1px 1px rgba(0,0,0,.075);-webkit-transition:border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;-o-transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s;transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s}
.form-control:focus{border-color:#66afe9;outline:0;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6)}
.form-control::-moz-placeholder{color:#999;opacity:1}
.form-control:-ms-input-placeholder{color:#999}
.form-control::-webkit-input-placeholder{color:#999}
.form-control::-ms-expand{background-color:transparent;border:0}
.form-control[disabled],.form-control[readonly],fieldset[disabled] .form-control{background-color:#eee;opacity:1}
.form-control[disabled],fieldset[disabled] .form-control{cursor:not-allowed}
textarea.form-control{height:auto}
input[type=search]{-webkit-appearance:none}

Tiếp theo các bạn tìm đến thẻ <body> và dán đoạn code sau bên dưới nó.

<div class='fixed-navbar'>
<div class='menu-right'><i class='fa fa-bars'></i></div>
</div>
<div id='css-menu'>
<nav id='cssmenu'>
<ul>
<li class='home'><span class='close-menu' title='Đóng Menu'> Đóng Menu</span></li>
<li><a style='background:#fff'>
<form action='/search' itemprop='potentialAction' itemscope='itemscope' itemtype='https://schema.org/SearchAction' method='get' role='search' style='margin:0'><meta content='/search?q= { q; } ' itemprop='target'/>
<div class='form-group'>
<input class='form-control' itemprop='query-input' name='q' placeholder='Tìm kiếm bài viết...' required='required' type='text'/>
</div></form></a></li>
<li><a href='/' title='Trang Chủ'><span><i class='fa fa-home'></i> Trang Chủ</span></a></li>
<li class='has-sub'><a href='#' title='Thủ Thuật'><span><i class='fa fa-recycle'></i> Thủ Thuật</span></a>
<ul class='expand'>
<li><a href='/search/label/Blogger'><i class='fa fa-plus-circle'></i> Thủ Thuật Blogspot</a></li>
<li><a href='/search/label/Facebook'><i class='fa fa-plus-circle'></i> Thủ Thuật Facebook</a></li>
<li><a href='/search/label/SEO'><i class='fa fa-plus-circle'></i> SEO Blogspot</a></li>
<li><a href='/search/label/Kiếm Tiền'><i class='fa fa-plus-circle'></i> Kiếm Tiền Online</a></li>
</ul>
</li>
<li class='has-sub'><a href='#' title='Chuyên Mục'><span><i class='fa fa-sliders'></i> Chuyên Mục</span></a>
<ul class='expand'>
<li><a href='http://blogthemevn.blogspot.com' target='_blank'><i class='fa fa-plus-circle'></i> Template Blogger</a></li>
<li><a href='/search/label/Cover Facebook'><i class='fa fa-plus-circle'></i> Ảnh Bìa Facebook</a></li>
<li><a href='/search/label/PSD'><i class='fa fa-plus-circle'></i> PSD Photoshop</a></li>
</ul>
</li>
<li class='active'><a href='/p/gioi-thieu.html' target='_blank' title='Giới Thiệu'><span><i class='fa fa-info-circle'></i> Giới Thiệu</span></a></li>
<li class='active'><a href='/p/contact.html' target='_blank' title='Liên Hệ'><span><i class='fa fa-envelope'></i> Liên Hệ</span></a></li>
<li class='active'><a href='/p/so-do.html' target='_blank' title='Sitemaps'><span><i class='fa fa-sitemap'></i> Sơ Đồ Website</span></a></li>
<li class='active'><a href='/p/binh-luan.html' target='_blank' title='Phản Hồi Độc Giả'><span><i class='fa fa-comments'></i> Phản Hồi Độc Giả</span></a></li>
</ul>
</nav>
</div>

Cuối cùng bạn tìm đến thẻ </body> và dán đoạn code dưới đây lên trên nó

<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'></script>
<script type='text/javascript'>
//<![CDATA[
//Side Menu
$('#cssmenu ul ul li:odd').addClass('odd');
$('#cssmenu ul ul li:even').addClass('even');
$('#cssmenu > ul > li > a').click(function() {
$('#cssmenu li').removeClass('active');
$(this).closest('li').addClass('active');
var checkElement = $(this).next();
if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
$(this).closest('li').removeClass('active');
checkElement.slideUp('normal');
}
if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
$('#cssmenu ul ul:visible').slideUp('normal');
checkElement.slideDown('normal');
}
if($(this).closest('li').find('ul').children().length == 0) {
return true;
} else {
return false;
}
});
$(function() {
$('.menu-right').click(function () {
$('#css-menu').css({right:'0'});
});
$('.close-menu').click(function() {
$('#css-menu').css({right:'-400px'});
});
});
//]]>
</script>

OK giờ lưu lại và tận hưởng thành quả nhé, chúc các bạn thành công.