Tạo phần header chuyên nghiệp cho trang blogspot của bạn

Chào các bạn, theo yêu cầu của một số blogger thì hôm nay mình sẽ chia sẻ với các bạn cách tạo cho blogspot một phần header cực chuyên nghiệp, menu này mình tách từ trang MShop Nako và tùy chỉnh lại css. Làm theo hướng dẫn để có được 1 header hoàn hảo nhé :3

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 -->
<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 == &quot;BEHIND&quot;'>
                  <!--
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='&quot;background-image: url(\&quot;&quot; + data:sourceUrl + &quot;\&quot;); &quot;                      + &quot;background-position: &quot;                      + data:backgroundPositionStyleStr + &quot;; &quot;                      + data:widthStyleStr                      + &quot;min-height: &quot; + data:height                      + &quot;_height: &quot; + data:height                      + &quot;background-repeat: no-repeat; &quot;' 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 + &quot;_headerimg&quot;' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>
                    </a>
                    <!--Show the description-->
                    <b:if cond='data:imagePlacement == &quot;BEFORE_DESCRIPTION&quot;'>
                      <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 != &quot;&quot;'>
    <h2><span><data:title/></span></h2>
  </b:if>
  <div expr:class='&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;'>
    <b:if cond='data:display == &quot;list&quot;'>
<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='&quot;label-size label-size-&quot; + 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?&amp;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?&amp;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?&amp;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?&amp;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?&amp;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?&amp;max-results=9'> Có phí</a></li>
  </ul>
</li>
</ul>
</li>
<li class='menu-item-has-children'><a href='/search/label/Facebook?&amp;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?&amp;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?&amp;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?&amp;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?&amp;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?&amp;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?&amp;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?&amp;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(&quot;Blog đã cập nhật thêm khung comment và search live mới.&quot;);' 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'/>
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é
<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'>
//<![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>
Bước 5: Để trang trí bố cục cho hợp lý bạn thêm css này dưới thẻ ]]></b:skin>
<!-- MOC Default Layout CSS -->
<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 &gt; .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 &gt; .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 &gt; .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 &gt; .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>
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
/* CSS Menu*/
.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}
}
Chú ý:
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 !

35 nhận xét:

  1. Css hình như bị thiếu phải ko a

    Trả lờiXóa
  2. dưới b:skin mà còn cần <style>...</style> nữa hả ad

    Trả lờiXóa
    Trả lời
    1. Trong thẻ style là bố cục, thêm vào trong skin vẫn được. Để cho dễ nhìn nhé

      Xóa
  3. làm cái chát có hình noel góc phải màn hình đi bác đẹp quá

    Trả lờiXóa
  4. Hướng dẫn làm cái noel đi man :D

    Trả lờiXóa
  5. share phần related posts đi a :v

    Trả lờiXóa
  6. anh Bình chỉ cách làm mấy cái icon blog bên ngoài nền đi anh đẹp quá

    Trả lờiXóa
  7. ồ, code của mình đây mà

    Trả lờiXóa
  8. [img]https://www.qoobee.com/wp-content/uploads/2018/11/pray.gif[/img]

    Trả lờiXóa
  9. Trả lời
    1. :)) Bạn thì chỉ ngồi đợi cho người khác share rồi liếm về mà sửa copyright chứ có khi nào mua mà hỏi làm gì ?

      Xóa
    2. [img]https://www.qoobee.com/wp-content/uploads/2018/11/EMO_106.gif[/img]

      Xóa
    3. Nam Ripper mà cũng cần mua temp à

      Xóa

» Hướng dẫn nhúng hình ảnh: [img]http://domain.com/image.png[/img]
» Tham trang khảo ảnh động cực cute: Qoobee
» Hướng dẫn nhúng link trang web: <a href="url" rel="nofollow">Link</a>
» Không chửi tục, nói bậy, quảng cáo thông qua khung Comment.
» Không spam link, chia sẻ các link không liên quan đến bài viết.
» Không xuyên tạc, bôi nhọ tổ chức hay cá nhân nào.
» Mọi bình luận sai nội quy sẽ bị xóa mà không cần báo trước.