• KIẾN THỨC SEO
  • BLOG SERIER
  • SEO BLOGSPOT
  • TEMPLATE BLOGSPOT
  • ICON FACEBOOK
MENU

Hoc Tieng Trung Khamphablog.com

Menu
  • Home
  • #Web Tools
    • Giải Mã
    • Mã Hóa
    • Chuyển đổi code
    • Lấy mã màu
  • Liên Hệ
  • #Dịch Vụ
    • Rip Blogspot
    • Rip Wordpress
  • Site map
  • #Giới Thiệu
    • Admin
    • Blog
  • Liên Kết
  • Hỏi Đáp
Trang Chủ Blog Series Blog-Tips Menu Thu-Thuat [Tips] - Menu Responsive Blogspot

[Tips] - Menu Responsive Blogspot

Đỗ Mạnh Hồng June 13, 2015 Blog Series Blog-Tips Menu Thu-Thuat
Đỗ Mạnh Hồng
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ủ Đề

  • Chuyển hướng link trong blogpsot (Redirect 301)Chuyển hướng link hay còn gọi là thủ thuật seo Redirect 301. Ứng dụng khi dùng Redirect 301 cho Seoer: Đó là khi muốn c ...
  • Khắc phục lỗi Fpt chặn blogspot trong ngày 2/9Nhìn chung Việt Nam quá khét khe với blogspot hết VNPT chặn blogspot giờ đến nhà mạng FPT chặn blogspot. Nhiều bạn nghĩ ...
  • 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] - Câu hỏi tại sao của newbi về seo blogspot Có nhiều bạn hỏi mình tại sao ? Sao em làm seo blogspot theo cách của anh mà 1 tuần, 2 tuần rồi mà không thấy lên top ...
  • Cách để bạn bắt đầu với một blog miễn phíTôi rất vui mừng khi nghe điều này mà bạn đang bắt đầu blog của riêng bạn nhưng không may, bạn không biết cách để bạn b ...
Next
« Prev Post
Previous
Next Post »
Penulisan markup di komentar
  • Untuk menulis huruf bold gunakan <strong></strong> atau <b></b>.
  • Untuk menulis huruf italic gunakan <em></em> atau <i></i>.
  • Untuk menulis huruf underline gunakan <u></u>.
  • Untuk menulis huruf strikethrought gunakan <strike></strike>.
  • Untuk menulis kode HTML gunakan <code></code> atau <pre></pre> atau <pre><code></code></pre>, dan silakan parse kode pada kotak parser di bawah ini.

Icon CommentsIcon Comments

:)
:(
=(
^_^
:D
=D
=)D
|o|
@@,
;)
:-bd
:-d
:p
:ng
Đăng Nhập để bình luận chém gió.
Subscribe to: Post Comments (Atom)

Blog Tự Học Seo Online

Blog ra đời dưới sự thành lập của Đỗ Mạnh Hồng với mục đích chia sẻ những kiến thức giúp bạn tự học seo blog online chạy trên nền tản blogspot và website, cùng với đó chúng tôi còn chia sẻ tới các bạn những templates blogspot chuẩn seo, những thủ thuật đơn giản giúp bạn thao tác dễ dàng hơn trong phần quản trị Blogger. Với tiêu chí muốn gởi đến các bạn "SEO TỪ KHÓA LÊN TOP - KHÓ MÀ DỄ". Hãy cũng chúng tôi trao đổi và mong muốn được hỗ trợ các bạn nhiều hơn nữa.


  • Popular

Popular

SUBSCRIBE TO OUR NEWSLETTER

Copyright © 2015 Khamphablog.com All Right Reserved Tự học seo blog online cho người mới bắt đầu