[Tips] - Menu Responsive Blogspot

Như những bài trước mình cũng nói khá nhiều về Responsive cho các bạn và cũng có những bài hướng dẫn cách tích hợp Responsive cho blogspot. Hôm nay mình cũng nói sơ qua Responsive là giao diện mobile cho blogspot khi xem ở những loại màn hình khác nhau nó sẽ co giản hợp lý khá chuyên nghiệp.

Menu Responsive cũng tương tự như thế khi bạn tích hợp menu Responsive này thì khi xem trên desktop nó sẽ giản ra và khi xem mobi nó sẽ co lại trông rất chuyên nghiệp
Demo desktop

Demo mobile

Trông khá chuyên nghiệp đúng ko nào, thế thì mần ngay thôi.

Cách thêm menu Responsive vào blogspot

1. Thêm css

Chèn đoạn css sau trên thẻ </head> trong templates blogspot của bạn

<style> #menu {
background:#464646;
color:#eee;
height:35px;
}
#menu ul,
#menu li {
margin:0;
padding:0;
list-style:none;
}
#menu ul {
height:35px;
}
#menu li {
float:left;
display:inline;
position:relative;
font:bold 13px Arial;
}
#menu li a {
color:#ccc;
}
#menu a {
display:block;
line-height:35px;
padding:0 14px;
text-decoration:none;
color:#333;
}
#menu li:hover > a,
#menu li a:hover {
color:#fff;
}
#menu input {
display:none;
margin:0 0;
padding:0 0;
width:80px;
height:35px;
opacity:0;
cursor:pointer;
}
#menu label {
font:bold 30px Arial;
display:none;
width:35px;
height:36px;
line-height:36px;
text-align:center;
}
#menu label span {
font-size:13px;
position:absolute;
left:35px;
}
#menu ul.menus {
height:auto;
overflow:hidden;
width:180px;
background:#fff;
position:absolute;
z-index:99;
display:none;
border:1px solid #ccc;
border-top:none;
color:#333;
}
#menu ul.menus a {
color:#333;
}
#menu ul.menus li {
display:block;
width:100%;
font:12px Arial;
text-transform:none;
}
#menu li:hover ul.menus {
display:block;
}
#menu a.prett,
#menu a.trigger2 {
padding:0 27px 0 14px;
}
#menu li:hover > a.prett,
#menu a.prett:hover {
background:#fff;
color:#333;
}
#menu a.prett::after {
content:"";
width:0;
height:0;
border-width:6px 5px;
border-style:solid;
border-color:#eee transparent transparent transparent;
position:absolute;
top:15px;
right:9px;
}
#menu ul.menus a:hover {
background:#BABABA;
}
#menu a.trigger2::after {
content:"";
width:0;
height:0;
border-width:5px 6px;
border-style:solid;
border-color:transparent transparent transparent #eee;
position:absolute;
top:13px;
right:9px;
}
@media screen and (max-width:768px) {
#menu {
position:relative;
}
#menu ul {
background:#838383;
position:absolute;
top:100%;
right:0;
left:0;
z-index:3;
height:auto;
display:none;
}
#menu ul.menus {
width:100%;
position:static;
border:none;
}
#menu li {
display:block;
float:none;
width:auto;
text-align:left;
}
#menu li a {
color:#fff;
}
#menu li a:hover {
color:#333;
}
#menu li:hover {
background:#BABABA;
color:#333;
}
#menu li:hover > a.prett,
#menu a.prett:hover {
background:#BABABA;
color:#333;
}
#menu ul.menus a {
background:#BABABA;
}
#menu ul.menus a:hover {
background:#fff;
}
#menu input,
#menu label {
position:absolute;
top:0;
left:0;
display:block;
}
#menu input {
z-index:4;
}
#menu input:checked + label {
color:white;
}
#menu input:checked ~ ul {
display:block;
}
}
</style>

2. Hiển thị menu Responsive

Chèn đoạn code sau vào nơi cần thiển thị menu

<nav id="menu"><input type="checkbox" /> <label>≡Navigation</label> <ul> <li><a href="/">Home</a></li> <li><a href="#">Menu 1</a></li> <li><a class="prett" href="#">Drop Menu</a> <ul class="menus"> <li><a href="#">Drop Menu 1</a></li> <li><a href="#">Drop Menu 2</a></li> <li><a href="#">Drop Menu 3</a></li> </ul> </li> <li><a href="#">Menu 2</a></li> <li><a class="prett" href="#">Drop Menu 1</a> <ul class="menus"> <li><a href="#">Drop Menu 1</a></li> <li><a href="#">Drop Menu 2</a></li> <li><a href="#">Drop Menu 3</a></li> </ul> </li> <li><a class="trigger2" href="https://www.blogger.com/blogger.g?blogID=2676097042429235325#" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;amp;langpair=id%7cen&amp;amp;hl=en'); return false;" rel="nofollow" target="_blank" title="English">Translate</a></li> </ul> </nav>

Xong lưu mẫu của mình lại và kiểm tra thành quả của mình vừa làm được thôi nhé. Chúc các bạn thành công.

Bài Viết Cùng Chủ Đề

• Widget comments mới nhất cho blogspotWidget comments mới là một tiện ích phổ biến giúp bạn quản lý comments hiệu quả cho blogspot, khi có ai đó comments (bì ...
• [Tips] - Sticky menu kèm hộp tìm kiếm cho blogspotNói đến stick menu là chúng ta nói đến một menu ghim cố định trên top blog, nó giúp tiện lợi hơn khi chúng ta lăn thanh ...
• Làm sao để xây dựng Domain Authority, backlink tự nhiên? Kỹ năng xây dựng Domain Authority, Back link tự nhiên Ngoài làm tốt nội dung rồi và SEO được lên TOP thì seo offpage ...
• Kỹ Thuật Tối Ưu SEO Onpage Cho Blogspot Và Website Kỹ Thuật Tối Ưu SEO Onpage Cho Blogspot Và Website  từ A tới Z cho website và blogspot: Bao gồm những kỹ thuật tối ưu ...
• [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 ...