[Tips] - Menu responsive cho blogspot
Responsive là điều chỉnh blogspot phù hợp khi xem trên thiết bị di động. Menu responsive có nghĩa là menu khi xem blogspot trêm mobi được thu gọn trông rất đẹp.
Bước 4 : Chèn đoạn code sau ở nơi cần hiển thị menu
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/AVvXsEjpcbwqgBE5FlJYzcMpeNc08DP8p-gnrM77P2FiWLIU1r4ke5Ny8CH3KmVZPdDzqPEwelltnAF9xxo_UPeq-YlQMWT8AZ_4B_VudVgw7M05gdzomXttRmIwnzqusq5XMNJs0awunI4J3QzG/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/AVvXsEiqfuHWxlcBxA2v1ouxv9gRkTSFDFox80hrzSotkqVay4C3lsXDb6r2_sKQzmA4Z-8evZ8RV-_lQHscfiXnT9IfjoNaXnwqQHWyIlpmPZT1N8jyVhv8yuGcvDkGkm3x5fHptPFPvRQ3GFDq/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/AVvXsEgn5SF-C9Ut19R1Fuop8iycBCrN5Ssrxm8S0LtS-ED79JHWqW229HwEsMTrj6UIP7aurFYMfnaovHYfKbD-itQGxx6ZxZWsk91wcWAZQsxxWhPohq6ibDdNnmUuOMI_v4umkJx2dX0URpqO/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>
