Menu Navigasi CSS Dengan Efek Icon Hover

Menu Navigasi CSS Dengan Efek Icon Hover | Ghiyats Blogs - Salam Untuk Sobat semua... Pada artikel yang akan Saya bagikan kali ini, Kita akan membahas tentang menu navigasi, Menu navigasi ini berbeda sama menu navigasi lainnya, karena menu ini memiiki gambar dengan efek hover

Menu ini dengan warna warni yang cerah, pada setiap nama nama menu, Langsung, saja tutorial tentang artikel ini, Seperti dibawah ini :

Pertama, Login dulu ke Blogger.com
Masuk ke menu, Template
Klik Edit HTML
Cari Kode ]]><b:skin dengan menggunakan (CTRL + F ) Setdlah ketemu masukan kode dibawah ini, diatas atau sebekum kode di atas

/* The CSS Code */ #btrix-nav {margin: 100px auto;list-style: none;width: 632px;height: 87px;overflow-y: hidden;}

#btrix-nav li {float: left;}

#btrix-nav li a {display: block;color: white;width: 120px;height: 61px;margin-top: 24px;text-decoration: none;text-align: center;border-top: 1px solid #bbb;border-bottom: 1px solid #555;}

#btrix-nav li a span.aname {font: bold 17px/61px "Arial";color: #fff;text-transform: uppercase;cursor: pointer;position: relative;top: 0;transition: top .5s ease;text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);}

#btrix-nav li a img {position: relative;top: 0;transition: top .5s ease;}

#btrix-nav li a:hover {cursor: pointer;}

#btrix-nav li a:hover img {top: -85px;}

#btrix-nav li a:hover .aname {top: 85px;}

#btrix-nav li:nth-child(1) a {background: #3eb006;border-radius: 5px 0 0 5px;border-left: 1px solid #bbb;}

#btrix-nav li:nth-child(2) a {background: #9bc704;}

#btrix-nav li:nth-child(3) a {background: #0dc3ff;}

#btrix-nav li:nth-child(4) a {background: #51a2ec;}

#btrix-nav li:nth-child(5) a {background: #6e3cab;border-radius: 0 5px 5px 0;border-right: 1px solid #555;}

Terus Klik SIMPAN

CARA PEMASANGANNYA :

ke menu Tata letak
Klik Tambah Gadget
Pilih gadget HTML/JavaScript
Copy kode dibawah ini , di dalam gadget tersebut

div id="btrix-nav">

<li> <a href="#">Homes <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1gLvGUFXVnVKgKwusxdJp3kCRL_e67K7xb5f7_ZEJI3exDIiTLH4uq5ea17aKlipOw7mo3CScmoLcJcyon4rxo38NnRZDFwbTp2emB7y6hSSpyys8us3wNDH0JfVDgT6DUGKXtWpitP0/s1600/btrix-home.png" /> </a> </li>

<li> <a href="#"> Download <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKHvurDGnvxa9uwKRH9nLgRzhfJD5vaKq3SDmi5ssCZY_4a5RMlNNbG2jU12svCyDA3mW4m_Cp1npBw7La61O5_ai-hiNUh78Jj4vZJVh6xXVA1_3WRhRdnA8oUeeOehhivsr8kvwA-Uc/s1600/btrix-download.png" /> </a> </li>

<li> <a href="#"> MySql <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdPx5NqzcynNxp3SKcHijT15JoaqL2Uz7kf9B1f7H_tsTT9jkBledK0Yg_NY3DlAXY3qj6O7_7_nTI_rFJXr5pJFfdoGhbpPkXlxsLTF1waIWshrWm5IA_CfUdtoQqiALwQ4lUwVj7PDs/s1600/btrix-mysql.png" /> </a> </li>

<li> <a href="#"> Html <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_gyE4riXpOG_y4ekJwG_OpXx6ONXHPvU1RjYVyUGh4ij60l8dTCJiX6sAngffcsyQuKm3ojrfiNWkX7IKsZkHJo1XjgnoEvcn2p32-WaXaGNSfZecRydsVOJClL6awtDAack9lNIbUmo/s1600/Btrix-html.png" /> </a> </li>

<li> <a href="#"> Contact <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZcHU6P-Qu3IsNQ9GNNIItUAa1-OiuhtYoDogRypjxpUQm-lqBFG74U-zqT4smf602sV-6WTeO2h5xK6pxw05eFjWBlNGcAadYzizI-6P3QfNw4WHMLNzXBA0MVlZBv7PJA0Em58hVOsk/s1600/btrix-contact.png" /> </a> </li> </div>

Ganti # dengan url yang anda tuju
Klik SIMPAN

Demikianlah artikel ini, semoga artikel yang baru saja saya bagikan bermanfaat dan mudah untuk dipratekkan, Silakan Komentarin artikel ini, di kolom komentar dibawah ini, Terima Kasih..

Via : Blogger Trix

2 komentar untuk "Menu Navigasi CSS Dengan Efek Icon Hover"

Intan SudibjoOctober 27, 2013 at 8:20 PM
blog semakin menarik dan terlihat berwarna, makasih sob sudah share tutorialnya :)

Silakan Tinggalkan Komentar Di Blog Ini
Kami sangat menghargai atas pertanyaan dan komentar sobat, Di harapkan Berkomentar dengan sopan dan tidak menyingung orang lain, Dan tidak mengunakan Link aktif karena akan Terhapus.
Terima Kasih