Tạo menu Responsive hoàn toàn bằng CSS cực nhẹ và đẹp cho Blogger/Blogspot


Chào các bạn, hôm nay mình sẽ viết bài hướng dẫn các bạn Tạo 1 menu Responsive hoàn toàn bằng CSS cực nhẹ và đẹp cho blogger nhé.

Hướng dẫn cách làm:

Bước 1: Bạn đăng nhập Blogger -> Mẫu -> tìm đến thẻ ]]></b:skin và dán đoạn CSS sau lên phía trên
#navigation{width:100%;max-width:1024px;height:30px;text-transform:uppercase;font-size:100%;background:#359131;color:#000}
#navigation ul.menus{background:#359131;height:auto;overflow:hidden;position:absolute;z-index:99;display:none}
#navigation a{display:block;line-height:30px;padding:0 10px 0;text-decoration:none;color:#fff;font-weight:600;font-size:12px;border-right: 1px solid #3eaa3a; transition: .4s}
#navigation ul,#navigation li{margin:0 auto;padding:0;list-style:none}
#navigation ul{height:30px;width:100%;max-width:1024px}
#navigation li{float:left;display:inline;position:relative}
#navigation input{display:none;margin:0;padding:0;width:100%;height:30px;opacity:0;cursor:pointer}
#navigation label{display:none;width:35px;height:31px;line-height:31px;text-align:center}
#navigation label span{font-size:16px;position:absolute;left:35px}
#navigation ul.menus li{display:block;width:100%;text-transform:none;text-shadow:none;border-bottom:1px dashed #31AFDB}
#navigation ul.menus a{color:#FFF;line-height:35px}
#navigation li ul{background:#0F5341;margin:0;width:180px;height:auto;position:absolute;top:30px;left:0;z-index:10;display:none;border-bottom:3px solid #16a085}
#navigation li a:hover{background:#3eaa3a}
#navigation li li{display:block;float:none}
#navigation li ul ul{left:100%;top:0}
#navigation li li > a{font-size:12px;display:block;padding:0 10px;margin:0;line-height:24px;text-decoration:none;color:#fff;border-bottom:1px dotted #777}
@media screen and (max-width:960px) {
#search-box{display:block!important}
.search,#hide-mb{display: none;}
}
@media screen and (max-width:800px) {
#navigation{position:relative}
#navigation ul{background:#359131;position:absolute;top:100%;left:0;z-index:3;height:auto;display:none}
#navigation ul.menus{width:100%;position:static;padding-left:20px}
#navigation li{display:block;float:none;width:auto}
#navigation input,#navigation label{position:absolute;top:0;left:0;display:block}
#navigation input{z-index:4}
#navigation input:checked + label{color:#fff}
#navigation input:checked ~ ul{display:block;width:100%}
#navigation li:hover > ul{width:100%}
}
Bước 2: Bạn dán HTML menu vào nơi muốn hiển thị, thường là ở phần header blog !
<nav id='navigation' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement'>
<input type='checkbox'/>
<label><i class='fa fa-bars' style='font-size:16px;color:#fff'></i></label>
<ul>
<li><a href='/'><i class='fa fa-home'></i> Trang chủ</a></li>
<li><a href='/search/label/Facebook?&max-results=10'><i aria-hidden='true' class='fa fa-facebook'></i> Thủ thuật Facebook</a></li>
<li><a href='/search/label/Blogger?&max-results=10'><i aria-hidden='true' class='fa fa-code'></i> Thủ thuật Blogger</a></li>
<li><a href='/search/label/Blogger%20fix?&max-results=10'><i aria-hidden='true' class='fa fa-wrench'></i> Blogger fix</a></li>
<li><a href='/search/label/Template%20Blogger?&max-results=10'><i aria-hidden='true' class='fa fa-star'></i> Template Blogger</a></li>
<!-- Search -->
<div class='search' id='data-search'> <a class='search-btn' href='#search'> <i class='fa fa-search'/> <i class='fa fa-times'/> </a> <div class='unstyled-list search-menu'> <div id='search-box-pc'> <form action='/search' id='search-form-pc' method='get' target='_top'> <input id='search-text-pc' name='q' placeholder='Bạn muốn tìm gì...' type='text'/> </form> </div> </div> </div>
<script type='text/javascript'>
(function(){window.Menu=function(){function a(a){this.nav=a,this.menubtn=$(".search-btn",this.nav),this.menubtn.on("click",function(a){return function(b){return a.nav.toggleClass("active"),!1}}(this))}return a.init=function(){return $("#data-search").each(function(b,c){return new a($(c))})},a}(),$(function(){if($("#data-search").length)return Menu.init()})}).call(this);
</script>
</ul>
</nav>
Ưu điểm của menu này: Nhẹ, không dùng js nên không ảnh hưởng đến việc load,...
Chúc bạn thành công!

5
4
3
2
1

14 nhận xét:

  1. Cướp cmt đầu :3 Mà bài viết hay :v

    Trả lờiXóa
  2. Để bữa nào rảnh t làm lại cái menu này, k phải dùng cái hôm trước ông share t vì cái kia có js nên bỏ bớt js đi tí nào hay tí đó.

    Trả lờiXóa
    Trả lời
    1. Uhm đúng rồi k cần sub menu cx đc

      Xóa
    2. Ừ, t k làm submenu mà. Nhưng chắc để thư thư đã vì phải chỉnh khá nhiều thứ.

      Xóa
  3. Bước 2 dán thẻ đấy ở đâu ạ ?

    Trả lờiXóa
    Trả lời
    1. Muốn nó hiện chỗ nào thì dán chỗ đó (thường là phần header của blog)

      Xóa
  4. Vẫn chưa hiểu cái nút Wide là cái gì :v

    Trả lờiXóa
  5. Demo đâu bro ? Không có demo link thì phải demo ảnh chứ.

    Trả lờiXóa
  6. Từ nhiên ra 1 loạt bài cái im hơi lặng tiếng luôn :v

    Trả lờiXóa

» Hướng dẫn nhúng hình ảnh: [img]http://domain.com/image.png[/img]
» Tham trang khảo ảnh động cực cute: Qoobee
» Hướng dẫn nhúng link trang web: <a href="url" rel="nofollow" target="_blank">Link</a>
» Không chửi tục, nói bậy, quảng cáo thông qua khung Comment.
» Không spam link, chia sẻ các link không liên quan đến bài viết.
» Không xuyên tạc, bôi nhọ tổ chức hay cá nhân nào.
» Mọi bình luận sai nội quy sẽ bị xóa mà không cần báo trước.

Group giao lưu, giải đáp và chia sẻ kinh nghiệm blogspot - blogger :

  • Kích hoạt giao diện tối
  • Giao diện tối giúp bạn nhìn vào ban đêm, làm dịu mắt và tránh căng thẳng khi phải nhìn vào màn hình sáng quá nhiều.

    Đếm ngược thời gian đến tết Kỷ Hợi 2019