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*/
#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}
}
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óCode HTML responsive menu cho blogspot chuẩn HTML5
<nav id='menu'> <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%nhạ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=vn%7cen&amp;hl=en'); return false;' rel='nofollow' target='_blank' title='English'>Translate</a></li> </ul> </nav>Bước 4 : Lưu lại và xem kết quả
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 !
5 nhận xét trong bài "Responsive menu cho blogspot chuẩn HTML5 và CSS3"
Chào anh Phan Tuấn, anh có thể cho em hỏi về tên templates anh đang sử dụng không a?
Tạo Flat Tabbled Menu Cho Website
http://vnminhtriet.blogspot.com/2015/03/tao-flat-tabbled-menu-cho-website.html
Admin cho online mong được anh giúp em cái responsive đã mất ăn mất ngủ mà làm hoài ko được __ em đã làm giống như anh chỉ mà ko được .. nó cứ báo Không thân thiện với thiết bị di động
tại ๖ۣۜTài ๖ۣۜliệu ๖ۣۜmiễn ๖ۣۜphí
Xin cho tôi hỏi một câu nhé anh Tuấn!
Tôi làm như anh hướng dẫn, kết quả rất tốt với phần PC còn phần Mobile thi không được vậy tôi bị sai chỗ nào ạ
Cảm ơn AD nhé, áp dụng ngay cho thèn này luôn Thủ Thuật Hay , quá tuyệt
Cám ơn các bạn ghé thăm Blog Tuấn Phan !
Nhận xét để đóng góp ý kiến bài viết.
Vui lòng viết nhận xét có dấu.
Không dùng từ ngữ thô tục, chửi bậy.
Nhận xét chứa link spame sẻ bị xóa.
Tạm thời khóa comment ẩn danh do nhiều bạn lợi dụng spame.