Share menu homedy chuẩn Responsive tuyệt đẹp cho blogger

Nếu bạn đang tìm kiếm thanh menu có thiết kế đẹp chuyên nghiệp reponsive, sub menu, tương tự như trang web chuyên đăng tin về bất động sản homedy.com thì đây là bài viết dành cho bạn. Code này mình sao chép hầu như nguyên mẫu nhưng có lược bỏ một vài chỗ và sử dụng jquery thay thế.

Một vài hình ảnh

Giao diện menu kích thước màn hình 1024px trở lên

Share menu homedy chuẩn Responsive tuyệt đẹp cho blogger

Giao diện trên Mobile

Giao diện sub menu trên desktop

Dưới đây là code của thanh menu

1. Code HTML

Copy vào sau <body> (Hoặc thay vị trí menu của bạn cần hiện)

<div class='header fixed'>
  <div class='left'>
    
    <div class='ic-menu-bar'>
      <div class='bar1' />
      <div class='bar2' />
      <div class='bar3' />
    </div>
    <a href='/' title='Yingvn Demo'>
      <img alt='Yignvn Demo' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJOXT88hyphenhyphenndtJ7SWWECCEZqRt9DQHmW6Vvhe8piJ6WXP2Ay9apCOrW4-UhNbO70Rfy1G3vDNeZqtSuuJaal3EWVdaEkBUJAlyNeLiAvk_sb98mfjP8YnNnxP7aKNRrD1g6hkkgFmsJ4GsO/s1600/logo.png' width='166' />
    </a>
  </div>
  <div class='center' id='menu-bar'>
    
    <button aria-label='Đăng tin' class='btn-blue post-product' role='product' type='button'>Đăng tin
    </button>
    <nav itemtype='http://schema.org/SiteNavigationElement' role='navigation'>
      
      <ul class='menu-bar' id='menu'>
        <li>
          <div class='login-mobile'>
            <a href='#' title='Đăng ký'>Đăng ký
            </a>
            <a href='#' title='Đăng nhập'>Đăng nhập
            </a>
          </div>
        </li>
        <li itemprop='name'>
          <a class='url-project' href='#' itemprop='url' title='Dự án bất động sản, dự án nhà đất'>Dự án
          </a>
          <ul class='parent-menu'>
            <li class='parent-item'>
              <a href='#' title='Dự án căn hộ'>Căn hộ
              </a>
            </li>
            <li class='parent-item'>
              <a href='#' title='Dự án nhà mặt phố, shophouse'>Nhà mặt phố, shophouse
              </a>
            </li>
            <li class='parent-item'>
              <a href='#' title='Dự án nhà biệt thự liền kề'>Nhà biệt thự liền kề
              </a>
            </li>
            <li class='parent-item'>
              <a href='#' title='Dự án đất'>Đất
              </a>
            </li>
            <li class='parent-item'>
              <a href='#' title='Dự án văn phòng'>Văn phòng
              </a>
            </li>
            <li class='parent-item'>
              <a href='#' title='Dự án bất động sản khác'>Bất động sản khác
              </a>
            </li>
          </ul>
          <button class='accordion' onclick='arrow_animate(this)' />
          
        </li>
        <li itemprop='name'>
          <a class='url-sell' href='#' title='Mua bán nhà đất - bất động sản'>Mua bán
          </a>
          <ul class='parent-menu'>
            <li class='parent-item'>
              <a href='#' title='Bán căn hộ'>Căn hộ 
                <span class='arrow-left'/> 
              </a>
              <ul class='sub-menu'>
                <li class='menu-item'>
                  <a href='#' title='Bán căn hộ giá rẻ'>Căn hộ giá rẻ
                  </a>
                </li>
                <li class='menu-item'>
                  <a href='#' title='Bán căn hộ mini'>Căn hộ mini
                  </a>
                </li>
                <li class='menu-item'>
                  <a href='#' title='Bán căn hộ trung cấp'>Căn hộ trung cấp
                  </a>
                </li>
                <li class='menu-item'>
                  <a href='#' title='Bán căn hộ cao cấp'>Căn hộ cao cấp
                  </a>
                </li>
                <li class='menu-item'>
                  <a href='#' title='Bán căn hộ Penthouse'>Căn hộ Penthouse
                  </a>
                </li>
                <li class='menu-item'>
                  <a href='#' title='Bán căn hộ Duplex'>Căn hộ Duplex
                  </a>
                </li>
                <li class='menu-item'>
                  <a href='#' title='Bán căn hộ Skyvilla'>Căn hộ Skyvilla
                  </a>
                </li>
                <li class='menu-item'>
                  <a href='#' title='Bán căn hộ Loft-house'>Căn hộ Loft-house
                  </a>
                </li>
                <li class='menu-item'>
                  <a href='#' title='Bán căn hộ Studio'>Căn hộ Studio
                  </a>
                </li>
                <li class='menu-item'>
                  <a href='#' title='Bán căn hộ Condotel'>Căn hộ Condotel
                  </a>
                </li>
                <li class='menu-item'>
                  <a href='#' title='Bán căn hộ Officetel'>Căn hộ Officetel
                  </a>
                </li>
              </ul>
              
              <button class='accordion' onclick='arrow_animate(this)' />
            </li>
            <li class='parent-item'>
              <a href='#' title='Bán nhà riêng'>Nhà riêng
              </a>
            </li>
            <li class='parent-item'>
              <a href='#' title='Bán nhà mặt phố, shophouse'>Nhà mặt phố, shophouse 
                <span class='arrow-left'/>
              </a>
              <ul class='sub-menu'>
                <li class='menu-item'>
                  <a href='#' title='Bán bán nhà mặt phố'>Nhà mặt phố
                  </a>
                </li>
                <li class='menu-item'>
                  <a href='#' title='Bán nhà phố thương mại (Shophouse)'>Nhà phố thương mại (Shophouse) 
                  </a>
                </li>
              </ul>
              
              <button class='accordion ' onclick='arrow_animate(this)' />
            </li>
            <li class='parent-item'>
              <a href='#' title='Bán nhà biệt thự, liền kề'>Nhà biệt thự, liền kề 
                <span class='arrow-left'/>
              </a>
              <ul class='sub-menu'>
                <li class='menu-item'>
                  <a href='#' title='Bán nhà liền kề'>Nhà liền kề
                  </a>
                </li>
                <li class='menu-item'>
                  <a href='#' title='Bán biệt thự'>Biệt thự
                  </a>
                </li>
                <li class='menu-item'>
                  <a href='#' title='Bán biệt thự nghỉ dưỡng'>Biệt thự nghỉ dưỡng
                  </a>
                </li>
                <li class='menu-item'>
                  <a href='#' title='Bán biệt thự đơn lập'>Biệt thự đơn lập
                  </a>
                </li>
                <li class='menu-item'>
                  <a href='#' title='Bán biệt thự song lập'>Biệt thự song lập
                  </a>
                </li>
                <li class='menu-item'>
                  <a href='#' title='Bán biệt thự tứ lập'>Biệt thự tứ lập
                  </a>
                </li>
              </ul>
              
              <button class='accordion ' onclick='arrow_animate(this)' />
            </li>
            <li class='parent-item'>
              <a href='/ban-dat' title='Bán đất?src=mega_menu'>Đất 
                <span class='arrow-left'/>
              </a>
              <ul class='sub-menu'>
                <li class='menu-item'>
                  <a href='#' title='Bán đất nền dự án'>Đất nền dự án
                  </a>
                </li>
                <li class='menu-item'>
                  <a href='#' title='Bán đất nền thổ cư'>Đất nền thổ cư
                  </a>
                </li>
                <li class='menu-item'>
                  <a href='#' title='Bán đất du lịch, nghỉ dưỡng'>Đất du lịch, nghỉ dưỡng
                  </a>
                </li>
                <li class='menu-item'>
                  <a href='#' title='Bán đất công nghiệp'>Đất công nghiệp
                  </a>
                </li>
                <li class='menu-item'>
                  <a href='#' title='Bán đất nông, lâm nghiệp'>Đất nông, lâm nghiệp
                  </a>
                </li>
              </ul>
              
              <button class='accordion ' onclick='arrow_animate(this)' />
            </li>
            <li class='parent-item'>
              <a href='#' title='Bán bất động sản khác'>Bất động sản khác 
                <span class='arrow-left'/>
              </a>
              <ul class='sub-menu'>
                <li class='menu-item'>
                  <a href='#' title='Bán mặt bằng bán lẻ'>Mặt bằng bán lẻ
                  </a>
                </li>
                <li class='menu-item'>
                  <a href='#' title='Bán nhà xưởng, kho bãi'>Nhà xưởng, kho bãi
                  </a>
                </li>
                <li class='menu-item'>
                  <a href='#' title='Bán mặt bằng văn phòng'>Mặt bằng văn phòng
                  </a>
                </li>
                <li class='menu-item'>
                  <a href='#' title='Bán khách sạn'>Khách sạn
                  </a>
                </li>
                <li class='menu-item'>
                  <a href='#' title='Bán nhà trọ, phòng trọ'>Nhà trọ, phòng trọ
                  </a>
                </li>
                <li class='menu-item'>
                  <a href='#' title='Bán trang trại'>Trang trại
                  </a>
                </li>
              </ul>
              
              <button class='accordion ' onclick='arrow_animate(this)' />
            </li>
          </ul>
          <button class='accordion' onclick='arrow_animate(this)' />
          
        </li>
        <li itemprop='name'>
          <a class='url-lease' href='#' itemprop='url' title='Cho thuê nhà đất - bất động sản'>Cho thuê
          </a>
          <ul class='parent-menu'>
            <li class='parent-item'>
              <a href='#' title='Cho thuê căn hộ'>Căn hộ 
                <span class='arrow-left'/>
              </a>
              <ul class='sub-menu'>
                <li class='menu-item'>
                  <a href='#' title='Cho thuê căn hộ giá rẻ'>Căn hộ giá rẻ
                  </a>
                </li>
                <li class='menu-item'>
                  <a href='#' title='Cho thuê căn hộ mini'>Căn hộ mini
                  </a>
                </li>
                <li class='menu-item'>
                  <a href='#' title='Cho thuê căn hộ trung cấp'>Căn hộ trung cấp
                  </a>
                </li>
                <li class='menu-item'>
                  <a href='#' title='Cho thuê căn hộ cao cấp'>Căn hộ cao cấp
                  </a>
                </li>
                <li class='menu-item'>
                  <a href='#' title='Cho thuê căn hộ Penthouse'>Căn hộ Penthouse
                  </a>
                </li>
                <li class='menu-item'>
                  <a href='#' title='Cho thuê căn hộ Duplex'>Căn hộ Duplex
                  </a>
                </li>
                <li class='menu-item'>
                  <a href='#' title='Cho thuê căn hộ Skyvilla'>Căn hộ Skyvilla
                  </a>
                </li>
                <li class='menu-item'>
                  <a href='#' title='Cho thuê căn hộ Loft-house'>Căn hộ Loft-house
                  </a>
                </li>
                <li class='menu-item'>
                  <a href='#' title='Cho thuê căn hộ Studio'>Căn hộ Studio
                  </a>
                </li>
                <li class='menu-item'>
                  <a href='#' title='Cho thuê căn hộ Condotel'>Căn hộ Condotel
                  </a>
                </li>
              </ul>
              
              <button aria-label='menu' class='accordion' onclick='arrow_animate(this)' role='menu' type='button' />
            </li>
            <li class='parent-item'>
              <a href='#' title='Cho thuê căn hộ dịch vụ'>Căn hộ dịch vụ
              </a>
            </li>
            <li class='parent-item'>
              <a href='#' title='Cho thuê nhà riêng'>Nhà riêng
              </a>
            </li>
            <li class='parent-item'>
              <a href='#' title='Cho thuê nhà mặt phố, shophouse'>Nhà mặt phố, shophouse 
                <span class='arrow-left'/>
              </a>
              <ul class='sub-menu'>
                <li class='menu-item'>
                  <a href='#' title='Cho thuê nhà mặt phố'>Nhà mặt phố
                  </a>
                </li>
                <li class='menu-item'>
                  <a href='#' title='Cho thuê nhà phố thương mại (Shophouse)'>Nhà phố thương mại (Shophouse)
                  </a>
                </li>
              </ul>
              
              <button aria-label='menu' class='accordion' onclick='arrow_animate(this)' role='menu' type='button' />
            </li>
            <li class='parent-item'>
              <a href='#' title='Cho thuê nhà'>Nhà biệt thự, liền kề 
                <span class='arrow-left'/>
              </a>
              <ul class='sub-menu'>
                <li class='menu-item'>
                  <a href='#' title='Cho thuê nhà liền kề'>Nhà liền kề
                  </a>
                </li>
                <li class='menu-item'>
                  <a href='#' title='Cho thuê biệt thự'>Biệt thự
                  </a>
                </li>
                <li class='menu-item'>
                  <a href='#' title='Cho thuê biệt thự nghỉ dưỡng'>Biệt thự nghỉ dưỡng
                  </a>
                </li>
                <li class='menu-item'>
                  <a href='#' title='Cho thuê biệt thự đơn lập'>Biệt thự đơn lập
                  </a>
                </li>
                <li class='menu-item'>
                  <a href='#' title='Cho thuê biệt thự song lập'>Biệt thự song lập
                  </a>
                </li>
                <li class='menu-item'>
                  <a href='#' title='Cho thuê biệt thự tứ lập'>Biệt thự tứ lập
                  </a>
                </li>
              </ul>
              
              <button aria-label='menu' class='accordion' onclick='arrow_animate(this)' role='menu' type='button' />
            </li>
            <li class='parent-item'>
              <a href='#' title='Cho thuê nhà trọ, phòng trọ'>Nhà trọ, phòng trọ
              </a>
            </li>
            <li class='parent-item'>
              <a href='#' title='Cho thuê văn phòng'>Văn phòng 
                <span class='arrow-left'/>
              </a>
              <ul class='sub-menu'>
                <li class='menu-item'>
                  <a href='#' title='Cho thuê mặt bằng văn phòng'>Mặt bằng văn phòng
                  </a>
                </li>
                <li class='menu-item'>
                  <a href='#' title='Cho thuê Căn hộ Officetel'>Căn hộ Officetel
                  </a>
                </li>
                <li class='menu-item'>
                  <a href='#' title='Cho thuê Co-working space'>Co-working space
                  </a>
                </li>
              </ul>
              
              <button aria-label='menu' class='accordion' onclick='arrow_animate(this)' role='menu' type='button' />
            </li>
            <li class='parent-item'>
              <a href='#' title='Cho thuê cửa hàng, mặt bằng bán lẻ'>Cửa hàng, mặt bằng bán lẻ
              </a>
            </li>
            <li class='parent-item'>
              <a href='#' title='Cho thuê đất, nhà xưởng, kho bãi'>Đất, nhà xưởng, kho bãi
              </a>
            </li>
            <li class='parent-item'>
              <a href='#' title='Cho thuê bất động sản khác'>Bất động sản khác
              </a>
            </li>
          </ul>
          
          <button aria-label='menu' class='accordion' onclick='arrow_animate(this)' role='menu' type='button' />
        </li>
        <li itemprop='name'>
          <a class='url-myhomedy' href='#' itemprop='url' rel='nofollow' target='_blank' title='Thiết kế nhà đẹp'>Thiết kế nhà đẹp
          </a>
        </li>
        <li itemprop='name'>
          <a class='url-tinh-lai' href='#' itemprop='url' title='Tính lãi suất vay'>Tính lãi suất vay
          </a>
        </li>
        <li itemprop='name'>
          <a class='url-agency url-company' href='javascript:void(0)' itemprop='url' title='Danh bạ'>Danh bạ
          </a>
          <ul class='parent-menu'>
            <li class='parent-item'>
              <a href='#' itemprop='url' title='Danh sách nhà môi giới bất động sản'>Môi giới
              </a>
            </li>
            <li class='parent-item'>
              <a href='#' itemprop='url' title='Danh sách công ty bất động sản'>Doanh nghiệp
              </a>
            </li>
          </ul>
          
          <button aria-label='menu' class='accordion' onclick='arrow_animate(this)' role='menu' type='button' />
        </li>
        <li itemprop='name'>
          <a class='url-news' href='#' itemprop='url' title='Tin tức'>Tin tức
          </a>
          <ul class='parent-menu'>
            <li class='parent-item'>
              <a href='#' title='Thị trường'>Thị trường
              </a>
            </li>
            <li class='parent-item'>
              <a href='#' title='Review Bất động sản'>Review Bất động sản
              </a>
            </li>
            <li class='parent-item'>
              <a href='#' title='Hướng dẫn mua nhà'>Hướng dẫn mua nhà
              </a>
            </li>
            <li class='parent-item'>
              <a href='#' title='Hướng dẫn thuê nhà'>Hướng dẫn thuê nhà
              </a>
            </li>
            <li class='parent-item'>
              <a href='#' title='Dành cho môi giới'>Dành cho môi giới
              </a>
            </li>
            <li class='parent-item'>
              <a href='#' title='Nhà hạnh phúc'>Nhà hạnh phúc
              </a>
            </li>
          </ul>
          
          <button aria-label='menu' class='accordion' onclick='arrow_animate(this)' role='menu' type='button' />
        </li>
      </ul>
    </nav>
    
    <div class='box-bottom'>
      <a class='ic ic-facebook' href='#' title='Facebook' />
      <a class='ic ic-youtube' href='#' title='Youtube' />
      <a class='ic ic-call' href='#' title='Call' />
      <a class='ic ic-email' href='#' title='Email' />
    </div>
  </div>
  <div class='right'>
    <div class='not-logged-in'>
      <a href='#' title='Đăng ký'>Đăng ký
      </a>
      <span>/
      </span>
      <a href='#' title='Đăng nhập'>Đăng nhập
      </a>
    </div>
    <a class='btn-white' href='#' title='Đăng tin mới'>Đăng tin
    </a>
  </div>
