Tạo menu dạng Material Design với hiệu ứng tuyệt đẹp cho Blogger

#Thủ Thuật #Windows #Blogger #Facebook

Tạo menu dạng Material Design với hiệu ứng tuyệt đẹp cho Blogger

Share:
Chào các bạn, trả lời yêu cầu của một bạn yêu cầu mình chia sẻ menu bên góc phải thì bài viết hôm nay mình sẽ hướng dẫn các bạn chèn menu đấy vào Blogger.
Đây là một menu dạng material design tuyệt đẹp với phong cách đóng/mở dạng circle. Menu này hoàn toàn sử dụng CSS nên sẽ không ảnh hưởng đến tốc độ cũng như sẽ không xung đột với bất cứ thứ gì khác!

Các bước thực hiện

Bước 1. Đăng nhập Blogger ➔ Chỉnh sửa HTML.
Bước 2. Chèn đoạn CSS dưới vào trước thẻ ]]></b:skin> trong mẫu.
label .hamburger{position:absolute;top:135px;left:50px;width:30px;height:4px;background:#666;display:block;-webkit-transform-origin:center;transform-origin:center;-webkit-transition:.5s ease-in-out;transition:.5s ease-in-out}
label .hamburger:after,label .hamburger:before{-webkit-transition:.5s ease-in-out;transition:.5s ease-in-out;content:&quot;&quot;;position:absolute;display:block;width:100%;height:100%;background:#666}
label .hamburger:before{top:-10px}
label .hamburger:after{bottom:-10px}
label input{display:none}
label input:checked + .menu{box-shadow:0 0 0 100vw #FFF,0 0 0 100vh #FFF;border-radius:0}
label input:checked + .menu .hamburger{-webkit-transform:rotate(45deg);transform:rotate(45deg)}
label input:checked + .menu .hamburger:after{-webkit-transform:rotate(90deg);transform:rotate(90deg);bottom:0}
label input:checked + .menu .hamburger:before{-webkit-transform:rotate(90deg);transform:rotate(90deg);top:0}
label .menu{position:fixed;right:-100px;top:-100px;z-index:100;width:200px;height:200px;background:#FFF;border-radius:50%;-webkit-transition:.5s ease-in-out;transition:.5s ease-in-out;box-shadow:0 0 0 0 #FFF,0 0 0 0 #FFF;cursor:pointer}
label ul{z-index:999;width:700px;max-width:100%;position:fixed;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);opacity:0;visibility:hidden;-webkit-transition:.5s ease-in-out}
  label ul li {list-style: none; width: 50%; float: left;}
label a{padding:0 0 1em 0; display: block; color: #666; font: 400 20px &quot;Roboto Slab&quot;; text-transform: capitalize; text-decoration: none; text-align: left;transition:1s ease-out}
  label a:hover,label a:focus{color:#ce8342}
label input:checked + .menu + ul{opacity:1;visibility:visible}
  label ul li img {position:relative;top:5px;margin:0 6px 0 0;width:25px;height:25px;border-radius:100%}
Bước 3. Chèn đoạn code bên dưới vào sau thẻ <body> hoặc trước thẻ </body> trong mẫu.
<label>
  <input type='checkbox'>
  <span class='menu'>
    <span class='hamburger'/></span>
  </input>
  <ul>
  <li><a class='bsw_cate' href='//bacsiwindows.com/p/about.html' itemprop='url' title='Giới thiệu về admin'><img src='//2.bp.blogspot.com/-K7fhgUw7iFQ/WFfTzbq8ieI/AAAAAAAABzY/CyJn6JRvYwoOx7bVf6qr218QlGPfXlQcwCLcB/s1600/gioi-thieu-about-us.png'/><span itemprop='name'>Giới thiệu</span></a></li>
  <li><a class='bsw_cate' href='//bacsiwindows.com/p/contact.html' itemprop='url' title='Liên hệ/góp ý/báo lỗi'><img src='//1.bp.blogspot.com/-lFe0RDSnmQ8/WFfTzjjDEEI/AAAAAAAABzk/9KXmoh_lo60mfkiiuDmq1cmnp-OZjXYqwCLcB/s1600/lien-he.png'/><span itemprop='name'>Liên hệ - báo lỗi</span></a></li>
  <li><a class='bsw_cate' href='//bacsiwindows.com/p/comments.html' itemprop='url' title='Bình luận mới nhất'><img src='//4.bp.blogspot.com/-TyrYKP4hEu8/WH3ythnQkOI/AAAAAAAACW4/aYgMbpDEJ3EUjmdQQbc_TF5JlGnOWt7ZwCLcB/s1600/recent-comments-icon----blogttcn-blogspot-com.jpg'/><span itemprop='name'>Bình luận mới nhất</span></a></li>
  <li><a class='bsw_cate' href='//bacsiwindows.com/p/noi-quy.html' itemprop='url' title='Một số nội quy về bình luận trên blog'><img src='//4.bp.blogspot.com/-8_UI1izaIbM/WFfT0F5dPeI/AAAAAAAABzo/uqTNgqpIoTwiHaxBG0UbfKrm9UlsrKh0QCLcB/s1600/luu-y.png'/><span itemprop='name'>Một số nội quy</span></a></li>
  <li><a class='bsw_cate' href='//bacsiwindows.com/p/ma-hoa-code.html' itemprop='url' title='Mã hóa code HTML'><img src='//2.bp.blogspot.com/-ca0eVW2nE1Y/WFfT0CDqzgI/AAAAAAAABzs/cM9IFmykWD0pDOvBpqSI5pybEIHFg_KoACLcB/s1600/ma-hoa-code.png'/><span itemprop='name'>Mã hóa code</span></a></li>
  <li><a class='bsw_cate' href='//bacsiwindows.com/ps' itemprop='url' target='_blank' title='Chỉnh sửa ảnh - Photoshop Online miễn phí'><img src='//3.bp.blogspot.com/-Ec7Cg8qFIKU/WFfT1V62KxI/AAAAAAAAB0U/2qu2g6z-RhcOKhC767gEsDPa2NAwWZkzACLcB/s1600/thu-thuat-photoshop.png'/><span>Photoshop Online</span></a></li>
  <li><a class='bsw_cate' href='//bacsiwindows.com/p/nen-css.html' itemprop='url' title='Nén/rút gọn CSS'><img src='//2.bp.blogspot.com/-Z97zrwW-6BY/WFfT0Jli1uI/AAAAAAAABzw/wEhsENbDw0QmuKs5Phxrg4ZvOxsp7nZtgCLcB/s1600/nen-css.png'/><span itemprop='name'>Nén CSS</span></a></li>
<li><a class='bsw_cate' href='/search/label/Thủ Thuật Blogger' itemprop='url' title='Thủ thuật Blogger/Blogspot'><img src='//4.bp.blogspot.com/-7m7w1GyVFAE/WFfTzZCbkAI/AAAAAAAABzU/V2_aMSJejlwHAvcUMAToB9-koKhZqZragCLcB/s1600/blogger.png'/><span itemprop='name'>Thủ thuật blogger</span></a></li>
<li><a class='bsw_cate' href='/search/label/Phần Mềm' itemprop='url' title='Download phần mềm máy tính'><img src='//4.bp.blogspot.com/-Js19uXikRiE/WFfT0yhc7hI/AAAAAAAAB0A/RZs1PFfdyMgDtVTnT66oO2pbapeBBLI7ACLcB/s1600/phan-mem.png'/><span itemprop='name'>Phần mềm máy tính</span></a></li>
<li><a class='bsw_cate' href='/search/label/Game Online' itemprop='url' title='Download game online'><img src='//2.bp.blogspot.com/-H_YLzBHz3cs/WFfTzWqaRSI/AAAAAAAABzc/bwDbMrHSLxIycRJg_A_NMnUWRipSxUTZgCLcB/s1600/game-online.png'/><span itemprop='name'>Game Online</span></a></li>
<li><a class='bsw_cate' href='/search/label/Thủ Thuật Máy Tính' itemprop='url' title='Thủ thuật máy tính'><img src='//2.bp.blogspot.com/-tM7np0KmaoU/WFfT1LtCCWI/AAAAAAAAB0M/roJu_egcGGYj_jvF7FSR0joOlMyXdJmCACLcB/s1600/thu-thuat-may-tinh.png'/><span itemprop='name'>Thủ thuật máy tính</span></a></li>
<li><a class='bsw_cate' href='/search/label/Windows 10' itemprop='url' title='Thủ thuật Windows 10'><img src='//2.bp.blogspot.com/-ESShpg3bgJY/WFfT1tw8hBI/AAAAAAAAB0Y/PcJ4q9M271s3GreXY9ePkFc8Vjuw3IZCwCLcB/s1600/thu-thuat-windows-10.png'/><span itemprop='name'>Thủ thuật windows 10</span></a></li>
<li><a class='bsw_cate' href='/search/label/Thủ Thuật Office' itemprop='url' title='Thủ thuật Office'><img src='//2.bp.blogspot.com/-Xoc3iSJOTxc/WFfT1FUwSlI/AAAAAAAAB0Q/4LaqlbcCIBQgPP2abXU1vOIeWZ0K4ETaACLcB/s1600/thu-thuat-office.jpg'/><span itemprop='name'>Thủ thuật office</span></a></li>
<li><a class='bsw_cate' href='/search/label/Thủ Thuật Facebook' itemprop='url' title='Thủ thuật Facebook'><img src='//4.bp.blogspot.com/-F5oqU_zFEsQ/WFfT04scSTI/AAAAAAAAB0I/-p1gE8_mSQAhdL-WV-U_r42qYOR5oaD7QCLcB/s1600/thu-thuat-facebook.jpg'/><span itemprop='name'>Thủ thuật facebook</span></a></li>
<li><a class='bsw_cate' href='/search/label/Thủ Thuật Youtube' itemprop='url' title='Thủ thuật Youtube'><img src='http://www.iconarchive.com/download/i58895/dakirby309/windows-8-metro/Web-Youtube-alt-2-Metro.ico'/><span itemprop='name'>Thủ thuật youtube</span></a></li>
  <li><a class='bsw_cate' href='//bacsiwindows.com/2016/12/huong-dan-download-va-cai-dat-photoshop-cs3-portable.html' itemprop='url' title='Adobe Photoshop'><img src='//3.bp.blogspot.com/-Ec7Cg8qFIKU/WFfT1V62KxI/AAAAAAAAB0U/2qu2g6z-RhcOKhC767gEsDPa2NAwWZkzACLcB/s1600/thu-thuat-photoshop.png'/><span>Adobe Photoshop</span></a></li>
  <li><a class='bsw_cate' href='//bacsiwindows.com/2016/12/avast-free-antivirus-phan-mem-diet-virus-tot-nhat-he-mat-troi.html' itemprop='url' title='Phần mềm diệt virus'><img src='//2.bp.blogspot.com/--lBq5fdPNY8/WFfT0bPcoRI/AAAAAAAABz4/BUN5CpUIVuoD9lmKFRvOPQddV6sI0KGHwCLcB/s1600/phan-mem-diet-virus.png'/><span>Antivirus</span></a></li>
  <li><a class='bsw_cate' href='//bacsiwindows.com/2016/12/download-idm-full-crack-su-dung-vinh-vien.html' itemprop='url' title='Phần mềm download mọi thứ - IDM'><img src='//1.bp.blogspot.com/-Wo7vcHZRIjs/WFfTz8LZWqI/AAAAAAAABzg/hiLfj-EiSHQqwc2y1v0pLa8iPIqtBWBBgCLcB/s1600/internet-download-manager.png'/><span>Internet Download Manager</span></a></li>
  <li><a class='bsw_cate' href='//bacsiwindows.com/2016/12/download-ccleaner-phan-mem-don-rac-toi-uu-hoa-he-thong-tot-nhat.html' itemprop='url' title='Phần mềm dọn dẹp rác trên máy tính'><img src='//4.bp.blogspot.com/-7Sx_W8ETE4w/WFfT0bCsTxI/AAAAAAAABz0/Em-pt-JPP4wwxBttqd6S1GIpk2H7pZPWQCLcB/s1600/phan-mem-ccleaner.png'/><span>Piriform CCleaner</span></a></li>
  <li><a class='bsw_cate' href='//bacsiwindows.com/2016/12/phan-mem-go-tieng-viet-unikey-moi-nhat.html' itemprop='url' title='Phần mềm gõ Tiếng Việt'><img src='//3.bp.blogspot.com/-HxdKjhKP-Os/WFfT0h-PdjI/AAAAAAAABz8/9sYxYZtB-xctla7lcBsWAhR8qLLxrdj_ACLcB/s1600/phan-mem-unikey-icon.jpg'/><span>Unikey Vietnam</span></a></li>
  </ul>
</label>
Bước 4. Lưu mẫu.

Tổng kết

Đây là mẫu menu nhẹ, gọn và đẹp nhất theo cá nhân mình đánh giá. Ngoài ra nó còn không sử dụng javascript nữa, đây có thể xem là mẫu menu tuyệt vời và hoàn hảo! Hãy áp dụng vào blog của bạn nhé! Chúc thành công.
CHUYÊN MỤC

Bài Viết Liên Quan

Bình Luận Gần Đây

Một số lưu ý khi bình luận
● Mọi bình luận sai nội quy sẽ bị xóa mà không cần báo trước.
● Tích vào ô Thông báo cho tôi (Notify me) để nhận thông báo phản hồi của Admin.
● Không chửi tục, nói bậy, quảng cáo thông qua khung Comment.
● Để bình luận một đoạn code, hãy mã hóa code trước nhé.