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.

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

Jangan lupa untuk membaca artikel menarik lainnya di bawah ini.

Tutorial Blogger Lainnya .

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

• Setelah diklik / dibuka HTML/Javascript nya, 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://www.dragonebyte.xyz/">Home</a></li>      <li><a href="http://www.dragonebyte.xyz/">HTML5</a></li>      <li><a href="http://www.dragonebyte.xyz/>jQuery</a></li>      <li><a href="http://www.dragonebyte.xyz/">PHP</a></li>      <li><a href="http://www.dragonebyte.xyz/">Javascript</a></li>      <li><a href="http://www.dragonebyte.xyz/">Design</a></li>      <li><a href="http://www.dragonebyte.xyz/">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://www.dragonebyte.xyz/ dengan link yang sobat mau!!

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

Apabila ada yang mau ditanyakan, silahkan bertanya dikolom komentar ya itung-itung penyemangat saya dalam membuat artikel yang menarik, berkualitas.

Tweet