Membuat menu blog lebih profesional

Assalamualiqum.wr.wb..


Sudah Tiga hari saya tidak mengunjungi blog ini karna sibuk di dunia nyata,(NGGA NANYA ) tidak terasa sebentar lagi sudah masuk bulan suci Ramadhan 1 H 1439 Kamis, 17 Mei 2018.

Perasaan baru kemaren lebaran, tau tau udah bulan puasa ajah, sunggu perputaran bumi semakin cepat,

Ok, pada kesempatan kali ini saya akan membuat Menu yang resposive , dan ini salah satu menu yang paling saya sukai, kenapa? Sebab ini adalah sejarah pertama kali saya mengenal coding hehe

Biar kalian tidak penasaran kalian bisa lihat dulu demonya di SINI



Kaya gitu di bilang profesional, eeet jangan salah menu ini adalah menu yang banyak di gunakan di situs situs luar negri lohh, beberapa alasan karna menu ini sama sekali tidak meperberat loading. Sekali kali saya merekomendasikan ini, untuk kalian,

Berikut adalah kodenya

#menu-cs ul {
    height: 30px;
    display: flex;
    overflow: auto;
    white-space: nowrap;
}


#menu-cs {
    width: 100%;
    margin: 0;
    height: 30px;
}

@media only screen and (max-width: 1280px){
#menu-cs {
    background-color: #455a64;
    border-bottom: 1px solid #f5f5f5;
  }  }

.adb-head{margin:0 auto;line-height:45px;overflow:hidden}

#menu-cs ul,#menu-cs li{margin:0;padding:0;list-style:none;}
#menu-cs ul li:hover a{color:#FFF;background-color:#f00;transition:all .3s;text-decoration:none;}
#menu-cs li{float:left;display:inline;position:relative;font-family:'Open Sans',Sans-serif;font-size:11px;font-weight:bold;text-transform:uppercase;top:0px}
#menu-cs a{display:block;line-height:30px;padding:0 14px 0 15px;text-decoration:none;color:#FFF;}

.active-menu li:first-child {
    margin-left: 0;
    height:40px;
    background: #f00;
}


.social-area {
    float: right;
    margin-top: -45px;
}

Jika kalian ingin memasang di blogger gunakan HTML di baha ini supaya nati untuk menyetingnya kalian tinggal masuk di bagian tata letak

<div class='menu-principal'>
 <div id='menu-cs'>
    <div class='adb-head row'>
      <div class='start-menu'>
        <b:section class='Gadegt-menu-2' id='Gadget-menu-2' maxwidgets='1' showaddelement='yes'>
          <b:widget id='LinkList220' locked='true' title='Menu' type='LinkList' version='1'>
            <b:widget-settings>
              <b:widget-setting name='text-9'>Contactos</b:widget-setting>
              <b:widget-setting name='link-9'>/</b:widget-setting>
              <b:widget-setting name='text-8'>Home</b:widget-setting>
              <b:widget-setting name='link-7'>/</b:widget-setting>
              <b:widget-setting name='link-8'>/</b:widget-setting>
              <b:widget-setting name='link-5'>/</b:widget-setting>
              <b:widget-setting name='link-6'>/</b:widget-setting>
              <b:widget-setting name='link-3'>/</b:widget-setting>
              <b:widget-setting name='link-4'>/</b:widget-setting>
              <b:widget-setting name='text-1'>Hiburan</b:widget-setting>
              <b:widget-setting name='text-0'>Fachion</b:widget-setting>
              <b:widget-setting name='text-3'>Olahraga</b:widget-setting>
              <b:widget-setting name='text-2'>Music</b:widget-setting>
              <b:widget-setting name='text-5'>Videos</b:widget-setting>
              <b:widget-setting name='text-4'>berita</b:widget-setting>
              <b:widget-setting name='text-7'>Blogger</b:widget-setting>
              <b:widget-setting name='text-6'>Contact</b:widget-setting>
              <b:widget-setting name='sorting'>NONE</b:widget-setting>
              <b:widget-setting name='link-1'>/</b:widget-setting>
              <b:widget-setting name='link-2'>/</b:widget-setting>
              <b:widget-setting name='link-0'>/</b:widget-setting>
            </b:widget-settings>
            <b:includable id='main'>
              <div class='widget-content'>
                <ul class='active-menu'>
                  <b:loop values='data:links' var='link'>
                    <li><a expr:href='data:link.target'><data:link.name/></a></li>
                  </b:loop>
                </ul> 
              </div>
            </b:includable>
          </b:widget>
        </b:section>
      </div>  
    </div>
  </div>
 </div>

Jik kalian ingin memasang di situs web gunakan HTML ini

<!-- Main Menu -->
<div class='menu-principal'>
<div id='menu-cs'>
<div class='adb-head row'>
<div class='start-menu'>
<div class='Gadegt-menu-2 section' id='Gadget-menu-2'><div class='widget LinkList' data-version='1' id='LinkList220'>
<div class='widget-content'>
<ul class='active-menu'>
<li><a href='#'>HOME</a></li>
<li><a href='#'>Hiburan</a></li>
<li><a href='#'>Fashion</a></li>
<li><a href='#'>Olahraga</a></li>
<li><a href='#'>Music</a></li>
<li><a href='#'>Video</a></li>
<li><a href='#'>berita</a></li>
<li><a href='#'>Blogger</a></li>
<li><a href='#'>Bisnis</a></li>
<li><a href='#'>Contact</a></li>
</ul>
</div>
</div></div>
</div>
</div>
</div>
</div>

Sepertinya saya tidak perlu menjelaskan cara memasangnya karna sebagian besar blogger indonesia pinter pinter cerdas cerdas dan itu saja yang bisa saya search hari ini semoga membantu & bermanfaat

Baca juga