CARA MEMBUAT MENU NAVIGASI DALAM GAMBAR TANPA JAVASCRIPT

humming bird
Gambar tanpa navigasi menu
Gambar pada header blog dapat menjadi sebuah upaya kampanye awal untuk mempromosikan blog. Kata orang orang dulu: "How to make visitors are falling in love in first impression" (Bagaimana caranya membuat pengunjung jatuh cinta pada kesan pertama).

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

Gambar dengan navigasi menu

Judul Artikel

Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.


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://1.bp.blogspot.com/-R7HFNDhGS8M/XfuZIk5NUvI/AAAAAAAApzc/A79j9uOMDR0sKKB6i1JO8Xm5yHRm6VGlACLcBGAsYHQ/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.

Beri Komentar atau, Ajukan Pertanyaan

2 Comments

  1. This comment has been removed by the author.

    ReplyDelete
  2. wow, ini sesuatu yg baru, dulu pas utak atik tema blm pernah nemu script menu ditampilin di gambar. ini keren nih. Ijin save ya...

    ReplyDelete

2 IN 1: from EDITBLOGTEMA to EDITBLOGTEMPLATE