Sau đây mình sẽ hướng dẫn các bạn tạo
floating menu trượt theo blog cho Blogger.
Hướng Dẫn:Truy cập vào quản trị blog: Blogger.com >> Mẫu >> Chỉnh HTML sau đó tìm thẻ ]]></b:skin> rồi thêm lên trên nó đoạn code dưới đây:
/*--Sticky Navigation Bar--*/
#MBL_wrapper .MBL_social_wrapper
{
margin-top: 15px;
}
#MBL_wrapper
{
width: 100%;
margin: auto;
background: #fff;
height: 50px;
border-top: 5px solid #2c2f32;
border-bottom: 1px solid #EBEBEC;
-webkit-box-shadow: 0 1px 0 #D2D2D3, 0 1px 3px rgba(0, 0, 0, .2);
-moz-box-shadow: 0 1px 0 #d2d2d3, 0 1px 3px rgba(0,0,0,.2);
-o-box-shadow: 0 1px 0 #d2d2d3, 0 1px 3px rgba(0,0,0,.2);
box-shadow: 0 1px 0 #D2D2D3, 0 1px 3px rgba(0, 0, 0, .2);
position: fixed;
z-index: 999;
}
#MBL_wrapper .topmenu.notice
{
float: left;
width: 500px;
margin-top: 15px;
color: #fff;
}
#top_menu a
{
color: #fff;
}
#top_menu
{
display: block;
float: left;
list-style: none;
margin-top: 12px;
}
#top_menu li
{
display: inline-block;
margin-right: 15px;
font-family: 'Patua One', 'Helvetica Neue', Helvetica, Arial,Verdana,sans-serif;
font-size: 14px;
text-transform: uppercase;
}
#top_menu li ul
{
display: none;
}
#boxed_wrapper
{
width: 980px;
margin: auto;
}
.MBL_standard_wrapper
{
width: 960px;
margin: auto;
}
.MBL_standard_wrapper.wide
{
width: 980px;
}
.MBL_standard_wrapper.header
{
margin-bottom: 0px;
}
.MBL_social_wrapper
{
width: auto;
float: right;
}
#menuforall .MBL_social_wrapper
{
margin-top: 15px;
}
.MBL_social_wrapper ul
{
list-style: none;
}
.MBL_social_wrapper ul li
{
float: right;
margin-left: 5px;
}
.MBL_social_wrapper ul li img
{
width: 24px;
}
#MBL_menu_wrapper
{
width: 930px;
height: 50px;
padding: 0;
margin:auto;
}
.mainmenu.notice
{
float: left;
width: 600px;
padding: 17px 0 10px 12px;
z-index: 999;
}
#MBL_menu_wrapper .nav ul, #MBL_menu_wrapper .nav
{
list-style: none;
display: block;
float: left;
margin: 0 23px 0 5px;
width: 700px;
}
#MBL_menu_wrapper .nav ul li, #MBL_menu_wrapper .nav li
{
display: block;
float :left;
margin: 0;
}
#MBL_menu_wrapper .nav ul li ul, #MBL_menu_wrapper div .nav li ul, .main_nav li ul
{
display: none;
list-style: none;
background: #000;
position:absolute;
padding: 0;
margin-top: 51px;
width: 200px;
height: auto;
z-index: 1000;
padding-top: 5px;
border-bottom: 5px solid #000;
border-left: 0;
}
#MBL_menu_wrapper .nav ul li ul li ul, #MBL_menu_wrapper div .nav li ul, .main_nav li ul li ul
{
margin-left: 200px;
margin-top: 5px;
}
#MBL_menu_wrapper .nav li ul li a, .nav li ul li a, #MBL_menu_wrapper .nav ul li.current_page_parent ul.sub-menu li.current_page_item a, .nav li.current-menu-parent ul.sub-menu li.current_page_item a
{
background: none;
}
.main_nav li ul li
{
width: 100%;
}
#MBL_menu_wrapper .nav li ul li a, #MBL_menu_wrapper .nav li.current-menu-item ul li a, #MBL_menu_wrapper .nav li ul li.current-menu-item a,#MBL_menu_wrapper .nav ul li ul li a, #MBL_menu_wrapper .nav ul li.current-menu-item ul li a, #MBL_menu_wrapper .nav ul li ul li.current-menu-item a
{
color: #fff;
display: block;
width: 188px;
font-weight: bold;
line-height: 1em;
padding: 10px 0 10px 12px;
background: none;
}
.main_nav ul, .main_nav
{
list-style: none;
margin: auto;
width: 600px;
height: 50px;
z-index: 999;
float: left;
border-left: 1px solid #EBEBEC;
}
.main_nav ul li, .main_nav li
{
display: block;
float :left;
margin: 0;
}
.main_nav ul li a, .main_nav li a
{
display: block;
float :left;
margin: 0 0 0 0;
padding: 18px 15px 14px 15px;
color: #2c2f32;
font-family: 'Patua One';
text-transform: uppercase;
font-size: 13px;
font-weight: 500;
border-right: 1px solid #EBEBEC;
}
.main_nav ul li ul li a, .main_nav li ul li a
{
width: 165px;
padding: 7px 19px 7px 16px;
border: 0;
font-size: 12px;
font-weight: normal;
color: #ccc;
font-family: 'Helvetica Neue', Helvetica, Arial,Verdana,sans-serif;
}
.main_nav ul li ul li:last-child a, .main_nav li ul li:last-child a
{
border-bottom: 0;
}
.main_nav ul li a:hover, .main_nav li a:hover, .main_nav ul li a.hover, .main_nav li a.hover, .main_nav ul li a:active, .main_nav li a:active, .main_nav li.current-menu-item a
{
color: #fff;
background: #1bc4de;
}
.main_nav li:last-child a:hover, .main_nav li:last-child a.hover
{
border-right: 0;
}
.main_nav li ul li a, .main_nav li.current-menu-item ul li a,#MBL_menu_wrapper .nav ul li ul li a, #MBL_menu_wrapper .nav ul li.current-menu-item ul li a, #MBL_menu_wrapper .nav ul li ul li.current-menu-item a,
{
display: block;
width: 170px;
line-height: 0.7em;
padding: 5px 0 5px 30px;
}
.main_nav li ul li a:hover, .main_nav li.current-menu-item ul li a:hover, .main_nav li ul li a.hover, .main_nav li.current-menu-item ul li a.hover, #MBL_menu_wrapper .nav ul li.current-menu-item ul li a:hover, #MBL_menu_wrapper .nav ul li ul li.current-menu-item a:hover, .main_nav li ul li:last-child a:hover, .main_nav li ul li:last-child a.hover
}
div
{
margin:0;
padding:0;
border:0;
font-weight:inherit;
font-style:inherit;
font-size:100%;
font-family:inherit;
vertical-align:baseline;
}
a
{
color: #2C2F32;
text-decoration: none;
-webkit-transition: color .2s linear, background .1s linear;
-moz-transition: color .2s linear, background .1s linear;
-ms-transition: color .2s linear, background .1s linear;
-o-transition: color .2s linear, background .1s linear;
transition: color .2s linear, background .1s linear;
}
/* Font Face ----------------------------------------------- */
@font-face {
font-family: 'Patua One';
font-style: normal;
font-weight: 400;
src: local('Patua One'), local('PatuaOne-Regular'), url(http://themes.googleusercontent.com/static/fonts/patuaone/v3/yAXhog6uK3bd3OwBILv_SLO3LdcAZYWl9Si6vvxL-qU.woff) format('woff');
}
ul{
margin: 0;
padding: 0;
list-style: none;
}
Sau đó bạn tìm thẻ
<body> và thêm dưới nó đoạn code dưới đây:<!-- Begin Navigation -->
<div id='MBL_wrapper'>
<div class='MBL_standard_wrapper'>
<div class='menu-main-menu-container'><ul class='main_nav' id='main_menu'><li class='menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-533' id='menu-item-533'>
<a href='#'>Home</a></li>
<li><a href='#'>Blog</a></li>
<li><a href='#'>About Us</a></li>
<li><a href='#'>Advertise Here</a></li>
<li><a href='#'>Contact Us</a></li>
<li><a href='htto://www.mybloggerlab.com'>MyBloggerLab</a></li>
</ul></div>
<div id='menu_border_wrapper'></div>
<div class='MBL_social_wrapper'>
<ul>
<li><a href='#' target='_blank'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwMRqQ3Tn_3zi8KycB5yZJmhbENyhrUZgh97vxNfOFaRO_lpVybq7UWjYfIE4g00QfMSS6kq5sQ36z2g4ICdH84A8dP5KIkRFcbv16-9QCzWABifLgk46MlHob6-3ek4qGtr-hFCk-cfHl/s1600/facebook.png'/></a></li>
<li><a href='#' target='_blank'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgReIHpmZwYcuCgK4gS94SOFt_RCuR-qmUZBjflmYLuRcrAgdphRvSs2Uo3tC-Hfb5ycgfW7Sy9H7I87cOkcev2Pw_ZkzVdxyj5U4kpINXXAXSKqpgaOvi37MMr-tLwgW2wHXI44ljxwr-k/s1600/twitter.png'/></a></li>
<li><a href='#' target='_blank' title='Flickr'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGzXk6t5PhialFgfLFwFnALqwsCYtd60YRqAa67bEIlWxsTOzY72kRvLpYE19mx6f-1sNPhzcf3r32fz6wut5cprHC806V_-V6dP4hzM_YMTwMXbUklcVPQzRG3L17p4mz_nrY9OqahM8A/s1600/flickr.png'/></a></li>
<li><a href='#' target='_blank' title='Vimeo'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjY40hrmBS5eI8m8FHCJRJMOpQO4cds1jdIf1AbIAfmPx_yJDCQwhyUwsWQmLq6ZhEglBILGcj8lKE3pLoqoADBT2ubw1tANdjEORERjj2Rl69AN1lYLwRMhpcCasOYVJv7ZR3zKVFBdRxp/s1600/vimeo.png'/></a></li>
<li><a href='#' target='_blank' title='Tumblr'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYshcvOJ_DCH2KMLFRhls_F4CaffANQJsmgmsaNqKCs8c5eOeVqwAzEp1HcZLMDQuEfaVxLdclw4wYesAEWYDuuI6TRMIfD9gNgmhj-AP5j7tVZPuDULz28C5w0gIz0ZMQeknPp-jh_LJu/s1600/tumblr.png'/></a></li>
<li><a href='#' target='_blank' title='Google+'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhY6-TG-PPMi8Wm1dkTOoJn1ocMaf9qSbA-AmN-qiKdtxdZxcjzyIZQckMcji6bp4b2_OqcYWbbC-5Ogxt6ghareD8U7Q7jJUPCi_h068dW69sTe4HHxO5bRccpOyC68PZ8b8yIBkBk5L4b/s1600/google.png'/></a></li>
<li><a href='#' target='_blank' title='Dribbble'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcX3tX-TnOSkjI79Iuyu8utrd1KQomrKfoQdFMtXkF7mguQvmwzEZp25FieRnvr0dpXbJEU3_rLp55byeBkpN8jMC9WvxmXG_aGDRdEn3gbKsmDIo0-5EpdN5Jzry-HU8wohJ-TqHVFNJo/s1600/dribbble.png'/></a></li>
<li><a href='#' target='_blank' title='Digg'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJi4VP_TFOwPvXPDdwhaSg64-JvwQIGKvLMpBgpgQsmThnutOCMLu3-b5zyAVPchdiiqPXYtqAJRHlIUnnzRB_owA2HJf5cfP_dscc-qzC0LPXzhjzH41mi0w_npJX3lU8ckV17bZrMB6z/s1600/digg.png'/></a></li>
<li><a href='#' target='_blank' title='Linkedin'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgllayYDc3ZciC_CLTvQXMsPJkhqRSrxaDYtilWVC-u_g0bcNzCOAXvuQzrPejCY6prwZ2bUATRhYwiNIH_U-1UlYxe2mqWOmAs5gxdwvEMkhnSJtqxxZMDKYZVmyTdTFPEWEuUbWKSsf6d/s1600/linkedin.png'/></a></li>
<li><a href='#' target='_blank' title='Pinterest'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvQtL5BFzjaBGSq7wZQATjJD10yWpdDiuZ0XTiXOHexHma3sH5fB3GoHHPnUEJnJFZLGyy1cHreJCUe69d7B78LTxxhDD11QZp5R1ADgTHSxr1m_8UtblpQdOHjtcMQOtyngoG7AkYQRWc/s1600/pinterest.png'/></a></li>
<li><a href='#' target='_blank'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLFo6y6xZvA4hxT8CbUyjbSPjPkK7f65-WBoz2aldXFbFBnQKVo6ZC85Z0Css3oFqQHD2EKhXWC-1lZzNO5cgTrqRqHoLa_VPXEa68faF3h5ht1YnlMITLh7808g6D2n3JACfyKfLe0hPF/s1600/rss.png'/></a></li>
</ul>
</div>
</div>
</div>
<!-- End Navigation -->
Sau đó hãy chỉnh lại đường link cho đúng với chuyên mục nhé, chúc các bạn thành công.
Nhấn Ctrl + F để tìm footer-info trong CSS (Nhấn enter tầm 3 lần để tới đoạn này)
Bây giờ hãy thay thế #66b381 bằng #3A3A3A và lưu lại bạn sẽ không nhìn thấy link footer nữa.
