Tạo menu thân thiện và đẹp giao diện di động cho Blogspot

7 Tháng Mười Một, 201514 Tháng Tư, 2018 Nhiep Anh

Nhatthienkt.net – Tìm hiểu ở một số trang web viết bởi mã nguồn Blogger trên thiết bị di động lướt rất mượt và đẹp. Đặc biệt Menu CSS rất tinh tế và dể sử dụng. Nếu bạn là người đam mê Blogger – Blogspot thì Menu đẹp là việc làm đầu tiên.

Bài viết này bởi nhatthienkt tuy nhiên code bởi tác giả khác. Thấy hay và chia sẻ, các bạn không thắc mắc nhé.

Tạo menu thân thiện và đẹp giao diện di động cho Blogspot

Xem trước mẫu

– Đây là giao diện Desktop của MENU

– Đây là giao diện trên thiết bị di động (Điện thoại, Ipaid,..)

và chi tiết hơn như hình dưới

Bạn có thể xem Demo trực tiếp tại Web của mình
Giao diện Desktop www.nhatthienkt.net
Giao diện Mobile: www.nhatthienkt.net?m=1

Hướng dẫn thực hiện

Bước 1: Truy cập vào Bảng điều khiển Blogger

– Tìm đến đoạn ]]></b:skin>

Và chèn code bên dưới lên trên nó

/*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} }

Bước 2: Tìm đến đoạn </header>

Và chèn ngay sau nó đoạn code Menu

</ul>
</nav>

Chú ý là Tên Label phải được viết chuẩn HTML5
Ví dụ: Bạn có một Nhãn tên là Góc giải trí thì bạn phải viết thành Góc%20Giải%20trí tức là ta thêm %20 vào chỗ khoản trắng.
<li><a class=’prett’ href=’search/label/Góc%20Giải%20trí‘ title=”Chuyên mục giải trí”>Góc Giải trí</a>
<ul class=’menus’>
<li><a href=’/search/label/Th%E1%BB%A7%20Thu%E1%BA%ADt%20Windows%207′ title=”Phim hay tổng hợp”>Phim hay</a></li>
<li><a href=’/search/label/Test%20IQ’ title=”Kiểm tra IQ”>Test IQ</a></li>
<li><a href=’/search/label/Hình%20ảnh’ title=”Chia sẻ hình ảnh vui”>Hình ảnh vui</a></li>
</ul>

</li>