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="#"><span class="aname">Homes</span> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiz6Qe_FH53U563B092imdtCPG9Ky__hJQTZdXD87F-NU2rSXlbEb_E4z67rt0wYLuLHZMUE3k20dPTfHcBrruUnqDkeNY2wFZNHJI4OzYHpEok31lauKOywdS9h8N4wujGqqbMW0QvOjA/s1600/btrix-home.png" /> </a> </li><li> <a href="#"> <span class="aname">Download</span> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnDi_H6Q_pYNiFnB6TjZVBQnP45_iuiYjN-LBrIulPumYux2UncfDU46BljCDcPjzL8-1AX5gmGC-xBADP7mvoVOKgOV-Yk5PYYj4uYnRegqoRcyxjgo9jHFpb0xj1KairITlaldZW-Sc/s1600/btrix-download.png" /> </a> </li><li> <a href="#"> <span class="aname"> MySql</span> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjd_lSt98DBf2bn8qWMejguoWyWC2J1hzv2tJg-TwMDsYv3UDnhrOg_DWftLZIebWMS4f7V-5SNo1GpvVIk6iY55NvY08VN83c9-ca_hJEU_HBjOmeZ8_gvywEN1-07f_l9dYtN28KYp2g/s1600/btrix-mysql.png" /> </a> </li><li> <a href="#"> <span class="aname"> Html</span> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXSbnHKYR2PdR8Q-Wm4oRdhes8IIJXAViOO6XmPkaWrEcq41PJo12kxDfojHlNxqT5gJpaYZTNjqdLkR0fx-jCjDxmnZ4zmgAz2QVaPuUEGhru1tdiJ0dayFGBal3G-FtXHu9twKziV68/s1600/Btrix-html.png" /> </a> </li><li> <a href="#"> <span class="aname">Contact</span> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCNe-eZ8ujJB42a5MOtMrNaI-uxgaD6aL_TrHzs2CA0YrSKxcJDpbt91y9SxkhA52PhGMXEhRlhJYEzS2_RezYEwnV28ZZjW4e7Ejn1CfNO0fXbgfHuegfCuOiAfOrkjE85M0ZJuR-4LY/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..
0 comments:
Post a Comment