Thủ thuật tạo thanh menu 3D đẹp mắt cho blogspot

Trước đây Vietmkt360 cũng chia sẻ đến các bạn một số thủ thuật tạo thanh menu khá bắt mắt và có tính thẩm mỹ :

• Menu đẹp mờ ảo mang phong cách nữ tính cho blogger
• Menu ngang hiện Icon khi rê chuột từ CSS3 cho blogger
• Menu xổ dọc với màu tabs thay đổi cho blogger
• Tạo menu ngang bằng hình ảnh
• Menu tự động lấy bài viết trong site
• Tạo Menu ngang có hiệu ứng khi rê chuột

Hôm nay Vietmkt360 sẽ giới thiệu đến các bạn thêm một Thủ thuật tao thanh menu với hiệu ứng 3D trơn tru với jquery. Với hiệu ứng 3D của thủ thuật này Blog của bạn sẽ hoàn toàn mới lạ và hấp dẫn hơn rất nhiều !

Cách thực hiện :
1. Đăng nhập Blogger
2. Chọn mẫu ==> Chỉnh sửa HTML
3. Dán code dưới đây sau ]]></b:skin>

<style>

@import url(http://fonts.googleapis.com/css?family=Raleway);

#cssmenu,

#cssmenu ul,

#cssmenu ul li,

#cssmenu ul li a,

#cssmenu #menu-button {margin: 0;padding: 0;border: 0;list-style: none;line-height: 1;display: block;position: relative;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}

#cssmenu:after,

#cssmenu > ul:after {content: ".";display: block;clear: both;visibility: hidden;line-height: 0;height: 0;}

#cssmenu #menu-button {display: none;}

#cssmenu {width: auto;font-family: Raleway, sans-serif;line-height: 1;}

#cssmenu > ul {background: #3db2e1;}

#cssmenu > ul > li {float: left;-webkit-perspective: 1000px;-moz-perspective: 1000px;perspective: 1000px;}

#cssmenu.align-center > ul {font-size: 0;text-align: center;}

#cssmenu.align-center > ul > li {display: inline-block;float: none;}

#cssmenu.align-right > ul > li {float: right;}

#cssmenu > ul > li > a {padding: 16px 20px;font-size: 14px;color: #ffffff;letter-spacing: 1px;text-transform: uppercase;text-decoration: none;background: #3db2e1;-webkit-transition: all .3s;-moz-transition: all .3s;

  -o-transition: all .3s;transition: all .3s;-webkit-transform-origin: 50% 0;-moz-transform-origin: 50% 0;transform-origin: 50% 0;-webkit-transform-style: preserve-3d;-moz-transform-style: preserve-3d;transform-style: preserve-3d;

}

#cssmenu > ul > li.active > a {color: #dff2fa;

}

#cssmenu > ul > li:hover > a,

#cssmenu > ul > li > a:hover {color: #dff2fa;-webkit-transform: rotateX(90deg) translateY(-23px);-moz-transform: rotateX(90deg) translateY(-23px);transform: rotateX(90deg) translateY(-23px);

  -ms-transform: none;

}

#cssmenu > ul > li > a::before {position: absolute;top: 100%;left: 0;z-index: -1;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;width: 100%;height: 100%;padding: 16px 20px;color: #dff2fa;background: #19799f;content: attr(data-title);

  -webkit-transition: background 0.3s;-moz-transition: background 0.3s;transition: background 0.3s;-webkit-transform: rotateX(-90deg);-moz-transform: rotateX(-90deg);transform: rotateX(-90deg);

  -webkit-transform-origin: 50% 0;-moz-transform-origin: 50% 0;transform-origin: 50% 0;-ms-transform: translateY(- -18px);

}

#cssmenu > ul > li:hover > a::before,

#cssmenu > ul > li > a:hover::before { background: #3db2e1;}

#cssmenu.small-screen {width: 100%;}

#cssmenu.small-screen > ul,

#cssmenu.small-screen.align-center > ul {

  width: 100%;

  text-align: left;

}

#cssmenu.small-screen > ul > li,

#cssmenu.small-screen.align-center {

  float: none;

  display: block;

  border-top: 1px solid rgba(100, 100, 100, 0.1);

}

#cssmenu.small-screen > ul > li:hover > a,

#cssmenu.small-screen > ul > li > a:hover {

  color: #dff2fa;

  -webkit-transform: none;

  -moz-transform: none;

  transform: none;

  -ms-transform: none;

}

#cssmenu.small-screen > ul > li > a::before {

  display: none;

}

#cssmenu.small-screen #menu-button {

  display: block;padding: 16px 20px;cursor: pointer;font-size: 14px;text-decoration: none;color: #ffffff;text-transform: uppercase;letter-spacing: 1px;background: #3db2e1;}

#cssmenu.small-screen #menu-button:after {

  content: "";position: absolute;right: 20px;top: 17px;display: block;-webkit-box-sizing: content-box;-moz-box-sizing: content-box;box-sizing: content-box;border-top: 2px solid #ffffff;border-bottom: 2px solid #ffffff;width: 22px;height: 3px;

}

#cssmenu.small-screen #menu-button.menu-opened:after {

  border-top: 2px solid #dff2fa;

  border-bottom: 2px solid #dff2fa;

}

#cssmenu.small-screen #menu-button:before {

  content: "";position: absolute;right: 20px;top: 27px;display: block;width: 22px;

  height: 2px;

  background: #ffffff;

}

#cssmenu.small-screen #menu-button.menu-opened:before {

  background: #dff2fa;

}









  </style>



<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> <script charset='utf-8' src='http://preview.bloggertrix.com/3d_cssmenu/script.js' type='text/javascript'/> 

4. Lưu lại 

5. Chọn bố cục --> Thêm tiện ích HTML/JavaScrip và dán code bên dưới vào

<div id='cssmenu'>

<ul>

   <li class='active'><a href='#'>Home</a></li>

   <li><a href='http://vietmkt360.com/'>Vietmkt360</a></li>

   <li><a href='http://vietmkt360.com/'>Vietmkt360</a></li>

   <li><a href='http://vietmkt360.com/'>Vietmkt360</a></li>

</ul>

</div>

Các bạn sửa lại cho phù hợp với Blog của mình

6. Lưu lại tiện ích HTML/JavaScrip

Chúc các bạn thành công !!!!!!!!!!!!!!!!!!!!!!!