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

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é.

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

<nav id='menu'>
<input type='checkbox'/>
<label>&#8801;<span>Menu</span></label>
<ul>
<li><a href='MỤC 1' rel='nofollow' title="Mô tả">MeNu 1</a></li>
<li><a class='prett' href='search/label/Tên Label chính 1' title="Mô tả label chính 1">MeNu 2</a>
<ul class='menus'>
<li><a href='/search/label/Tên Label 2' title="Mô tả Lanel 2">Menu 2.1</a></li>
<li><a href='/search/label/Tên Label 3' title="Mô tả Lanel 3">Menu 2.2</a></li>
<li><a href='/search/label/Tên Label 4' title="Mô tả Lanel 4">Menu 2.3</a></li>
<li><a href='/search/label/Tên Label 5' title="Mô tả Lanel 5">Menu 2.4</a></li>
</ul>
</li>

<li><a class='prett' href='search/label/Tên Label chính 2' title="Mô tả label chính 2">MeNu 3</a>
<ul class='menus'>
<li><a href='/search/label/Tên Label 6' title="Mô tả Lanel 6">Menu 3.1</a></li>
<li><a href='/search/label/Tên Label 7' title="Mô tả Lanel 7">Menu 3.2</a></li>
<li><a href='/search/label/Tên Label 8' title="Mô tả Lanel 8">Menu 3.3</a></li>
<li><a href='/search/label/Tên Label 9' title="Mô tả Lanel 9">Menu 3.4</a></li>
</ul>
</li>

<li><a class='prett' href='search/label/Tên Label chính 3' title="Mô tả label chính 3">MeNu 4</a>
<ul class='menus'>
<li><a href='/search/label/Tên Label 10' title="Mô tả Lanel 10">Menu 4.1</a></li>
<li><a href='/search/label/Tên Label 11' title="Mô tả Lanel 11">Menu 4.2</a></li>
<li><a href='/search/label/Tên Label 12' title="Mô tả Lanel 12">Menu 4.3</a></li>
<li><a href='/search/label/Tên Label 13' title="Mô tả Lanel 13">Menu 4.4</a></li>
</ul>
</li>

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

Bước 3: Vào mục MẪU xem qua bên Điện thoại di động và chọn Tùy chỉnh

Check ngay nhé. Chúc các bạn thành công!
Nguồn : http://www.nhatthienkt.net