Membuat Efek Hover Navigation Bar Terbaru

Menu Navigation Bar

RIEFSAZ Blog. Bagi sobat yang belum ada ataupun ingin menambah Navigation Bar pada blognya bisa mengikuti triknya dibawah ini. Navigation Bar ini sangat berbeda dengan kebanyakan yang sudah ada karena penuh dengan warna, Easy, memiliki efek, mudah dalam mengunakannya sangat elegant dan menambah aktarktif blog sobat. Tutorialnya silahkan disimak :

1. Pergi ke Blogger Dashboard> Template

2. Backup template Anda

3. Klik pada Edit HTML

4. Cari ]]> </ b: skin> dan tambahkan kode berikut tepat di atasnya

/* The CSS Code for the menu starts here bloggertrix.com */ #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;}

C O D E

5. Pergi ke blogger Tata Letak 
6. Klik Tambah Gadget dan pilih 'HTML / Javascript' 
7. Paste kode di bawah ini.

<div id="btrix-nav"> 
<li> <a href="#"><span class="aname">Homes</span> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcEWCeDdFpJtxO22zO-60d8J-EravCYqKqaiCS1xGjkmpws-9VvkLoChxAah8Hy5jj7My3MDBeYhB4uPqmsP4B8_7zCfLQBrtk1Yn2p-YOSQK7q2h4QfdayMXE2DexeFyZxCSJ204FCeg/s1600/btrix-home.png" /> </a> </li>
<li> <a href="#"> <span class="aname">Download</span> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitGpKdCz79FkoHyf_zElMIY_1jGplUnCBeHHnm8uspmL6xQkP2zSUJdLg0udon-Y-Ps2jtNOqY2oOqyTkB2sCebUvsvo1_D7BjNdzMzQQP4hnk70gYcSJ7BwpCLk4NVKrw7XZYf2RyDc4/s1600/btrix-download.png" /> </a> </li>
<li> <a href="#"> <span class="aname"> MySql</span> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhy4hu24C_4gSjWbQNsFTn_mvvqyyHiBd7mEtl3DbSWoLkESDNx-u-OAFuU64evOw3mD2rvkVuwHgV50LCWicomOesmuiApY10RQK76W-yGrY8LzF3OUFJexjAb9KkUxFaFs1zZG2kjwIE/s1600/btrix-mysql.png" /> </a> </li>
<li> <a href="#"> <span class="aname"> Html</span> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJvwRo2uyUh43nMAKI7NA6scU1A_sEV1SJUCijbVPGYcba-yrqplu_wlFFLFAPhSzz2MY9lIsiThyphenhyphensiHHZkolfowoeNIb0RICqLh9ak4AGezmluy7_bWzM4k6Fyc8cIyoAE7snb-k1x9g/s1600/Btrix-html.png" /> </a> </li>
<li> <a href="#"> <span class="aname">Contact</span> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiu-5sKrM3Q6w-y7IK98R7CfujN0fyI6NbE8NU5TK36hdlCdYDq0Q58LzMJj71w6iNdNDAxh2SREjCI1ZGBHa0dWrMQwZtQhZ3WvHR_ZHpw6jUQHoy581w7fTVSeJFWSPjCuJAkoinpEEA/s1600/btrix-contact.png" /> </a> </li> </div>

C O D E

Ganti # dengan link Anda. 
 8. Simpan dan lihat 

Semoga bermanfaat yee ;)