December 01, 2019

MEMBUAT NAVIGASI MENU DI DALAM GAMBAR PADA BLOG

Selamat hari minggu. Dalam kesempatan waktu luang ini saya ingin berbagi trik menjadikan template blog bawaan (default) menjadi sangat terlihat atraktif, orang orang akan menyangka itu adalah template premium. Template yang bisa kalian jadikan sebagai "kelinci percobaan" adalah template bawaan blogger sederhana (simple) yang lama hingga template yang terbaru seperti contempo, emporio dengan sedikit perbedaan cara penerapan.
Baca juga:
CARA MEMBUAT NAVIGASI MENU BLOGGER YANG RESPONSIF DENGAN MENU DROPDOWN
Perhatikan contoh (DEMO) menu navigasi berikut di bawah ini bukan gambar ya...tetapi terdiri dari elemen elemen HTML- CSS (tanpa Javascript) kalian bisa menyentuh menu untuk melihat reaksinya:

Navigasi menu di dalam gambar

Bagaimana menurut kalian, tentu saja tergantung selera masing masing orang. Namun di dalam beberapa halaman blog ini terdapat berbagai trik pembuatan menu navigasi termasuk beberapa diantaranya telah kami pergunakan atau kami terapkan sendiri terhadap berbagai template dan masih dipergunakan oleh beberapa teman teman blogger kami hingga saat ini.

Namun menurut saya tampilan menu blog dengan gambar cukup bagus untuk mempresentasikan sebuah blog niche, misalnya jika blog kalian adalah blog dengan niche teknologi, kalian dapat merubah link gambar dengan link gambar yang mewakili teknologi. dan jika niche blog kalian adalah travelling, kalian dapat menggantinya dengan gambar pemandangan yang paling menakjubkan di dunia ini.

Penemplatannya pada bagian header (kepala blog) akan mampu menyita perhatian pengunjung pada pandangan pertama mereka berkunjung.

Cara penerapan nya:

1. CSS
Karena semua template blog dengan platform blogger adalah berbasis HTML, pada halaman editorial HTML blog CSS selalu diletakankan di bawah XML atau sebelum HTML  (ini berbeda dengan template Wordpress yang berbasis inti Php) kalian harus masuk ke pengaturan blogger.
  • Pilih theme
  • Lalu akan muncul menu baru blogger cari titik tiga፧ dan klik maka akan muncul menu seperti terlihat pada gambar berikut:
halaman editorial HTML blogger
halaman editorial HTML blogger
  • Pada daftar menu yang muncul turun kebawah pilih "Edit HTML" pada halaman editor HTML yang telah terbuka cari kode </head> dan letakan kode CSS berikut tepat diatasnya:
<style>body {font-family: Arial, Helvetica, sans-serif;}* {box-sizing: border-box;}.bg-img { /* Gambar yang dipergunakan */ background-image: url("https://2.bp.blogspot.com/-0-EIr8bYQR8/W_gRuqMz1dI/AAAAAAAAhn8/5ssM6gfdLvIKcX9CpO5qnpcf_CinDkwpQCLcBGAs/s1600/20181123_214033_rmedited.jpg");
min-height: 380px;
/* ini untuk membuat posisi gambar menjadi pas ditengah */ background-position: center; background-repeat: no-repeat; background-size: cover;
/* posisi bar navigasi di perlukan */ position: relative;}
/* posisi navbar di dalam kontainer gambar */.container {
position: absolute;
margin: 20px;
width: auto;
}
/* Navbar */.topnav {
overflow: hidden;
background-color:
background: rgb(0, 0, 0); /* Fallback color */
background: rgba(0, 0, 0, 0.4); /* Background gelap Dengan opacity 0.5 */
color: #f1f1f1;
width: 100%;
padding: 8px;
border-radius:10px;
}
/* Link Navbar */.topnav a { float: left; color: #fff; text-align: center; padding: 14px 16px; text-decoration: none; font-size: 17px;}
.topnav a:hover { background-color: #ddd; color: red;}</style>
Ganti link warna merah dengan link gambar kalian sendiri.

2. HTML
Sekarang pasang HTML berikut dan letakan tepat dibawah kode </head> di dalam halaman editor HTML blogger kalian:
<div class="bg-img">
<div class="container">
<div class="topnav">
<a href="#Beranda">
Beranda</a>
<a href="#Perihal">
Perihal</a>
<a href="#Telp">
Telp</a>
<a href="#Tentang">
Tentang</a>
</div>
</div>
</div>
Selesai dan SAVE template.

Seperti yang kalian dapat perhatikan, tidak ada Javascript pada pembuatan Navbar model ini. Jadi Navbar ini cukup bagus untuk diterapkan pada blog dengan niche yang ingin mewakilkan misi blognya melalui header halaman.

Born in 29 Jan 2002 in Batam. I am a student of Senior High School (SMA) Now I am living in Bandar Lampung, Love HTML, Javascript, python and C++