tạo Responsive Menu cho Blogger với dạng Dropdown

Tạo Responsive Dropdown Menu cho Blogger

Bước 1: Bạn truy cập blogger.com → Mẫu → Chỉnh sửa HTML, sau đó bạn chèn đoạn code sau vào trước thẻ đóng </head>

 <style type='text/css'>
.toggle,[id^=drop]{display:none}
nav{margin:0;padding:0;background-color:#16a085}
nav:after{content:"";display:table;clear:both}
nav ul{float:left;padding:0;margin:0;list-style:none;position:relative}
nav ul li{margin:0;display:inline-block;float:left;background-color:#16a085;box-shadow: inset 1px 0px 0px rgba(255,255,255,0.1), inset -1px 0px 0px rgba(0,0,0,0.1);}
nav a{display:block;padding:0 20px;color:#FFF !important;font:bold 14px Arial;line-height:45px;text-decoration:none}
nav ul li ul li:hover{background:#666}
nav a:hover{background-color:#666}
nav ul ul{display:none;position:absolute;top:45px}
nav ul li:hover > ul{display:inherit}
nav ul ul li{width:170px;float:none;display:list-item;position:relative}
nav ul ul ul li{position:relative;top:-45px;left:170px}
li > a:after{content:' \f0d7'; font-family:FontAwesome;}
li > a:only-child:after{content:''}
/* Responsive */
@media all and (max-width:768px){
nav{margin:0}
.toggle + a,.menu{display:none}
.toggle{display:block;background-color:#16a085;padding:0 20px;color:#FFF;font-size:16px;font-weight:bold;line-height:45px;text-decoration:none;border:none}
.toggle:hover{background-color:#666}
[id^=drop]:checked + ul{display:block}
nav ul li{display:block;width:100%}
nav ul ul .toggle,nav ul ul a{padding:0 40px}
nav ul ul ul a{padding:0 80px}
nav a:hover,nav ul ul ul a{background-color:#666}
nav ul li ul li .toggle,nav ul ul a{background-color:#666}
nav ul ul{float:none;position:static;color:#fff}
nav ul ul li:hover > ul,nav ul li:hover > ul{display:none}
nav ul ul li{display:block;width:100%}
nav ul ul ul li{position:static}
}
@media all and (max-width:330px){nav ul li{display:block;width:94%}
}
</style>

Bước 2: Bạn đặt đoạn code của menu vào vị trí phù hợp trên blog của bạn.

 <nav>
  <label for="drop" class="toggle">&#8801;  Menu</label>
  <input type="checkbox" id="drop" />
  <ul class="menu">
    <li><a href="/"><i class="fa fa-home fa-lg"></i></a></li>
    <li>
      <label for="drop-1" class="toggle">Service <i class="fa fa-caret-down"></i></label>
      <a href="#">Service</a>
      <input type="checkbox" id="drop-1"/>
      <ul>
        <li><a href="#">Service 1</a></li>
        <li><a href="#">Service 2</a></li>
        <li><a href="#">Service 3</a></li>
      </ul>
    </li>
    <li>
      <label for="drop-2" class="toggle">Portfolio <i class="fa fa-caret-down"></i></label>
      <a href="#">Portfolio</a>
      <input type="checkbox" id="drop-2"/>
      <ul>
        <li><a href="#">Portfolio 1</a></li>
        <li><a href="#">Portfolio 2</a></li>
        <li>
          <label for="drop-3" class="toggle">Works <i class="fa fa-caret-down"></i></label>
          <a href="#">Works</a>
          <input type="checkbox" id="drop-3"/>
          <ul>
            <li><a href="#">HTML/CSS</a></li>
            <li><a href="#">jQuery</a></li>
            <li><a href="#">Python</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li><a href="#">Contact</a></li>
    <li><a href="#">About</a></li>
  </ul>
</nav>

Các bạn lưu ý, tiện ích có sử dụng FontAwesome nhằm giúp Menu trở nên đẹp hơn. FontAwesome là các icon bạn nhé! Nếu như Template của bạn chưa có FontAwesome, hãy chèn đoạn code sau vào trước thẻ đóng </head>. Còn nếu bạn không muốn sử dụng font này, hãy để lại comments mình sẽ giúp bạn sửa lại code menu một chút.

 <script type='text/javascript'>
//<![CDATA[
//CSS Ready
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css");
//]]></script>

Bạn có thể xem thêm các Widget Blogger trên blog của mình nhé!