Thêm menu responsive cho blogspot
1. Đăng nhập vào blogspot
Vào phần quản trị Blogger > Templates (mẫu) > Chỉnh sửa HTML
2. Chỉnh sửa mẫu
Bước 1 : Tìm đến thẻ <head> và thêm đoạn code sau dưới nó. Nếu có rồi thì bỏ qua bước này
<meta content='width=device-width, initial-scale=1' name='viewport'/>Bước 2. Tìm đến thẻ </head> và thêm đoạn css sau trên nó
<style type='text/css'>Bước 3. Tùy chỉnh xem menu trên di động
/* MENU TREN MOBILE */
a.nav {
display: block;
margin-bottom: 20px;
padding: 20px;
background-color: #dce6f0;
color: #646464;
text-align: center;
}
a.nav:hover {
background-color: #c8d2dc;
}
/* the breakpoint same as above */
@media all and (min-width: 480px) {
a.nav-toggle {
display: none;
}
}
.nav {
margin: 20px 0;
}
.nav ul {
margin: 0;
padding: 0;
}
.nav li {
margin: 0 5px 10px 0;
padding: 0;
list-style: none;
display: inline-block;
*display:inline; /* ie7 */
}
.nav a {
padding: 3px 12px;
text-decoration: none;
color: #999;
line-height: 100%;
}
.nav a:hover {
color: #000;
}
.nav .current a {
background: #999;
color: #fff;
border-radius: 5px;
}
/* right nav */
.nav.right ul {
text-align: right;
}
/* center nav */
.nav.center ul {
text-align: center;
}
@media screen and (max-width: 800px) {
.nav {
}
.nav ul {
width: 180px;
padding: 5px 0;
position: absolute;
top: 0;
left: 0;
border: solid 1px #aaa;
background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNieF_4pF21D723MRBe0vBK3umdoY4Md0HJ7OJIDAN5TVeGgm_4s-Xs29uZDSgPvLFukH_ySV_FAzWiILi4nc5PkSy7f7wmJJOcgV7WMrnoAhJEikcUDNHSFBgyuiH1ZbBbG8Zqg7vl5nv/s1600/icon-menu.png) no-repeat 10px 11px;
border-radius: 5px;
box-shadow: 0 1px 2px rgba(0,0,0,.3);
}
.nav li {
display: none; /* hide all li items */
margin: 0;
}
.nav .current {
display: block; /* show only current li item */
}
.nav a {
display: block;
padding: 5px 5px 5px 32px;
text-align: left;
}
.nav .current a {
background: none;
color: #666;
}
/* on nav hover */
.nav ul:hover {
background-image: none;
}
.nav ul:hover li {
display: block;
margin: 0 0 5px;
}
.nav ul:hover .current {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9iObjpg-nCS-E2MqOR3Hz7gJnzt4BvbRieA-GV2EvgJ5c8zyuS06qeuiUVCzMrzAdSWwp9O1fmZHtQBKZlnD8EOCk9lEcZmFniPdStdAt-ynl_pT0-o2-VSGii4cXAtLYD_s44QpOmHuQ/s1600/icon-check.png) no-repeat 10px 7px;
}
/* right nav */
.nav.right ul {
right: 1%;
top: 1%;
left: auto;
}
/* center nav */
.nav.center ul {
left: 50%;
margin-left: -90px;
}
}
@media all and (min-width: 801px) {
.nav {
display: none;
}
}
@media all and (max-width: 800px) {
#outer-wrapper {
width: 98%;
margin: 0 1%;
}
#main-wrapper,#header-wrapper {
width: 100%;
min-height: 50px;
}
#header-wrapper {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRpM5OJwyRTb3huubU9lSFfVOqvmeodCjfEWa-nx3gRbjbPf1SIIVKM33axcPte2vtJzoGClrR0mWDUv1brbbBkFm5K4N0knfiuEDIc4w9q9da3fbAUapHKYCVRPjhaW7sk404r_mkcxqw/s1600/logo-gamuda-gardens2.png);
background-repeat: no-repeat;
}
#footer,#rsidebar-wrapper {
width: 100%;height: auto;
float: none;
margin: 0;
padding: 0px;
}
div#Header1,#lsidebar-wrapper,div#HTML92,.span-24, div.span-24 {
display: none;
}
}
</style>
@media all and (min-width: 801px) {Giải thích đoạn code trên : đoạn code này có nghĩa là khi xem blog ở màn hình có kích thước là 801px thì menu trên desktop sẽ ẩn đi và hiện menu ở di động. Nếu bạn thích thêm các bạn màn hình khác thì tự thêm nhé, mình chỉ làm ví dụ.
#menu-computer {display:none;}
}
Bước 4 : Chèn đoạn code sau ở nơi cần hiển thị menu
<nav class='nav right'>Lưu mẫu lại và lôi điện thoại ra test ngay và luôn nào. Chúc các bạn thành công.
<ul>
<li class='current'><a href='#'>MENU</a></li>
<li><a expr:href='data:blog.homepageUrl'>Trang chủ</a></li>
<li><a href='link bai viet 1'>Menu 1</a></li>
<li><a href='link bai viet 2'>Menu 2</a></li>
<li><a href='link bai viet 3'>Menu 3</a></li>
<li><a href='link bai viet 4'>Menu 4</a></li>
</ul>
</nav>
Kho Template Blogspot Responsive 2016
http://share123blog.blogspot.com
Free download responsive premium blogger template
Icon CommentsIcon Comments