Menu Navigasi Efek Hover dengan Icon. Hai sobat apa kabar lagi? semoga semua dalam keadaan baik dan diberkati, ok sob kesempatan ini admin akan berbagi cara membuat menu navigasi dengan icon efek hover yang mungkin saja ini menu navigasi yang cocok buat blog sobat.
Efek hover maksudnya disini adalah ketika kursor mouse diarahkan ke menu yang sebelumnya tulisan saja maka akan berganti menjadi icon, oh yah icon ini bisa kamu ganti sesuai keinginanmu, karena icon-icon ini hanya merupakan icon gambar yang di upload ke hosting Blogger dan bisa diganti sesuai keinginanan / sesuka hati.
Navigasi di blog sangat berperan penting, pengunjung blog lebih akan lebih mudah menemukan artikel sesuai keinginannya berdasarkan kategori. Tanpa navigasi juga blog sulit buat daftar adsense. Tanpa keberadaan navigasi atau petunjuk yang jelas, pengunjung akan kesulitan menemukan artikel lain yang berhubungan dengan postingan yang dibacanya saat ini.
 |
| Menu Navigasi |
Menu Navigasi Efek Hover
Menu navigasi adalah elemen penting pada blog yang memungkinkan user untuk berpindah antara halaman-halaman blog dengan mudah. Menu navigasi ini biasanya berupa link yang mengarah ke halaman lain, yaitu internal link dan external link. Internal link mengarahkan pengunjung ke halaman tertentu di blog itu sendiri.
Sedangkan external link mengarahkan pengguna ke luar blog. Nah, menu navigasi menggunakan internal link yang mengarahkan pengguna ke halaman lain blog atau website yang sama. Menu navigasi yang baik memungkinkan pengunjung masuk ke halaman yang mereka inginkan secara cepat dan mudah.
Mengenai menu navigasi sebelumnya juga admin telah berbagi menu navigasi dropdown responsive v1di Blogger dan neat menu navigasi dropdown di Blogger juga tentang menu navigasi dropdown responsive v2 di Blogger. Mungkin saja diantara kamu ada yang ingin mengubah tampilan menunya karena bosan atau ingin membuat blog terlihat menarik kamu dapat mencoba menu navigasi ini.
Cara Membuat Menu Navigasi Efek Hover dengan Icon di Blogger
1. Di Blogger, pilih blog kamu
2. Pilih menu Tema 👉 Edit HTML
 |
| Edit Html |
3. Letakan kode di bawah ini di atas kode
]]></b:skin>#sepeser-btrix-nav {margin: 5px auto;list-style: none;width: 632px;height: 87px;overflow-y: hidden;}#sepeser-btrix-nav li {float: left;}#sepeser-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;}#sepeser-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);}#sepeser-btrix-nav li a img {position: relative;top: 0;transition: top .5s ease;}#sepeser-btrix-nav li a:hover {cursor: pointer;}#sepeser-btrix-nav li a:hover img {top: -85px;}#sepeser-btrix-nav li a:hover .aname {top: 85px;}#sepeser-btrix-nav li:nth-child(1) a {background: #3eb006;border-radius: 5px 0 0 5px;border-left: 1px solid #bbb;}#sepeser-btrix-nav li:nth-child(2) a {background: #9bc704;}#sepeser-btrix-nav li:nth-child(3) a {background: #0dc3ff;}#sepeser-btrix-nav li:nth-child(4) a {background: #51a2ec;}#sepeser-btrix-nav li:nth-child(5) a {background: #6e3cab;border-radius: 0 5px 5px 0;border-right: 1px solid #555;} 4. Gunakan kode di bawah ini dan masukan ke dalam template sobat, letaknya bisa berbeda tergantung sruktur template yang digunakan ( bisa nonton video tutorial sebagai cpntoh panduannya )
<div id="sepeser-btrix-nav">
<li> <a href="#"><span class="aname">Homes</span> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7TIE92TAkNU4bw44aeGHRxeGy5OeDTH04mvbqY9NSKakNemzIU_ZinahiIBppuO8VXHonyQmIhJQCw-dO1wLqU8e2eS4eGmyvTFK3X0HGvPqYinXaxqsPdJhO2YNUKdJEiHO09wIgseI/s1600/btrix-home.png" /> </a> </li>
<li> <a href="#"> <span class="aname">Download</span> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMEAVa_l9uUjaYImrT6s3jVGYizKjHPWJILgedymM-XUm0PF9pcGDLEWbn82wc_W-v6kdjjKZ4zUz5MFReZoDlrFK839OWETyWPQLG779mz5KvHFUg7drZ1wB1__N6jDu33FRNKiUwoXo/s1600/btrix-download.png" /> </a> </li>
<li> <a href="#"> <span class="aname"> MySql</span> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbEATxBhfJ_ruifFBDxb8AfGNLmFicLZkqtV0hdPmTQGn4VVd555aAn70CcOz8mVMb0hhgR0PGQs4QqA4Qs1xCHcLjvpABZB1DMpY160X4DCvCib81vTgUh-tWgc7-sg_BoF9ePYGX0Ts/s1600/btrix-mysql.png" /> </a> </li>
<li> <a href="#"> <span class="aname"> Html</span> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8dB1su19OqtpHH9FeVAcD-kyhtPXtupWW33dlS79g75WnHgECswa2gvBnqVU47a-WsErh_U25eV5_-tRYfmEGbCo3L9fKCxNSjNpgtmv3hIA-hJemPTuRWSi6VoWF7AMVdFbevRse6yM/s1600/Btrix-html.png" /> </a> </li>
<li> <a href="#"> <span class="aname">Contact</span> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgImKqpHKCBI9bBdSemLRe5i_kGXivhv4DGFN6a0EPd3LA9VExpyWeA9ExfzTjeVeNZRIzxdHunvFHLbHq3WgmPxkDjEFgxV6vo9FzCMTpmtjiq2XiRB-5-VSYjCZBxBZ0caK8uO6rXyGs/s1600/btrix-contact.png" /> </a> </li> </div>Video Tutorial
Video di atas adalah contoh cara pemasangannya, itu jika kamu bingung bagaimana cara membuatnya di Blogger.
Penutup
Secara garis besar, navigasi website adalah menu yang berada pada suatu halaman website. Menu-menu ini nantinya akan terhubung satu sama lain berdasarkan topik tertentu, dengan perantara sebuah link. Jadi link tersebut akan mengarah ke halaman lainnya yang mengarah ke banyak halaman di blog kamu.
Bagaimana tampilan navigasi ini? kamu dapat melihat gambarnya atau kedemonya saja untuk lebih jelasnya lagi.
👉 LIHAT DEMO 👈
Ketika menggunakan navigasi, pengunjung website bisa mengakses halaman atau page yang mereka mau dengan lebih mudah. Tidak hanya untuk pengunjung, adanya navigasi juga punya peran penting untuk mesin pencari. Selamat mencoba,salam Blogger.
0 Komentar untuk "Membuat Menu Navigasi Efek Hover dengan Icon Bisa Diganti "