Remitano
Kiem-Bitcoin-Mien-Phi-San-Okex

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

FreeBitcoin

Bài viết cùng chủ đề

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ỹ :


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

Sàn SnapEx

➤ Tham gia Group để cập nhật các tin tức và cách kiếm tiền online mới nhất: KIẾM TIỀN ONLINE - CỘNG ĐỒNG VIỆT
➤ Nhớ Like, Share và Đăng ký kênh Youtube chính thức: TẠI ĐÂY

1 nhận xét:

  1. Chào bạn, bài viết của bạn cũng khá hay và cần thiết :D
    Rảnh ghé qua site mình chơi nhé ch playmobo market trên http://www.tai-facebook.xyz free

    Trả lờiXóa

Chào bạn ! Nếu có bất cứ thắc mắc, ý kiến nào hãy để lại bình luận.
Mỗi nhận xét của bạn đều rất quan trọng. Tôi rất vui nếu bạn viết bằng tiếng Việt có dấu.

Chat với chúng tôi