HƯỚNG DẪN CÁCH LÀM:
Bước 1: Bạn tiến hành vào Dashboard blog vào vào mục Chủ đề chọn Chỉnh sửa HTML và thêm đoạn menu dưới thẻ <body><!-- Header wrapper -->Bước 2: Tìm <head> và thêm thư viện fontawesome xuống phía dưới thẻ vừa tìm, ai có thư viện rồi thì mình bỏ qua bước này nhé
<header class='main-header' id='site-header' itemscope='' itemtype='http://schema.org/WPHeader'>
<div class='header-middle'>
<div class='container'>
<div class='row small-mb'>
<div class='col col-3 col-lg-3 col-tb-12' id='logo'>
<div class='fas col-0' id='show-menu'>
</div>
<div class='site-logo'>
<b:section id='header' maxwidgets='1' name='Logo' showaddelement='yes'>
<b:widget id='Header1' locked='true' title='Template News (Tiêu đề)' type='Header' version='1'>
<b:widget-settings>
<b:widget-setting name='displayUrl'>http://2.bp.blogspot.com/-Iw_1PDv9ulM/W6cJpNBUlEI/AAAAAAAADWQ/rDL0CsMquHsxbT3LlN9TSMwgusOwgeiHgCK4BGAYYCw/s1600/toishare.png</b:widget-setting>
<b:widget-setting name='displayHeight'>100</b:widget-setting>
<b:widget-setting name='sectionWidth'>790</b:widget-setting>
<b:widget-setting name='useImage'>true</b:widget-setting>
<b:widget-setting name='shrinkToFit'>false</b:widget-setting>
<b:widget-setting name='imagePlacement'>REPLACE</b:widget-setting>
<b:widget-setting name='displayWidth'>451</b:widget-setting>
</b:widget-settings>
<b:includable id='main'>
<b:if cond='data:useImage'>
<b:if cond='data:imagePlacement == "BEHIND"'>
<!--
Show image as background to text. You can't really calculate the width
reliably in JS because margins are not taken into account by any of
clientWidth, offsetWidth or scrollWidth, so we don't force a minimum
width if the user is using shrink to fit.
This results in a margin-width's worth of pixels being cropped. If the
user is not using shrink to fit then we expand the header.
-->
<b:if cond='data:mobile'>
<div id='header-inner'>
<div class='titlewrapper' style='background: transparent'>
<h1 class='title' style='background: transparent; border-width: 0px'>
<b:include name='title'/>
</h1>
</div>
<b:include name='description'/>
</div>
<b:else/>
<div expr:style='"background-image: url(\"" + data:sourceUrl + "\"); " + "background-position: " + data:backgroundPositionStyleStr + "; " + data:widthStyleStr + "min-height: " + data:height + "_height: " + data:height + "background-repeat: no-repeat; "' id='header-inner'>
<div class='titlewrapper' style='background: transparent'>
<h1 class='title' style='background: transparent; border-width: 0px'>
<b:include name='title'/>
</h1>
</div>
<b:include name='description'/>
</div>
</b:if>
<b:else/>
<!--Show the image only-->
<div id='header-inner'>
<a expr:href='data:blog.homepageUrl'><h1 style='display:none;'/>
<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + "_headerimg"' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>
</a>
<!--Show the description-->
<b:if cond='data:imagePlacement == "BEFORE_DESCRIPTION"'>
<b:include name='description'/>
</b:if>
</div>
</b:if>
<b:else/>
<!--No header image -->
<div id='header-inner'>
<div class='titlewrapper'>
<h1 class='title'>
<b:include name='title'/>
</h1>
</div>
<b:include name='description'/>
</div>
</b:if>
</b:includable>
<b:includable id='description'>
<div class='descriptionwrapper'>
<p class='description'><span><data:description/></span></p>
</div>
</b:includable>
<b:includable id='title'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<a expr:href='data:blog.homepageUrl'><data:title/></a>
<b:else/>
<a expr:href='data:blog.homepageUrl'><data:title/></a>
</b:if>
</b:includable>
</b:widget>
</b:section>
</div>
<div class='fas col-0' id='show-search'/>
</div>
<div class='col col-7 col-lg-6 col-tb-12'>
<form action='/search' id='search-form' method='get' role='search'>
<div class='form-group'>
<input autocomplete='off' class='form-control' id='search-keyword' name='q' placeholder='Search ...' required='' type='text' value=''/>
<!-- Drop label -->
<b:section id='label' maxwidgets='1' name='Label' showaddelement='yes'>
<b:widget id='Label1' locked='false' title='Nhãn' type='Label' version='1'>
<b:widget-settings>
<b:widget-setting name='sorting'>ALPHA</b:widget-setting>
<b:widget-setting name='display'>LIST</b:widget-setting>
<b:widget-setting name='selectedLabelsList'/>
<b:widget-setting name='showType'>ALL</b:widget-setting>
<b:widget-setting name='showFreqNumbers'>true</b:widget-setting>
</b:widget-settings>
<b:includable id='main'>
<b:if cond='data:title != ""'>
<h2><span><data:title/></span></h2>
</b:if>
<div expr:class='"widget-content " + data:display + "-label-widget-content"'>
<b:if cond='data:display == "list"'>
<div class='dropmedown'>
<select class='dropdown-select' onchange='location=this.options[this.selectedIndex].value;'>
<option>Select</option>
<b:loop values='data:labels' var='label'>
<option expr:value='data:label.url'>
<data:label.name/> (
<data:label.count/>)
</option>
</b:loop>
</select>
</div>
<b:else/>
<b:loop values='data:labels' var='label'>
<span expr:class='"label-size label-size-" + data:label.cssSize'>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
<b:if cond='data:showFreqNumbers'>
<span class='label-count' dir='ltr'>(<data:label.count/>)</span>
</b:if>
</span>
</b:loop>
</b:if>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
</b:section>
<button class='search' id='search-submit' type='submit'>
<i class='fas fa-search'/>
</button>
</div>
</form> </div>
<div class='col col-2 col-lg-3 col-tb-12 number-product'><a class='cart-contents' href='#contacttom' style='display:block' title='Liên hệ'><i class='fas fa-envelope'/> Contact</a>
<a class='moc-my-account' href='https://www.blogger.com/follow.g?blogID=ID-BLOG-CUA-BAN' title='Đăng ký'>
<i class='fas fa-user'/> Register</a> <span>/</span> <a class='moc-my-account' href='javascript:void(0);' onclick='login()' title='Đăng nhập'><i class='fas fa-sign-in-alt'/> Login</a>
</div>
</div>
</div>
</div>
<div class='clear'/>
<div class='header-bottom'>
<div class='container'>
<div class='row'>
<div class='col col-12 col-tb-12 col-mb-12'>
<div id='primary-navigation' itemscope='' itemtype='http://schema.org/SiteNavigationElement' role='navigation'>
<nav>
<ul class='menu clearfix' id='menu-menu-1'>
<li class='menu-item menu-item-type-custom'><a href='https://www.toishare.net' style='font-weight:600'><i class='fas fa-house-damage'/> HOME</a></li>
<li class='menu-item-has-children'><a href='/search/label/Blogger?&max-results=9' style='font-weight:600'><i class='fab fa-blogger-b'/> BLOGSPOT</a>
<ul class='sub-menu' style='min-width:201px'>
<li class='menu-item menu-item-type-taxonomy'><a href='/search/label/Blogger?&max-results=9'><i class='fas fa-code'/> Thủ thuật blogspot</a></li>
<li class='menu-item menu-item-type-taxonomy'><a href='/search/label/Blogger%20fix?&max-results=9'><i class='fas fa-wrench'/> Fix lỗi template</a></li>
<li class='menu-item-has-children'><a href='/search/label/Template%20Blogspot?&max-results=9'><i class='far fa-file-code'/> Template Blogspot</a>
<ul class='sub-menu'>
<li class='menu-item menu-item-type-taxonomy' id='menu-item-2035'><a href='/search/label/Template%20Blogspot?&max-results=9'> Miễn phí</a></li>
<li class='menu-item menu-item-type-taxonomy' id='menu-item-2036'><a href='/search/label/Template%20Blogspot?&max-results=9'> Có phí</a></li>
</ul>
</li>
</ul>
</li>
<li class='menu-item-has-children'><a href='/search/label/Facebook?&max-results=9' style='font-weight:600'><i class='fab fa-facebook-square'/> FACEBOOK</a>
<ul class='sub-menu'>
<li class='menu-item menu-item-type-custom'><a href='/search/label/Report%20Facebook?&max-results=9'><i class='fas fa-angle-double-right'/> Report</a></li>
<li class='menu-item menu-item-type-custom'><a href='/search/label/Unlock%20Facebook?&max-results=9'><i class='fas fa-angle-double-right'/> Unlock</a></li>
<li class='menu-item menu-item-type-custom'><a href='/search/label/Checkpass%20Facebook?&max-results=9'><i class='fas fa-angle-double-right'/> Checkpass</a></li>
<li class='menu-item menu-item-type-custom'><a href='/search/label/Bảo%20Mật?&max-results=9'><i class='fas fa-angle-double-right'/> Bảo mật</a></li>
</ul>
</li>
<li class='menu-item-has-children'><a href='/search/label/PSD?&max-results=9' style='font-weight:600'><i class='fas fa-paint-brush'/> PHOTOSHOP</a>
<ul class='sub-menu'>
<li class='menu-item menu-item-type-custom'><a href='/search/label/PSD?&max-results=9'><i class='fas fa-arrow-right'/> File PSD</a></li>
<li class='menu-item menu-item-type-custom'><a href='/search/label/Brush?&max-results=9'><i class='fas fa-arrow-right'/> Brush</a></li>
</ul>
</li>
<li class='menu-item menu-item-type-taxonomy iconmenu'><a class='ripple' href='javascript:alert("Blog đã cập nhật thêm khung comment và search live mới.");' title='Thông báo mới'><i class='fas fa-bell'/></a></li>
<li class='menu-item menu-item-type-taxonomy iconmenu'><a onclick='feelingLucky();' title='Bài viết ngẫu nhiên'><i aria-hidden='true' class='fas fa-random'/></a></li>
</ul></nav>
</div>
<div id='moc-phu'/>
</div>
</div>
</div>
</div>
</header>
<div class='clear'/>
<link crossorigin='anonymous' href='https://use.fontawesome.com/releases/v5.5.0/css/all.css' integrity='sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU' rel='stylesheet'/>Bước 3: Phải chắc chắn rằng bạn đã có thư viện jquery, nếu chưa thì thêm đoạn js này lên trên thẻ </head> nhé
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>Bước 4: Thêm đoạn js phía dưới lên trên thẻ </body>
<script type='text/javascript'>Bước 5: Để trang trí bố cục cho hợp lý bạn thêm css này dưới thẻ ]]></b:skin>
//<![CDATA[
// Menu default
jQuery(document).ready(function ($) {
$('#primary-navigation, .widget_nav_menu').addClass('toggle-menu');
$('.toggle-menu ul.sub-menu, .toggle-menu ul.children').addClass('toggle-submenu');
$('.toggle-menu ul.sub-menu').parent().addClass('toggle-menu-item-parent');
$('.toggle-caret').click(function (e) {
$(this).parent().toggleClass('active').children('.toggle-submenu').toggleClass('active')
})
});
jQuery(document).ready(function ($) {
$(document).click(function (e) {
if (e.target.id == 'show-menu') {
$("#primary-navigation, #moc-phu").toggleClass("active")
}
if (e.target.id == 'nav-icon2') {
$("#primary-navigation, #moc-phu").toggleClass("active")
}
if (e.target.id == 'moc-phu' || e.target.id == 'close-menu') {
$("#primary-navigation, #moc-phu").removeClass("active")
}
if (e.target.id == 'show-search') {
$("#search-form").toggleClass("active")
} else if (e.target.id != 'search-keyword' && e.target.id != 'cat' && e.target.id != 'search-submit') {
$("#search-form").removeClass("active")
}
})
});
// Menu scrolling mouse
jQuery(document).ready(function ($) {
jQuery(window).scroll(function () {
if (jQuery(this).scrollTop() > 0) {
jQuery('#site-header, #main').addClass('filling')
} else {
jQuery('#site-header, #main').removeClass('filling')
}
})
});
// Random post
function showLucky(e) {
for (var t = e.feed, a = (t.entry || [], t.entry[0]), c = 0; c < a.link.length; ++c) "alternate" == a.link[c].rel && (window.location = a.link[c].href)
}
function fetchLuck(e) {
script = document.createElement("script"), script.src = "/feeds/posts/summary?start-index=" + e + "&max-results=1&alt=json-in-script&callback=showLucky", script.type = "text/javascript", document.getElementsByTagName("head")[0].appendChild(script)
}
function readLucky(e) {
var t = e.feed,
a = parseInt(t.openSearch$totalResults.$t, 10),
c = Math.floor(Math.random() * a);
c++, fetchLuck(c)
}
function feelingLucky() {
var e = document.createElement("script");
e.type = "text/javascript", e.src = "/feeds/posts/summary?max-results=0&alt=json-in-script&callback=readLucky", document.getElementsByTagName("head")[0].appendChild(e)
}
//]]>
</script>
<!-- MOC Default Layout CSS -->Bước 6: Cuối cùng, hãy tìm ]]></b:skin> và thêm đoạn css phía dưới lên thẻ vừa tìm
<style>
/*--------------------------------------------------------------
12.0 Layout
--------------------------------------------------------------*/
.right{float:right}
.left{float:left}
.col{position:relative;width:100%;padding:0 10px}
.row.small{margin-right:-5px;margin-left:-5px}
.small > .col{padding:0 5px}
.col-12{-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}
.col-11{-ms-flex:0 0 91.666667%;flex:0 0 91.666667%;max-width:91.666667%}
.col-10{-ms-flex:0 0 83.333333%;flex:0 0 83.333333%;max-width:83.333333%}
.col-9{-ms-flex:0 0 75%;flex:0 0 75%;max-width:75%}
.col-8{-ms-flex:0 0 66.666667%;flex:0 0 66.666667%;max-width:66.666667%}
.col-7{-ms-flex:0 0 58.333333%;flex:0 0 58.333333%;max-width:58.333333%}
.col-6{-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}
.col-5{-ms-flex:0 0 41.666667%;flex:0 0 41.666667%;max-width:41.666667%}
.col-4{-ms-flex:0 0 33.333333%;flex:0 0 33.333333%;max-width:33.333333%}
.col-3{-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}
.col-2{-ms-flex:0 0 16.666667%;flex:0 0 16.666667%;max-width:16.666667%}
.col-1{-ms-flex:0 0 8.333333%;flex:0 0 8.333333%;max-width:8.333333%}
.col-0{display:none}
.col-0.right{left:100%}
.col-1.right{left:91.666667%}
.col-2.right{left:83.333333%}
.col-3.right{left:75%}
.col-4.right{left:66.666667%}
.col-5.right{left:58.333333%}
.col-6.right{left:50%}
.col-7.right{left:41.666667%}
.col-8.right{left:33.333333%}
.col-9.right{left:25%}
.col-10.right{left:16.666667%}
.col-11.right{left:8.333333%}
.col-12.right{left:0}
.col-0.left{right:100%}
.col-1.left{right:91.666667%}
.col-2.left{right:83.333333%}
.col-3.left{right:75%}
.col-4.left{right:66.666667%}
.col-5.left{right:58.333333%}
.col-6.left{right:50%}
.col-7.left{right:41.666667%}
.col-8.left{right:33.333333%}
.col-9.left{right:25%}
.col-10.left{right:16.666667%}
.col-11.left{right:8.333333%}
.col-12.left{right:0}
@media screen and (max-width:992px) {
.col-lg-12{-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}
.col-lg-11{-ms-flex:0 0 91.666667%;flex:0 0 91.666667%;max-width:91.666667%}
.col-lg-10{-ms-flex:0 0 83.333333%;flex:0 0 83.333333%;max-width:83.333333%}
.col-lg-9{-ms-flex:0 0 75%;flex:0 0 75%;max-width:75%}
.col-lg-8{-ms-flex:0 0 66.666667%;flex:0 0 66.666667%;max-width:66.666667%}
.col-lg-7{-ms-flex:0 0 58.333333%;flex:0 0 58.333333%;max-width:58.333333%}
.col-lg-6{-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}
.col-lg-5{-ms-flex:0 0 41.666667%;flex:0 0 41.666667%;max-width:41.666667%}
.col-lg-4{-ms-flex:0 0 33.333333%;flex:0 0 33.333333%;max-width:33.333333%}
.col-lg-3{-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}
.col-lg-2{-ms-flex:0 0 16.666667%;flex:0 0 16.666667%;max-width:16.666667%}
.col-lg-1{-ms-flex:0 0 8.333333%;flex:0 0 8.333333%;max-width:8.333333%}
.col-lg-0{display:none}
.col-lg-top{margin-bottom:20px}
.row.small-lg{margin-right:-5px;margin-left:-5px}
.small-lg > .col{padding:0 5px}
.col-lg-0.right{left:100%}
.col-lg-1.right{left:91.666667%}
.col-lg-2.right{left:83.333333%}
.col-lg-3.right{left:75%}
.col-lg-4.right{left:66.666667%}
.col-lg-5.right{left:58.333333%}
.col-lg-6.right{left:50%}
.col-lg-7.right{left:41.666667%}
.col-lg-8.right{left:33.333333%}
.col-lg-9.right{left:25%}
.col-lg-10.right{left:16.666667%}
.col-lg-11.right{left:8.333333%}
.col-lg-12.right{left:0}
.col-lg-0.left{right:100%}
.col-lg-1.left{right:91.666667%}
.col-lg-2.left{right:83.333333%}
.col-lg-3.left{right:75%}
.col-lg-4.left{right:66.666667%}
.col-lg-5.left{right:58.333333%}
.col-lg-6.left{right:50%}
.col-lg-7.left{right:41.666667%}
.col-lg-8.left{right:33.333333%}
.col-lg-9.left{right:25%}
.col-lg-10.left{right:16.666667%}
.col-lg-11.left{right:8.333333%}
.col-lg-12.left{right:0}
}
@media screen and (max-width:767px) {
.row.large{margin-right:-10px;margin-left:-10px}
.large .col{padding:0 10px}
.col-tb-12{-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}
.col-tb-11{-ms-flex:0 0 91.666667%;flex:0 0 91.666667%;max-width:91.666667%}
.col-tb-10{-ms-flex:0 0 83.333333%;flex:0 0 83.333333%;max-width:83.333333%}
.col-tb-9{-ms-flex:0 0 75%;flex:0 0 75%;max-width:75%}
.col-tb-8{-ms-flex:0 0 66.666667%;flex:0 0 66.666667%;max-width:66.666667%}
.col-tb-7{-ms-flex:0 0 58.333333%;flex:0 0 58.333333%;max-width:58.333333%}
.col-tb-6{-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}
.col-tb-5{-ms-flex:0 0 41.666667%;flex:0 0 41.666667%;max-width:41.666667%}
.col-tb-4{-ms-flex:0 0 33.333333%;flex:0 0 33.333333%;max-width:33.333333%}
.col-tb-3{-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}
.col-tb-2{-ms-flex:0 0 16.666667%;flex:0 0 16.666667%;max-width:16.666667%}
.col-tb-1{-ms-flex:0 0 8.333333%;flex:0 0 8.333333%;max-width:8.333333%}
.col-tb-0{display:none}
.col-tb-top{margin-bottom:20px}
.row.small-tb{margin-right:-5px;margin-left:-5px}
.small-tb > .col{padding:0 5px}
.col-tb-0.right{left:100%}
.col-tb-1.right{left:91.666667%}
.col-tb-2.right{left:83.333333%}
.col-tb-3.right{left:75%}
.col-tb-4.right{left:66.666667%}
.col-tb-5.right{left:58.333333%}
.col-tb-6.right{left:50%}
.col-tb-7.right{left:41.666667%}
.col-tb-8.right{left:33.333333%}
.col-tb-9.right{left:25%}
.col-tb-10.right{left:16.666667%}
.col-tb-11.right{left:8.333333%}
.col-tb-12.right{left:0}
.col-tb-0.left{right:100%}
.col-tb-1.left{right:91.666667%}
.col-tb-2.left{right:83.333333%}
.col-tb-3.left{right:75%}
.col-tb-4.left{right:66.666667%}
.col-tb-5.left{right:58.333333%}
.col-tb-6.left{right:50%}
.col-tb-7.left{right:41.666667%}
.col-tb-8.left{right:33.333333%}
.col-tb-9.left{right:25%}
.col-tb-10.left{right:16.666667%}
.col-tb-11.left{right:8.333333%}
.col-tb-12.left{right:0}
}
@media screen and (max-width:600px) {
.col-mb-12{-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}
.col-mb-11{-ms-flex:0 0 91.666667%;flex:0 0 91.666667%;max-width:91.666667%}
.col-mb-10{-ms-flex:0 0 83.333333%;flex:0 0 83.333333%;max-width:83.333333%}
.col-mb-9{-ms-flex:0 0 75%;flex:0 0 75%;max-width:75%}
.col-mb-8{-ms-flex:0 0 66.666667%;flex:0 0 66.666667%;max-width:66.666667%}
.col-mb-7{-ms-flex:0 0 58.333333%;flex:0 0 58.333333%;max-width:58.333333%}
.col-mb-6{-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}
.col-mb-5{-ms-flex:0 0 41.666667%;flex:0 0 41.666667%;max-width:41.666667%}
.col-mb-4{-ms-flex:0 0 33.333333%;flex:0 0 33.333333%;max-width:33.333333%}
.col-mb-3{-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}
.col-mb-2{-ms-flex:0 0 16.666667%;flex:0 0 16.666667%;max-width:16.666667%}
.col-mb-1{-ms-flex:0 0 8.333333%;flex:0 0 8.333333%;max-width:8.333333%}
.col-mb-0{display:none}
.col-mb-top{margin-bottom:10px}
.row.small-mb{margin-right:-5px;margin-left:-5px}
.small-mb > .col{padding:0 5px}
.col-mb-0.right{left:100%}
.col-mb-1.right{left:91.666667%}
.col-mb-2.right{left:83.333333%}
.col-mb-3.right{left:75%}
.col-mb-4.right{left:66.666667%}
.col-mb-5.right{left:58.333333%}
.col-mb-6.right{left:50%}
.col-mb-7.right{left:41.666667%}
.col-mb-8.right{left:33.333333%}
.col-mb-9.right{left:25%}
.col-mb-10.right{left:16.666667%}
.col-mb-11.right{left:8.333333%}
.col-mb-12.right{left:0}
.col-mb-0.left{right:100%}
.col-mb-1.left{right:91.666667%}
.col-mb-2.left{right:83.333333%}
.col-mb-3.left{right:75%}
.col-mb-4.left{right:66.666667%}
.col-mb-5.left{right:58.333333%}
.col-mb-6.left{right:50%}
.col-mb-7.left{right:41.666667%}
.col-mb-8.left{right:33.333333%}
.col-mb-9.left{right:25%}
.col-mb-10.left{right:16.666667%}
.col-mb-11.left{right:8.333333%}
.col-mb-12.left{right:0}
}
</style>
/* CSS Menu*/Chú ý:
.container{max-width:1120px}
.container{width:100%;padding:0 10px;margin:0 auto}
.header-bottom{width:100%;float:left;box-sizing:border-box}
#site-header{background:#2e8b57;position:fixed;top:0;left:0;float:left;width:100%;box-shadow:0 1px 3px 0 rgba(26,26,26,.1);z-index:9}
.header-middle{padding:9px 0 10px 0;transition:all .5s ease;-moz-transition:all .5s ease;-webkit-transition:all .5s ease}
.header-middle .row{align-items:center}
.header-middle,.header-middle a{position:relative;z-index:1;color:#fff}
.header-bottom{background:#fff!important}
.header-middle img{max-width:inherit;width:75%;height:auto;-webkit-filter:brightness(0) invert(1);filter:brightness(0) invert(1)}
.header-middle .button button{width:100%;height:40px;padding:0;background:transparent;color:#666}
#search-form{position:relative;max-width:600px}
#search-form input{background:#f6f6f6;width:75%;display:inline-block;border:0;border-radius:0 3px 3px 0;padding:0 70px 0 20px;line-height:45px}
.moc-list-category{float:left;width:25%;right:75%;border:0;border-radius:3px 0 0 3px;padding:0 15px;cursor:pointer}
#search-form button{border:0;position:absolute;background:#2e8b57;color:#fff;top:4px;right:4px;font-size:13px;padding:11px 21px;border-radius:4px}
.moc-list-category{background-color:#f1f1f1}
#show-menu,#show-search{display:none}
#show-menu:before{content:"\f0c9";font-family:'Font Awesome 5 Free'}
#show-search:before{content:"\f002";font-family:'Font Awesome 5 Free'}
#primary-navigation ul{margin:0;padding:0}
#primary-navigation li{list-style:none;float:left;position:relative}
#primary-navigation li a{float:left;display:inline-block;display:block;padding:7.8px 10px}
#primary-navigation li a:hover{background:#fafafa}
#primary-navigation ul.sub-menu li a,,#primary-navigation .sub-menu li:hover > a{background:#2e8b57}
#primary-navigation li i{width:22px;text-align:center}
li.menu-item-has-children > a:after{font-family:'Font Awesome 5 Free';font-weight:900;content:"\f101";font-size:15px;float:right;margin-left:10px}
/*li.menu-item-has-children:hover > a:after{content:"\f103"}*/
.primary-menu li a:hover{background-color:#f5f5f5}
#primary-navigation ul.sub-menu{position:absolute;visibility:hidden;opacity:0;-webkit-transform:translateY(10px);-moz-transform:translateY(10px);transform:translateY(10px);top:40px;background:#fff;min-width:149px;padding:0;margin:0;transition:all .3s ease}
#primary-navigation ul.sub-menu li,#primary-navigation ul.sub-menu a{width:100%;color:#fff}
#primary-navigation ul.sub-menu li{border-top:1px solid #628c0e}
#primary-navigation li > ul.sub-menu{left:0}
#primary-navigation li > ul.sub-menu > li > ul{top:-1px;left:100%}
#primary-navigation li:hover > ul.sub-menu{opacity:1;visibility:visible;-webkit-transform:translateY(0);-moz-transform:translateY(0);transform:translateY(0)}
#moc-phu{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.7);z-index:98;display:none}
#moc-phu.active{display:block}
#close-menu{display:block;padding:15px;margin-bottom:20px;text-align:center;background:#f0f0f0;cursor:pointer}
.navigation.pagination{margin-top:30px;text-align:center}
.row.small-mb{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-right:-10px;margin-left:-10px}
#label{float:left}
.header-bottom .container,.header-bottom .row{max-width:1160px!important}
#header-inner{float:left}
/* Label drop */
.dropmedown select{outline:0;cursor:pointer}
.dropmedown{float:left;width:150px!important;height:45px;display:inline-block;position:relative;overflow:hidden;width:100%;background:#f1f1f1;border:1px solid transparent;border-radius:3px 0 0 3px;line-height:43px;color:#333}
.dropmedown:before,.dropmedown:after{content:'';position:absolute;z-index:2;top:16px;right:12px;width:0;height:0;line-height:36px;border:4px dashed;border-color:#888 transparent;pointer-events:none}
.dropmedown:before{border-bottom-style:solid;border-top:0}
.dropmedown:after{margin-top:8px;border-top-style:solid;border-bottom:0}
.dropdown-select{position:relative;width:100%;margin:0;padding:6px 8px 6px 10px;height:38px;line-height:25px;font-size:14px;font-weight:400;color:#333;background:transparent;border:0;border-radius:0;-webkit-appearance:none}
.dropdown-select>option{margin:3px;padding:6px 8px;text-shadow:none;background:#f8f8f8;outline:0;border:0;border-radius:3px;cursor:pointer}
span.label-count{float:right!important}
#Label1{float:left}
#Label1 h2{display:none}
/* Menu hide */
#site-header.filling{position:fixed;width:100%;top:0;left:0;z-index:10}
#site-header.filling .header-middle{height:0;padding:0;overflow:hidden}
li.iconmenu{float:right!important}
.iconmenu i{font-size:14px}
.iconmenu a{padding:0!important;width:34px;height:40px;line-height:40px;text-align:center}
.iconmenu a:hover{background:transparent!important}
/* Responsive Menu */
@media screen and (max-width: 980px) {
#site-header{position:relative!important}
#site-header.filling{margin-top:0!important}
.iconmenu{display:none!important}
}
@media screen and (max-width:767px) {
.header-middle{float:left!important;width:100%!important}
.wrap{max-width:100%}
.row{width:95%!important}
#label,form.tim-kiem{display:none!important}
button.menu-toggle:before{content:"\f142"}
.header-logo{margin-right:0!important}
#main-wrapper.post{border-left:0;border-right:0}
.header-middle img{max-width:130px;margin-top:6px;float:left;position:relative;z-index:1;overflow:hidden;color:#fff}
#search-form{display:none;margin-bottom:10px}
#search-form.active{display:block}
#show-menu{display:block;text-align:center;width:50px;height:50px;line-height:44px;float:left;cursor:pointer;z-index:1}
#show-search{display:block;text-align:center;width:50px;height:50px;line-height:44px;float:right;cursor:pointer;z-index:1}
#primary-navigation{position:fixed;width:300px;height:100%;top:0;left:-300px;z-index:99;background:#fff;overflow-y:auto}
#primary-navigation.active{left:0}
#primary-navigation li{width:100%;border-top:1px solid #e5e5e5}
#primary-navigation li a{float:left;width:100%;text-align:left;display:block}
#primary-navigation .sub-menu li:hover > a{color:#fff}
#primary-navigation ul.sub-menu{display:none!important;position:relative!important;top:0!important;left:0!important}
#primary-navigation ul.sub-menu li a{padding-left:35px}
#primary-navigation ul.sub-menu li ul li a{padding-left:50px}
span.toggle-caret.fas{position:absolute;right:0;top:0;background:#fff;width:40px;line-height:40px;text-align:center;cursor:pointer;z-index:1}
span.toggle-caret.fas:before{content:"\f0d7";font-family:'Font Awesome 5 Free';transition:all .5s ease}
.active > span.toggle-caret.fas:before{content:"\f0d8";transition:all .5s ease}
#primary-navigation ul.sub-menu{display:none!important}
#primary-navigation ul.sub-menu.active{display:block!important}
#moc-breadcrumb{margin-top:-10px;margin-bottom:10px}
.number-product{width:100%;float:left;margin:0 0 -10px;background:#fff}
.widget-title a.category-children{display:none}
#header-inner .titlewrapper h1{text-align:center!important;font-size:20px}
#primary-navigation ul.sub-menu li a,.number-product a{margin:0}
.number-product a{display:inline-block;width:50%;float:left;text-align:center;line-height:40px}
.number-product a,.bp-dark .number-product a{color:#669900!important}
.number-product span,.cart-contents{display:none!important}
.container{padding:0!important}
.row.small-mb{width:100%!important;margin:0!important}
}
Tùy vào template, có temp hiển thị đẹp, temp hiển thị chưa được đẹp. Nên bạn tự edit sao cho hợp với blog của mình nhé.Font mình dùng trong code này là Font Awesome 5, các bạn có thể đổi thành phiên bản font khác nhé, nếu muốn thay đổi thành Font Awesome phiên bản cũ thì bạn có thể vào đây để tham khảo và thay đổi nhé. Chúc bạn thành công !
No comments