Tạo thanh Menu ngang hiệu ứng 3D cho blog

Chào các bạn!
Lâu quá mình không viết bài về blogger. Bài viết hôm nay mình xin giới thiệu đến các bạn tiện ích thanh menu ngang có hiệu ứng 3D rất đẹp cho blog. Các bạn có thể tham khảo áp dụng trang trí thêm cho blog của mình thêm sinh động. XEM DEMO
Bây giờ chúng ta cùng thực hiện nhé!
1. Đăng nhập vào tài khoản Blogger
2. Vào phần Mẫu ( Template )
3. Chọn chỉnh sửa HTML ( Edit HTML ) tìm ]]></b:skin>

4. Dán code sau vào bên dưới ]]></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>

5. Save template lại và trở về bố cục (Layout)
6. Thêm 1 HTML/Javascript và thêm vào code bên dưới

Mr Sum