×

Owner / Author / Admin / etc

    Muhamad Arsad    

"Pada halaman web ini saya akan membagikan informasi informasi menarik seputar Blogger, Template, Widget, Internet, dan juga berbagai tips-tips menarik lainnya."

Cara Membuat Menu Slide Dibawah Header


Cara Membuat Menu Slide Dibawah Header - Kesempatan kali ini saya akan berbagi tutorial tentang Cara Membuat Menu Slide Dibawah Header yang mana telah saya terapkan di template - template viomagz yang sudah saya redesign jika sahabat blogger ingin melihat nya silahkan klik link Demo dibawah ini.

Cara Membuat Menu Slide Dibawah Header 

1. Silahkan sahabat login di blogger
2. Kemudian " Edit Template " dan cari kode ]]></b:skin> kemudian Pastekan kode dibawah ini tepat diatasnya
/*-- Menu Geser Kesamping --*/
.second-menu{left:0;right:0;top:48px;display:none;max-width:100%;overflow:scroll;overflow-y:hidden;position:fixed;z-index:5;background:#fff;height:35px;line-height:12.5px;font-size:13.5px;font-weight:500;box-shadow:0 2px 6px 0 rgba(0,0,0,.1)}
.second-menu ul{width:max-content;margin:0 0 0 0px}
.second-menu ul li{float:left;font-size: 12px;padding:6px 8px;display:block;text-align:center;text-transform:uppercase}
.second-menu ul li a:hover{color:#0990de;border-bottom:2px solid #0990de}
.second-menu ul li a{color:#444;padding: 8px 5px;}
.second-menu ul li.satu1 {padding: 0;position:fixed;left:-1px}
@media screen and (max-width: 640px){
.second-menu{display:block}
}

3. Kemudian cari kode </header></div> dan pastekan kode dibawah ini dibawah kode diatas
<div class='second-menu'>
  <ul>
   <li><a href='#' title='Label 1'>Label 1</a></li>
   <li><a href='#' title='Label 2'>Label 2</a></li>
   <li><a href='#' title='Label 3'>Label 3</a></li>
   <li><a href='#' title='Label 4'>Label 4</a></li>
   <li><a href='#' title='Label 5'>Label 5</a></li>
  </ul>
</div> 

4. Cari kode CSS dibawah ini
@media only screen and (max-width:640px) {
#wrapper {
   padding: 70px 15px 15px;
}

Kemudian ganti dengan kode CSS dibawah ini

@media only screen and (max-width:640px) {
#wrapper {
   padding: 100px 15px 15px;
}

Info! Menu slide dibawah header ini hanya berfungsi pada tampilan Mobile saja

Penutup

Nah begitulah cara membuat menu slide dibawah header yang dapat saya bagikan kali ini semoga dapat mempercantik tampilan blogger kalian, trimakasih
Admin Ganteng Tapi Jomlo :v
  • Facebook
  • Twitter
  • Instagram
  • Tampilkan Komentar
    Sembunyikan Komentar

    2 Responses to "Cara Membuat Menu Slide Dibawah Header "

    Iklan Atas Artikel

    Iklan Tengah Artikel 1

    Iklan Tengah Artikel 2

    Iklan Bawah Artikel