thu thuat blogger
Tạo floating menu cho blogspot
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 -->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.
<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/AVvXsEhnOpWM-XawY62Pv2Cs536U0eminKp08UQ_4Jwi4htnJ49bAATRJL9bKXEgc8AHjwDT2B-LOsnsnHPOjG-tlYryWWuKZQRFo22e3nBxDCYscgdk3WLLzzRhs70qPOqY3TMEp1pC6LtQ6mtg/s1600/facebook.png'/></a></li>
<li><a href='#' target='_blank'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjniIXN5qwDJdlurx7c68HcmMsEV2dCy5nTvHfVjLMFyPT-NcUnad7KZLmOvMBSZkHBv3GEoOa-_akcWl5PjB3eOvukooaCwCAyJNp40RfxslY8yjcMoVUag_N9dMt3IzkOUEipFAtdLjTl/s1600/twitter.png'/></a></li>
<li><a href='#' target='_blank' title='Flickr'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh53_GO0tqNW_UuuDS4AvUEVuwJxbF3zDeSYNAo7GzZb9eeNn4lsXjxkzSqAwAJA2dMMObpRDgL0Of8BkBEYQ9tv3BZMYneAS8EVoCgihTgCu8vryFhzatce18IuUos1ToMWM4palhZSrVu/s1600/flickr.png'/></a></li>
<li><a href='#' target='_blank' title='Vimeo'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8dQRVaSUMgGVVH8SlYur_LMNUAypdcFwmKEGgzP9XPGcWZEUufdJU_i_yqAhxXg-qVMCgSp40oL7fZ_mM1KBtPSap_KoTnQTr0ARuanFRMPMp9FbJ-MMDXKRELQN8W82QECSAENdaOwfO/s1600/vimeo.png'/></a></li>
<li><a href='#' target='_blank' title='Tumblr'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDBkKqW1-6vmEHzmJCQPAyDQXx5QPbyOCDe1ax7e3IaUwoB9TQ7Ta8EJBYqekfEnwm4W42kZI7UinB8cr6g7HNgR95EXhnFbYa6D4oLbuNR9EUH1BWWbuPZNEzAQoKhYgCSYWp3hGZR9wg/s1600/tumblr.png'/></a></li>
<li><a href='#' target='_blank' title='Google+'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLZNUEBjE4DXkTxQSJ1ILK7zjuOb0-JNxqDh9k091u7fcvoUpG381cUg4ENWRLaKT9v6tXoerbk_74kdkblLdX6MPxZKMWEiXb9OKHM4ImvyS2af0LW2o30HdMyeqYctLE6UryORDRihTE/s1600/google.png'/></a></li>
<li><a href='#' target='_blank' title='Dribbble'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjR-Q1r28hyphenhyphenf-6AM3Kyq232E8Hsmw-4tuwyJDkiYPulJ-P8wlYgIeYxJdOXM6ZEyBYsdBrCXPEQxTGz9eLfnbYqykaUw2X3RlLiKOfJ6lHHP3iF8UO8B8Vm3TGlEjg2AjfmWAiWXJZNE4QX/s1600/dribbble.png'/></a></li>
<li><a href='#' target='_blank' title='Digg'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxM2toNNlmNBUYJYrKYqAaKULca0C3mLmHX4flkx3YKjHpEM_qievRaJlU996JantCFOZLsbu8cRBl3MZhRVw2PzJBHrI4A_mpDqy0XR1EaENC0ugMaeUdmbYufy-qwx53BZJwtIoZGPjZ/s1600/digg.png'/></a></li>
<li><a href='#' target='_blank' title='Linkedin'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhGvb2v0kKO3pdfIeQxdGfkckUygCW06fsL9clDKFfwkRavUhJyrFg2ajYrFG7flco38CyRm_90e0JGbwPu3W33l64oFIOIRBkcP1rYobiy1SU4i0KIqlK9X2kH4AtQzlbOmkNWcDraxb_/s1600/linkedin.png'/></a></li>
<li><a href='#' target='_blank' title='Pinterest'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghKenHv8gGidc3BRD8gOVEp4AsJjQtdpK4AkXsWG4JelpBjInQk5tPMtv_4AlZtb7J-Tz2tzQNqyYTAjgKiMB2I_-yxywu0_UC-WJ8WCiFo6RNFwPzt3gJ_Pn-hT6pc7LjRZ48pbs67NSf/s1600/pinterest.png'/></a></li>
<li><a href='#' target='_blank'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5wmp4QuoqMSEdoMYCqRHencQBTzfM6xaZzSKhTRk5rtorpS4Obfsx028UJMPAu_0072GI6hoHe8f0wMGa7b4P6Vfuw7W5VoFCWGPCkdc6V4d5TMwnzW7d_TNG_WKDvpEL3KgMmSC1jJhi/s1600/rss.png'/></a></li>
</ul>
</div>
</div>
</div>
<!-- End Navigation -->
