Tạo floating menu cho blogspot

Người Đăng: VnCrypto

Sau đây mình sẽ hướng dẫn các bạn tạo floating menu trượt theo blog cho Blogger.

DEMO

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:

<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/AVvXsEhV8BHbIY63MftsXjmYC7DjcvBigB18XQKzZi428yTvJBYEmSOni_uqFEsEXH3CQTo83_qA232LEtswb34CDf7hym2PtJ8pXN1sY4YHkl2H_tEuIlGGO0QzFBYHw4NwGOdtEAytJ4HBq22a/s1600/facebook.png'/></a></li>

<li><a href='#' target='_blank'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwZi24yHniPp66NcdJFcteCn3WIgzSSmCCm61nfUJe8oG3K1qNoK4L6S6ZrEDfxGabnb73JY_oDENdnMYgFAovxMLpKJUMAZSnptEyTA_oM8-_vIjDGawsq7ZwGbpiQSKnnfQ3CdnFs9JF/s1600/twitter.png'/></a></li>

<li><a href='#' target='_blank' title='Flickr'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiQe0apKV6LfTy-OK__NlcK4SDZn_oz0XJNNCEgeBTJBwoYj_KulVULEkzLzc578lIqLJLaUG_E5QcIuciTkqBuRIs45xplM-jXP0TGiOzd-Os-3kfpiQz02dmidLnqxaQPlsa9aYSvQzc/s1600/flickr.png'/></a></li>

<li><a href='#' target='_blank' title='Vimeo'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi78WYo-jPqDVg6wdTo45bzOIRFudxTOAQgsMFyijHk24-alcYtAC4g482dBB6gRlYR0W4gNESxsNWWn8cZAn_xen4gfmfXvE9VK-MZo9BXqZvDx5HpI0qocMjYX6l6PU9vMd30LA1RDJsS/s1600/vimeo.png'/></a></li>

<li><a href='#' target='_blank' title='Tumblr'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQZWVb16vxyd09Ph92RAiKAGgvkHC1yI4ufYmdpbgq-jdd1VybvyGPQkWPDTr7gKRUxYBWOyi22OzJe0LrOp7ilhrpl-2gWsBDMzyhIYkTrhyj1HeMXxRr8YBtZR6TGGj-HhUrYwb9vRV1/s1600/tumblr.png'/></a></li>

<li><a href='#' target='_blank' title='Google+'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNOOAm_Wt87wBHv_hBaD1qWNEqQ53xL395IyjWYyhrF_E6x0XKnqyWFHOznrz1VOvT4OUy-i_HiyYAZvbyYvdT7Loqu4jJ8J6apmzoLesKILcDCsruvG0CxjHQmlZUi019ocZiHSY5SxK7/s1600/google.png'/></a></li>

<li><a href='#' target='_blank' title='Dribbble'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5MUFJOmOBJrXYP-PDWCAWD4z2NBElcVymRTAzyQPsn0tGyZqEpF7W1UlCunXt4HjDukZyPGrFo9Nl2kgpvz1w1S8uaWyYnFKGrdM-x7-Mq39gy4qnwCTdG1T3K5dP7cZo2o1GUtFnPqt3/s1600/dribbble.png'/></a></li>

<li><a href='#' target='_blank' title='Digg'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIramvYxSgws5HhPa3agIShmMu7p1GdJHVTlUNvUgio4AjQhymVwqAMAV27rfkvIBZJxiyzbKhMxZSa9S5ammZeAxpMUK3c3mQtvITeYq2IwMxN1KZ0sG0xrn6vqjJ86uA_LZCoHhcC3VD/s1600/digg.png'/></a></li>

<li><a href='#' target='_blank' title='Linkedin'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhre2PbMUx10kIjMtSmkPZeWtQlWjMtp4VRJGAgFr5qQOZjKOkv_9YxDuvc0-I90YtaYmHYgf63_DJ14hHexJWlUid4_MVewQwX9rS0TELI1NjJ9HM9od2psKR186ww47TPiqA6yECNJvhA/s1600/linkedin.png'/></a></li>

<li><a href='#' target='_blank' title='Pinterest'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjb9i2UNHya_19Jl357_0yekO3dEszvZACsQBun0N0cKOjCPC6pGYOiZ_evABs-78hLWw8CV9xkgokkWeI5oWx_ehKTuK_Vk31SPTIvUfYCBVgrr801JM88M7n3q4A8EqOuVXn1zXB1rYuZ/s1600/pinterest.png'/></a></li>

<li><a href='#' target='_blank'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_ICUUVF63BztiebK_2Xjqid2ehaeoshQLUszN45c7Tgxw1a0tsksIUQ31npLebrN3EWlGt-A67wioICY_bOKZ1-Vtzt1UtCaHj_50y3Oc2-UgcPK6_URxd6AXQwfTSkdFxwzmryUWMrih/s1600/rss.png'/></a></li>

</ul>
</div>
</div>
</div>

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.

Tag : Blogspot Tips

Tạo floating menu cho blogspot

Bình Luận

0 Bình Luận "Tạo floating menu cho blogspot"

Tạo floating menu cho blogspot

Bài Trước

Bài Sau

Bình Luận

0 Bình Luận "Tạo floating menu cho blogspot"