Kênh Giải Trí Việt: June 2015

Việc Google thay đổi thuật toán mới làm ảnh hưởng đến khá nhiều blog và website, theo đó các site phải tương thích với thiết bị di động mới tốt cho SEO, hôm nay mình hướng dẫn làm menu trên di động cho blogspot.

Hướng dẫn tạo menu trên di động cho blogspot

Demo menu trên di động blogspot

Cách làm:

Bước 1: Vào Mẫu => Chỉnh sửa HTML => Ctrl+F (nội tuyến) tìm thẻ <head> và dán đoạn code sau vào sau nó:

<meta content='width=device-width, initial-scale=1' name='viewport'/>

Bước 2: Chèn CSS sau vào trước thẻ </head>

<style type='text/css'> /* 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/AVvXsEj0fZud0P7_ICazVGT60jbWuCdGgsniyO_kIk_uSep5uwLoyCZRMiGHYpNPPv1lQTi7KSzrl5Tvb3mn41q_aqEubKzVsUlVfGIlW-Wp8uhUbKkpeN48ksvaLLgMAJsm7P0dC5kF16xrg86z/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/AVvXsEgoxXvD6idw8PvK6Uw_F9LrEHagaFkZsp126N09fT35QoYQuPqBrB0ezC1j-PYovWWZSwpGwoh89UKDOEJPyzrAtXVWcZJws1CCtFN-kNZFPZOXB9WJnn5qlTzuOxlrzsqHpajd81UVYHDX/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/AVvXsEhVmFAiyLOMD6D0YmcbuR4fTv_RXysCN67JNLUsH7mkaAONbXPUUkW3uxMyBbjp0Yogd1lD7oYt0QquWg1EJxGyZJ49b2yxrK01PnuJ6GAgFp41m9T-USd7tdaurbnHpdafag60DbeeOXWf/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>

Ở đây mình chỉ chỉnh CSS đến @media all and (max-width: 800px) bạn nào muốn trau chuốt hơn thì có thể chỉnh bé hơn như 320px, 480px, 768px, ...

Lưu ý nữa là menu chính ở computer thì các bạn nên ẩn đi, ví dụ nếu @media all and (max-width: 800px) thì menu chính ẩn đi phải thêm đoạn code sau:

@media all and (min-width: 801px) {
#menu-computer {display:none;}
}

Bước 3: Chèn đoạn code sau vào trong thẻ body, tại vị trí bạn muốn hiển thị:

<nav class='nav right'>
  <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ước 4: Lưu lại là xong

Share123.vn chúc các bạn thành công. :))

Friday, June 5, 2015

Hướng dẫn tạo menu trên di động cho blogspot