</div>

2. Code CSS

Copy dán trên ]]></b:skin>

body{padding-top:50px;font-family:'Roboto',sans-serif;font-size:13px;font-weight:normal}
.header.fixed{position:fixed;top:0;z-index:1001;border-bottom:1px solid #ebebeb}
.header{width:100%;height:50px}
.header .left{width:20%;background:#fff;float:left;height:100%;border-bottom:1px solid #ebebeb}
.header .left .ic-menu-bar{float:left;margin:8px 16px;display:none}
.header .left .bar1,.header .left .bar2,.header .left .bar3{width:25px;height:3px;background-color:#333;margin:6px 0;transition:.4s}
.header .left .change .bar1{-webkit-transform:rotate(-45deg) translate(-6px,6px);transform:rotate(-45deg) translate(-6px,6px)}
.header .left .change .bar2{opacity:0}
.header .left .change .bar3{-webkit-transform:rotate(45deg) translate(-7px,-7px);transform:rotate(45deg) translate(-7px,-7px)}
.header .left img{max-width:100%;height:auto;margin-top:4px;margin-left:16px}
.header .center{width:55%;background:#fff;float:left;height:100%;border-bottom:1px solid #ebebeb}
.btn-blue{text-transform:uppercase;padding:10px 32px;border-radius:4px;color:#fff;background:#0098da;display:inline-block;border:none;display:none}
#menu-bar ul{list-style-type:none;margin:0;padding:0;position:absolute}
.center .menu-bar{list-style:none;margin:0}
#menu-bar li{float:left;margin-right:1px}
.accordion,.header .center .login-mobile,.header .center .box-bottom{display:none}
#menu-bar li a{display:block}
.center .menu-bar li a{float:left;padding:16px;font-size:14px;color:#27406d;text-transform:uppercase}
#menu-bar li ul{display:none;background-color:#fff;position:absolute;top:49px;border-radius:4px;z-index:2;box-shadow:0 8px 16px 0 rgba(0,0,0,.2);max-width:220px}
#menu-bar li ul.parent-menu::after{content:'';position:absolute;top:0;left:25%;width:0;height:0;border:6px solid transparent;border-bottom-color:#c8c8c8;border-top:0;margin-left:-6px;margin-top:-6px}
#menu-bar li ul.parent-menu::before{content:'';position:absolute;top:0;left:25%;width:0;height:0;border:5px solid transparent;border-bottom-color:#fff;border-top:0;margin-left:-5px;margin-top:-5px;z-index:1}
#menu-bar li:nth-child(2) ul.parent-menu::before,#menu-bar li:nth-child(2) ul.parent-menu::after{left:16%}
#menu-bar li ul li{display:block;float:none}
#menu-bar li ul li a{width:100%;white-space:nowrap;padding:10px;float:none;position:relative}
#menu-bar li ul li a:hover{background:#f5f5f5;color:#4c98da}
#menu-bar li a.active{color:#4c98da;font-weight:500}
#menu-bar ul li a:hover+.parent-menu,#menu-bar .parent-menu:hover{display:block}
.menu-bar .parent-menu .sub-menu{position:absolute;max-width:unset!important;left:100%;background:#f5f5f5!important;top:auto!important;margin-top:-38px!important;overflow:hidden}
.menu-bar .parent-menu .sub-menu .menu-item a{border-bottom:1px solid #e8e8e8}
.menu-bar .parent-menu .parent-item{display:inline-block!important;width:100%;padding:0;margin:0;border-bottom:1px solid #e8e8e8}
.menu-bar .parent-menu .parent-item .arrow-left{position:absolute;top:12px;right:4px;width:20px;height:20px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEEDfAilEkD2apP4FzUUoQ97ntj864kif-AvVnrYTQzgQrZquhx2HPJMnLOmEvhYCBjTHpKXdYmAlzAtQ8h4YpjWPjJn5AuVz_bfTvnkM5-lo1oBFhpWeLDYNaHNvT3amT4ruBHJVl0R9x/s1600/icon-desktop.png) no-repeat center;background-position:-35px -51px;background-size:601%;opacity:.6}
.menu-bar .parent-menu .parent-item a:hover+.sub-menu,.sub-menu:hover{display:block!important}
.accordion,.header .center .login-mobile{display:none}
.header .right{width:25%;background:#fff;display:inline-block;height:100%;text-align:right;border-bottom:1px solid #ebebeb}
.right .not-logged-in{text-align:right;padding:16px 0;display:inline-block;margin-right:8px}
.right .not-logged-in a{color:#27406d}
.right .btn-white{margin-top:8px;margin-right:16px}
.btn-white{border:1px solid rgba(39,64,109,.22);border-radius:5px;font-size:15px;color:#27406d;font-weight:600;text-transform:uppercase;padding:5px 24px;display:inline-block}
@media (max-width:1024px){.header .center{width:80%}.header .right{display:none}}
@media (max-width:960px){.header.fixed{text-align:center;width:100%}.header .left{width:100%}.header .left .ic-menu-bar{display:block;position:absolute;z-index:9999}.header .center{position:fixed;height:100%;background:#fff;width:284px;top:0;left:-284px;z-index:1;transition:.5s;padding-top:50px;border-right:1px solid #e8e8e8}.header .center.open{left:0}.header .center .post-product{display:block!important;position:absolute;top:8px;right:8px;padding:8px 16px}#menu-bar nav{position:unset;overflow:auto;height:calc(100% - 50px);position:relative}#menu-bar ul{position:unset;overflow:auto;position:relative;height:auto}#menu-bar li{width:99%!important;float:none!important;display:inline-block!important;text-align:left;border-top:1px solid #e8e8e8;position:relative}.menu-bar .parent-menu .sub-menu{position:unset!important;max-height:0;margin-top:unset!important;background:#e8e8e8!important}#menu-bar li ul.parent-menu::before,#menu-bar li ul.parent-menu:after{content:unset}.menu-bar .parent-menu .parent-item .arrow-left{display:none!important}.header .center .login-mobile{display:block;border-top:1px solid #ebebeb}.header .center .login-mobile a{padding:16px 0;display:inline-block!important;width:49%!important;text-transform:uppercase;text-align:center}.header .center .login-mobile a:first-child{border-right:1px solid #ebebeb}#menu-bar li a{width:calc(100% - 64px)}#menu-bar li ul{display:block;transition:max-height .2s ease-out;position:unset;max-height:0;overflow:hidden;background:#f5f5f5;border-radius:0;border:none;width:100%;margin-bottom:-3px;max-width:unset;box-shadow:none}.menu-bar .parent-menu .parent-item{border-bottom:none}#menu-bar li ul.parent-menu li a{color:#54657e}#menu-bar li ul li a{border:unset}.accordion{display:block;border:none;background:#fff;color:#8493a8;font-size:22px;position:absolute;right:6px;top:4px;margin-top:12px;width:22px;height:22px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEEDfAilEkD2apP4FzUUoQ97ntj864kif-AvVnrYTQzgQrZquhx2HPJMnLOmEvhYCBjTHpKXdYmAlzAtQ8h4YpjWPjJn5AuVz_bfTvnkM5-lo1oBFhpWeLDYNaHNvT3amT4ruBHJVl0R9x/s1600/icon-desktop.png);background-position:-294px -95px;opacity:.5;outline:none}.accordion.animate{-webkit-transform:rotate(-90deg);transform:rotate(90deg);transition:.5s}.header .center .box-bottom{display:block!important;position:absolute;height:50px;z-index:2;bottom:0;left:0;width:100%;background:#fff}.header .center .box-bottom .ic{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0EGeUz8EmcB96lhNPbgGkf1GfRbWC8C8dQsHD1yMbPjYwOltiwIFWlrejSphFZIm4vOO3_kFDwJH6VoPvLlhts7BJ80VGRc2zADn8sZl9ef8-hEIjordJQmyvCKvV4OVYw_piaVcH0AGw/s1600/ic-orther-menu.png) no-repeat;width:24px;height:24px;float:left;margin-left:12px;margin-top:12px}.header .center .box-bottom .ic.ic-facebook{background-position-x:-2px}.header .center .box-bottom .ic.ic-youtube{background-position-x:-42px}.header .center .box-bottom .ic.ic-call{background-position-x:-82px}.header .center .box-bottom .ic.ic-email{background-position-x:-119px}}
@media (max-width:414px){.header .center{width:100%;left:-100%}}

3. Copy Code script chèn trước </body>