 |
| Gambar tanpa navigasi menu |
Gambar bisa saja berbentuk animasi dengan warna warni infinite, gradasi, bisa juga dalam bentuk mewakili misi dan visi blog agar terkesan lebih serius dan konsisten. Sebagai contoh saya akan membuat gambar sederhana (properti gambar ponsel Adelina)
Contoh menu navigasi dalam gambar
Contoh di atas jika di terapkan ke dalam template blog tentu memiliki opsi tidak terbatas, tergantung kreatifitas masing masing blogger, kalian pikirkan keuntungannya:- Kalian dapat memposting gambar kalian
- Dan kemudian menempatkan navbar atau tombol menu navigasi blog ke dalamnya.
Gambar yang diletakan bisa sangat ringan dengan format webp, atau format gambar dengan kompres tinggi. Note: Jika menu menu pada navbar di atas di klik kalian akan teralih ke halaman blogger.
CARA MENERAPKAN:
Perhatikan kode berikut berdasarkan batas warna:
CSS
<style>body {font-family: Arial, Helvetica, sans-serif;}* {box-sizing: border-box;}
.bg-img { /* The image used */ background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrIOSrE18z-0I_nbZzuwwabuChUcUZTTETzAfdkCqytvugq8ASfWmv0h2QIgBOtaxvglRzbDetSxDq25vYjUOOU0VG0oqKGc-n0Yyr6h4XawT3grd6I0hukFM9G-hWp10BhRwtVfq0Yroq/s1600/adel.jpg");
min-height: 380px; /* Center and scale the image nicely */ background-position: center; background-repeat: no-repeat; background-size: cover; /* Needed to position the navbar */ position: relative;}
/* Position the navbar container inside the image */.container { position: absolute; margin: 20px; width: auto;}
/* The navbar */.topnav { overflow: hidden; background-color: #333;}
/* Navbar links */.topnav a { float: left; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; font-size: 17px;}
.topnav a:hover { background-color: #ddd; color: black;}</style>
Penempatan kode CSS diatas normalnya adalah di bawah tag penutup </head>
Kode warna merah adalah link gambar yang kita inginkan sebagai latar header blog, silahkan ganti dan pilih gambar yang sesuai dengan keingian kalian.
HTML
<div class="bg-img"> <div class="container"> <div class="topnav"> <a href="#home">Home</a> <a href="#news">Privacy</a> <a href="#contact">content</a> <a href="#about">About</a> </div> </div></div>
Penempatan kode HTML diatas adalah di bawah tag penutup </head> atau di atas tag <body> atau di bawah tag <body>
Demikian cara membuat menu navigasi atau navbar sederhana dalam gambar. Tips ini dapat di terapkan pada template bawaan blogger yang lebih lama. Navbar juga responsif dan dapat menyesuaikan diri dengan tampilan mobile.
Demikian cara membuat menu navigasi atau navbar sederhana dalam gambar. Tips ini dapat di terapkan pada template bawaan blogger yang lebih lama. Navbar juga responsif dan dapat menyesuaikan diri dengan tampilan mobile.
Tags
navigasi menu blog
Komentar ini telah dihapus oleh pengarang.
BalasHapuswow, ini sesuatu yg baru, dulu pas utak atik tema blm pernah nemu script menu ditampilin di gambar. ini keren nih. Ijin save ya...
BalasHapus