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>
Bài Viết Cùng Chủ Đề
[Tips] - Thủ thuật khống chế css và js mặc định của blogspotCss mặc định của blog là những css khi bạn search với PageSpeed Insights thì nó sẽ báo chặn hiển thị trên bl ... 
[Tips] - Làm đẹp widget nhãn (label) blogpsotNhãn hay còn gọi là Label trong blogspot là một phần không thể thiếu trong blogpsot nhằm giúp blogspot tăng pagera ... 
[Tips] - Làm sao để thêm facebook comments vào blogspotFacebook là mạng xã hội lớn rất tốt cho việc seo blogspot, việc thêm facebook comments vào blogspot là rất cần thiết và ... 
Vì sao blogspot không nhận thumbnail khi share linkThumbnail là hình đại diện của một bài viết hay một trang web nó mang tính chất hiển thị nhằm mô tả cho bài viết hay mộ ... 
[Tips] - Hướng dẫn tối ưu blogspot chuẩn PageSpeed InsightsPageSpeed Insights là công cụ check tối ưu cho blogspot và website, với công cụ này khi bạn check với website mà tầm 80 ...
Icon CommentsIcon Comments