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/AVvXsEh7nUeXHAf_iReOhOh15wRPuffGzVh5EWTo0N7hGH2Ca-HlLwSvC516eZMiwcOTWcumDOKM-DixDtfIO_51ii6w8-spsxU8bOfsgkKLfbfjk4iqJwNrPIF-JKkZrhL30VBRZX_Nnmum9V_z/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/AVvXsEgfQYpFXyt7MXThqWnqQm_zssPDl8qY9Uh8Bpzyjw_tHu21hFDWSXx3HvOYf9v9TOQyicUIZbC8S2trSnHikS35GH8JM1oCXM7zOlJuUSyve1YjZvmMoRuBXE1UlnIa4ZyOwAA20B0L6fiM/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/AVvXsEhxqC57o5MH4e03FDGYTtB13Cy31g0GEChOa76oi63CLo_7gPi4nLXzBZhek31iaGIbMKdgAwT850iCgf8AT0q-SzKvpT_6MWLJjKrgCEcuNfoj002nNSGbrmNzfQSnpNSFB6VHslUrgi5r/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>
Icon CommentsIcon Comments