Membuat Menu Bar Blog Plus Icon With CSS

menu bar css icon

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. 


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.



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!!

menu bar blogger
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 :)

9 komentar
  1. Mantap gan postingannya, walaupun sempat bingung

    ReplyDelete
  2. cara ganti gambarnya gimana gan? nice info

    ReplyDelete
    Replies
    1. Coba ahan Cari [ images/bg.png ] tinggal ganti URLnya dengan link image yang agan inginkan.

      Delete
  3. salut dah ama mas tamvan nih, keren abis artikelnya :D makasih udah mau berbagi mas (y)

    ReplyDelete
    Replies
    1. Wah makasih gan tpi ane masih NUBI, Iya sama-sama :)

      Delete
  4. boleh langsung dicoba gak gan ? hehehe

    ReplyDelete
  5. thanks maz...singgah ya kblog saya http://tamahrd7.blogspot.co.id/

    ReplyDelete