Một template responsive không thể thiếu menu responsive đây là bài viết mình hướng dẫn các bạn tạo responsive dropdown menu cho blogspot/blogger chuẩn CSS3 và HTML5.
Giao diện PC
Giao diện điện thoại, Máy tính bảng...
Để tiến hành tạo responsive menu cho blogspot chúng ta cần đoạn CSS3 và 1 đoạn HTML khi chèn trong template của mình
Bước 1: Đăng nhập vào tài khoản blogger.com
Bước 2: Chọn mẫu
Bước 3: Chỉnh sửa HTML
Trước khi chèn code vào template của chúng ta tắt trình duyệt mặc định của blogger khi khi cập bằng điện thoại nhé.
Sau khi tắt trình trình duyệt mặc định của blogger xong các bạn click vào chỉnh sửa HTML nhấn Ctrl+F tìm đến thẻ ]]></b:skin> và chèn đoạn CSS3 bên dưới trên nó
Giao diện PC
Responsive menu cho blogspot chuẩn HTML5 và CSS3
Responsive menu cho blogspot củng được khá nhiều các blogger viết qua ở bài này mình có tích hợp thêm google translate tuy đơn giản nhưng củng khá chuyên nghiệp.Để tiến hành tạo responsive menu cho blogspot chúng ta cần đoạn CSS3 và 1 đoạn HTML khi chèn trong template của mình
Bước 1: Đăng nhập vào tài khoản blogger.com
Bước 2: Chọn mẫu
Bước 3: Chỉnh sửa HTML
Trước khi chèn code vào template của chúng ta tắt trình duyệt mặc định của blogger khi khi cập bằng điện thoại nhé.
Sau khi tắt trình trình duyệt mặc định của blogger xong các bạn click vào chỉnh sửa HTML nhấn Ctrl+F tìm đến thẻ ]]></b:skin> và chèn đoạn CSS3 bên dưới trên nó
CSS3 cho Responsive menu cho blogspot
/*dropdown menu*/Sau khi chèn CSS xong các bạn tìm đến thẻ <body> hoặc </header> rồi chèn code HTML bên dưới nó
#menu{background:#098047;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;box-shadow: inset 1px 0px 0px rgba(255,255,255,0.1), inset -1px 0px 0px rgba(0,0,0,0.1);}
#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:#06703D;}
#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}
/*Responsive menu*/
@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}
}
Code HTML responsive menu cho blogspot chuẩn HTML5
<nav id='menu'>Bước 4 : Lưu lại và xem kết quả
<input type='checkbox'/>
<label>≡<span>Menu</span></label>
<ul>
<li><a href='http://feeds.feedburner.com/tuanphanblog' rel='nofollow' title="RSS">RSS</a></li>
<li><a class='prett' href='search/label/Chia%20sẻ' title="Chia sẻ thủ thuật tiện ích blogspot, Microsoft Word 2010, CorelDraw">Chia sẻ</a>
<ul class='menus'>
<li><a href='/search/label/Template' title="Giao diện cho miễn phí đẹp cho blogspot">Template</a></li>
<li><a href='/search/label/HTML5' title="Tiện ích và template chuẩn HTML5">HTML5</a></li>
<li><a href='/search/label/Responsive' title="Giao diện thay đổi theo trình duyệt">Responsive</a></li>
<li><a href='/search/label/CSS' title="Thiết kế chuẩn CSS3">CSS</a></li>
<li><a href='/search/label/jQuery' title="jQuery">jQuery</a></li>
<li><a href='/search/label/CorelDraw' title="Học CorelDraw Online">CorelDraw</a></li>
<li><a href='/search/label/Microsoft%20Office' title="Học Microsoft%20Office Online">Microsoft Office</a></li>
</ul>
</li>
<li><a href='/p/sitemap.html' title="Sitemap">Sitemap</a></li>
<li><a class='prett' href='/search/label/Giải%20trí' title="Chuyên mục giải trí chống xtress">Giải trí</a>
<ul class='menus'>
<li><a href='/search/label/Hài%20kịch' title="Hài kịch">Hài kịch</a></li>
<li><a href='/search/label/Người%20Bí%20Ẩn' title="Người Bí Ẩn">Người Bí Ẩn</a></li>
<li><a href='/search/label/Phim%20ngắn' title="Phim ngắn">Phim ngắn</a></li>
<li><a href='/search/label/Âm%20nhạc' title="Âm nhạc">Âm nhạc</a></li>
</ul>
</li>
<li><a href='/search/label/Ảnh%20đẹp' title="Thư viện ảnh đẹp và hình nền HD">Ảnh đẹp</a></li>
<li><a class='trigger2' href='#' onclick='window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=vi_VN%7cen&amp;hl=en'); return false;' rel='nofollow' target='_blank' title='English'>Translate</a></li>
</ul>
</nav>
Lưu ý:
- Thay Label phù hợp với blog của bạn
- Thêm giá trị %20 cho label khi có 2 cụm từ ( ví dụ như Ảnh đẹp thì thay nó thành thế này /search/label/Ảnh%20đẹp) để chuẩn HTML5 nhé
Chúc các bạn thành công !