Cara membuat menu kategori kesamping dibawah header



Sobat IcloudZer kali ini saya akan membahas bagaimana Cara membuat menu kategori kesamping dibawah header, sebelum kita membuat dan memasang nya pada situs blog, perlu diperhatikan beberapa hal berikut

Menu navigasi ini sangat baik diterapkan untuk header Sticky atau yang mempunyai tampilan header melayang

Jika header situs blog anda sudah Sticky atau melayang maka Cara membuat menu kategori kesamping dibawah header ini cocok untuk diterapkan disitus blog kesayangan sobat

Baiklah kita akan langsung kepemasangnya aja ya, untuk lebih hati hati back up dulu Template sobat agar lebih aman, untuk selanjutnya kita langsung Ketata caranya aja yak

1. Login keblogger pakai akun blogger anda
2. Cari kode ]]></b:skin> dan letakkan kode CSS dibawah ini tepat diatasnya
/*--- Menu Nav Sticky by Icloudice  ---*/

.icloudiceSecond-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);

}

 .icloudiceSecond-menu ul {

   width:max-content;

   margin:0 0 0 90px;

}

 .icloudiceSecond-menu ul li {

   float:left;

   font-size: 12px;

   padding:6px 8px;

   display:block;

   text-align:center;

   text-transform:uppercase;

}

 .icloudiceSecond-menu ul li a:hover {

   color:#49ACE1;

   border-bottom:2px solid #49ACE1;

}

 .icloudiceSecond-menu ul li a {

   color:#444;

   padding: 8px 5px;

}

 .icloudiceSecond-menu ul li.icloudice1 {

   padding: 0;

   position:fixed;

   left:-1px;

}

 .icloudiceSecond-menu ul li.icloudice1 span {

   background: #1a73e8;

   padding:11.5px 10.5px 10px;

   color:#fff;

   vertical-align: -6px;

   }

.icloudiceSecond-menu ul li.icloudice1:after {

   content:'';

   display:inline-block;

   position:absolute;

   border-left:12px solid #1a73e8;

   border-top:8px solid transparent;

   border-bottom:8px solid transparent;

   right:-10px;

   top:4px;

}

@media screen and (max-width: 640px) {

.icloudiceSecond-menu {

   display:block;

}

}

3. Kemudian cari kode </header> </div> dan letakkan kode dibawah ini tepat dibawahnya
<div class='icloudiceSecond-menu'>

  <ul>

   <li class='icloudice1'><span>KATEGORI :</span></li>

   <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. Selanjutnya cari seperti dibawah ini, biasanya kode seperti dibawah ini terletak Diatas kode ]]></b:skin> cari secara perlahan
@media only screen and (max-width:640px) {

#wrapper {

   padding: 70px 15px 15px;

}

5. Jika sudah menemukan seperti kode diatas hapus dan ganti semua kode tersebut dengan kode dibawah ini ya
@media only screen and (max-width:640px) {

#wrapper {

   padding: 100px 15px 15px;

}


6. Periksa bsgaimana tampilan akhirnya pada Demo dibawah yak

Penutup

Apabila cara membuat menu kategori kesamping dibawah header ini sudah diterapkan maka, sobat akan melihat Label1, Label2 dan seterusnya tersebut dibawah header, maka sobat ganti label label tersebut dengan kemauan sobat nya, karena setiap kode yang saya berikan sobat harus menyempurnakannya sendiri dari setiap detailnya
Baca Juga :
Ar-rahim 🇵🇸