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 ;)

Related Posts:

  • Membuat Komentar Bergerak tanpa Edit HTML Komentar Bergerak Salam Blogger! Bagi  Sobat yang ingin membuat Komentar Bergerak dan Berputar ikuti langkahnya dibawah ini 1.Klik Tata Letak. 2.Klik Elemen Halaman. 3.Klik Tambah Gadget. 4.Kemudian Pilih HTM… Read More
  • Membuat Icon Share Blog Berputar Bottom Share Post Salam Bloger! Bagi sobat yang ingin mempercantik tampilan tombol share pos, silahkan ikuti panduannya dibawah ini  1.Login ke Blogger 2.Pilih Rancangan-Edit HTML 3.Centang  (√)  Expand Temp… Read More
  • Membuat Tombol Share Terbaru Tombol Share Blog Salam Blogger ! Bagi Sobat yang ingin membuat kotak Share Button Terbaru untuk Blog bisa mengikuti langkah - langkahnya dibawah ini : 1.Login ke Blogger 2.Pilih Rancangan-Edit HTML 3.Centang  (√) &… Read More
  • Trik Membuat Spoiler Blog Spoiler Blog Salam Blogger! Pada kesempatan ini saya akan memberikan Trik Membuat Spoiler Blog dengan mudah. Tahukah anda Fungsi Spoiler adalah selain untuk menyembunyikan content berupa text dan kode juga bisa untuk se… Read More
  • Membuat Gambar Slideshow tanpa Edit HTML Slide Horizontal Salam Blogger! Sambil menunggu hujan berhenti, malam ini saya akan membagikan bagaimana cara Membuat Gambar Slideshow tanpa Edit HTML, Sobat tidak perlu lagi susah -susah edit sana edit sini, anda tingga… Read More

0 komentar:

Posting Komentar

Silahkan sobat tinggalkan jejak di bawah ini...NO.SPAM
Dengan Memberikan Komentar Secara Otomatis akan Mendapatkan Pagerank, Traffic dan Backlink.