Membuat Menu Bar Blog Plus Icon With CSS

Cara Membuat Menu Bar Blogger Plus Icon With CSS

Membuat Menu Bar Beserta Icon Dengan CSS

Bagaimana membuat menubar yang ada iconnya atau gambar di dalamnya? Nah disini Mas Tamvan akan memberikan tutotial cara membuat menubar beserta icon hanya menggunakan css tidak perlu javascript atau font awesome. 

Menu bar berfungsi untuk memudahkan para pengunjung untuk mencari sebuah categori yang diinynkan pada sebuah website atau blog, jadi bagi kalian yang di blognya terdaptata banyak categori sebaiknya dipasang menubar agar memudahkan para pembaca blog menelusuri artikel yang diinginkan.

Bagi kalian yang ingin melihat Contoh menu barnya, silahkan klik link result dibawah ini. 

Result

Untuk cara pemasangan menu bar ini sangat mudah, kalian tinggal ikuti langkah-langkah membuatanya di blog Mas Tamvan ini.

Jangan lupa untuk membaca artikel menarik lainnya di bawah ini.

Tutorial Blogger Lainnya :

• Cara Mengatasi Widget Blog Tidak Bisa diHapus Atau diPindah

• Cara Memasang Adblock Killer Di Blogger

• Cara Membuat Readmore Otomatis Di Blog

Untuk tutoril cara membuat menu barnya silahkan simak dibawah ini.

Cara Membuat Menu Bar Di Blogger Plus Icon With CSS

• Login ke Blogger.com

• Masuk ke Tata Letak, Tambahkan Gadget, Terus cari HTML/Javascript.

• Contoh, Lihat gambar dibawah!!

membuat menu bar

• Setelah diklik / dibuka HTML/Javascriptnya, Masukan Script menu bar yang dibawah ini kedalamnya.

<style type='text/css'>
#menu{display:inline-block;height:128px;margin:100px 5% 0;text-align:center;white-space:nowrap;width:90%}
#menu ul{margin:0;padding:0;position:relative}
#menu ul:after{clear:both;content:"";display:block}
#menu li{background-position:50% center;display:block;float:left;font-size:18px;font-weight:bold;height:128px;line-height:210px;margin-right:1%;position:relative;white-space:nowrap;width:13%;z-index:2}
#menu li:after{background:url("https://www.script-tutorials.com/demos/415/images/bg.png") repeat scroll 0 0;content:"";height:100%;position:absolute;right:-10%;top:0;width:10%}
#menu li:nth-child(1):before{background:url("https://www.script-tutorials.com/demos/415/images/1.png") repeat scroll 0 0;content:"";height:100%;left:-10%;position:absolute;top:0;width:10%}
#menu li:nth-child(1){background:url("https://www.script-tutorials.com/demos/415/images/1.png") no-repeat center;margin-left:1%}
#menu li:nth-child(2){background:url("https://www.script-tutorials.com/demos/415/images/2.png") no-repeat center}
#menu li:nth-child(3){background:url("https://www.script-tutorials.com/demos/415/images/3.png") no-repeat center}
#menu li:nth-child(4){background:url("https://www.script-tutorials.com/demos/415/images/4.png") no-repeat center}
#menu li:nth-child(5){background:url("https://www.script-tutorials.com/demos/415/images/5.png") no-repeat center}
#menu li:nth-child(6){background:url("https://www.script-tutorials.com/demos/415/images/1.png") no-repeat center}
#menu li:nth-child(7){background:url("https://www.script-tutorials.com/demos/415/images/2.png") no-repeat center}
#menu a{color:#eee;display:block;height:100%;text-decoration:none}
.current{height:158px;left:7.5%;margin-left:-50px;position:absolute;top:-13px;width:100px;-webkit-transition:all 400ms cubic-bezier(0,1.1,0.5,1.1);-moz-transition:all 400ms cubic-bezier(0,1.1,0.5,1.1);-o-transition:all 400ms cubic-bezier(0,1.1,0.5,1.1);-ms-transition:all 400ms cubic-bezier(0,1.1,0.5,1.1);transition:all 400ms cubic-bezier(0,1.1,0.5,1.1)}
.cback{background-color:#aadd33;border-bottom:2px solid rgba(0,0,0,0.5);border-radius:10px;height:100%;position:absolute;width:100%}
.ctoparr{height:12px;left:0;overflow:hidden;position:absolute;top:13px;width:100%;z-index:2}
.ctoparr:before{border-radius:20%;box-shadow:0 0 15px #000;content:"";height:10px;left:5%;position:absolute;top:-10px;width:90%}
.ctoparr:after{border-left:8px solid transparent;border-right:8px solid transparent;border-top:12px solid #aadd33;content:"";height:0;left:50%;margin-left:-8px;position:absolute;top:0;width:0}
.cbotarr{bottom:17px;height:12px;left:0;overflow:hidden;position:absolute;width:100%;z-index:2}
.cbotarr:before{border-radius:20%;bottom:-10px;box-shadow:0 0 15px #000;content:"";height:10px;left:5%;position:absolute;width:90%}
.cbotarr:after{border-bottom:12px solid #aadd33;border-left:8px solid transparent;border-right:8px solid transparent;bottom:0;content:"";height:0;left:50%;margin-left:-8px;position:absolute;width:0}
#menu li.selected:nth-child(1) ~ .current{left:7.5%}
#menu li.selected:nth-child(2) ~ .current{left:21.5%}
#menu li.selected:nth-child(3) ~ .current{left:35.5%}
#menu li.selected:nth-child(4) ~ .current{left:49.5%}
#menu li.selected:nth-child(5) ~ .current{left:63.5%}
#menu li.selected:nth-child(6) ~ .current{left:77.5%}
#menu li.selected:nth-child(7) ~ .current{left:91.5%}
#menu li:nth-child(1):hover ~ .current{left:7.5%}
#menu li:nth-child(2):hover ~ .current{left:21.5%}
#menu li:nth-child(3):hover ~ .current{left:35.5%}
#menu li:nth-child(4):hover ~ .current{left:49.5%}
#menu li:nth-child(5):hover ~ .current{left:63.5%}
#menu li:nth-child(6):hover ~ .current{left:77.5%}
#menu li:nth-child(7):hover ~ .current{left:91.5%}
</style>


<nav id="menu">
    <ul>
      <li><a href="http://mastamvan.blogspot.co.id/">Home</a></li>
      <li><a href="http://mastamvan.blogspot.co.id/">HTML5</a></li>
      <li><a href="http://mastamvan.blogspot.co.id/">jQuery</a></li>
      <li><a href="http://mastamvan.blogspot.co.id/">PHP</a></li>
      <li><a href="http://mastamvan.blogspot.co.id/">Javascript</a></li>
      <li><a href="http://mastamvan.blogspot.co.id/">Design</a></li>
      <li><a href="http://mastamvan.blogspot.co.id/">Other</a></li>
      <div class="current">
        <div class="ctoparr"></div>   
        <div class="cback"></div>
        <div class="cbotarr"></div>
      </div>
    </ul>
  </nav>

• Tinggal Save Dan Lihat Hasilnya.

Keterangan

Silahkan ganti link http://mastamvan.blogspot.co.id/ dengan link yang sobat mau!!

Okeh cukup sampai disini penjelasan atau cara membuat menu bat yang ada iconnya hanya menggunakan css ini, semoga bermanvaat salam Tamvan.

Apabila ada yang mau ditanyakan, silahkan bertanya dikolom komentar ya itung-itung penyemangat saya dalam membuat artikel yang menarik, berkualitas dan tentunya asli, NO COPAS :)