Ada yang bertanya bagaimana cara membuat mega-menu seperti pada tampilan tema blog yang sedang dipakai oleh editblogtema sekarang?
Jadi itu karena sobat membukanya melalui laptop atau desktop dan menggunakan mouse. Menyentuhkan mouse pada menu bagian "fitur" akan menghidupkan efek MegaMenu. Saya ingin sekali menuliskan detailnya. Tapi itu akan menjadi tutorial yang cukup panjang dan tidak nampak sebagai hal sederhana, kesederhanaan yang sangat dijunjung tinggi pada editblogtema. Yang penting sobat dapat mengerti tulisan kami sudah sangat senang sekali.
Membuat mega menu dasar tidaklah sulit, tetapi karena beberapa tema telah kami customize, tentu saja mengakibatkan perbedaan daripada trik pemasangan atau pembuatan mega-menu, misalnya jika sobat sentuh menu "fitur" pada menu navigasi editblogtema ini khusus pada tablet, laptop dan layar yeng lebih besar maka mega menu otomatis akan muncul, namun tidak buat hape! Fungsi media query berbeda dan mega menu telah dikaitkan dengan full feed blogger yang sebenarnya memiliki celah berbahaya. Tentu saja kami mengetahuinya.
Oleh karena itu saya memutuskan memberikan sobat tips cara menerapkan mega-menu simple dan mudah diterapkan ke tema tema default bawaan blogger seperti: sederhana, pt. keren sekali, perjalanan dll, atau bahkan bisa juga dicobakan terhadap tema tema bawaan blogger terbaru seperti contempo, emporio, soho dst.
Baiklah caranya sama saja dengan triks yang kami berikan pada tutorial tutorial sederhana yang telah kami berikan sebelumnya:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
}
.navbar {
overflow: hidden;
background-color: #6495ED;
font-family: Arial, Helvetica, sans-serif;
}
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font: inherit;
margin: 0;
}
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
width: 100%;
left: 0;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content .header {
background: red;
padding: 16px;
color: white;
}
.dropdown:hover .dropdown-content {
display: block;
}
/* Create three equal columns that floats next to each other */
.column {
float: left;
width: 33.33%;
padding: 10px;
background-color: #ccc;
height: 250px;
}
.column a {
float: none;
color: black;
padding: 16px;
text-decoration: none;
display: block;
text-align: left;
}
.column a:hover {
background-color: #ddd;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
.column {
width: 100%;
height: auto;
}
}
</style>
</head>
<body>
<div class="navbar">
<a href="#home">Beranda</a>
<a href="#news">Berita</a>
<div class="dropdown">
<button class="dropbtn">MegaMenu
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<div class="header">
<h2>Mega Menu</h2>
</div>
<div class="row">
<div class="column">
<h3>Category 1</h3>
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
<div class="column">
<h3>Category 2</h3>
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
<div class="column">
<h3>Category 3</h3>
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
</div>
</div>
</div>
<div style="padding:16px">
<h3>CONTOH MEGAMENU RESPONSIVE DROPDOWN FULL DALAM NAVBAR</h3>
<p>SENTUH (tidak usah dipencet, sentuhkan saja mouse) MENGAMENU UNTUK MELIHAT HASILNYA.</p>
<p>COBA GANTI MELIHAT DARI LAPTOP DAN HAPE UNTUK MEMBUKTIKAN EFEK RESPONSIVENYA.</p>
</div>
</body>
</html>
Kode kode yang saya sorot warna biru seluruhnya harus diletakan diatas kode </head>
Kode kode yang saya soroti warna kuning seluruhnya harus diletakan diatas kode </header> bukan </head> atau dibawah <body> ya (coba coba saja supaya tepat). Cari saja dengan menekan ctrl+c pada keyboard laptop dan letakan seluruh kode yang saya sebutkan tadi diatas atau dibawah kode tersebut.
Kode kode yang saya sorot warna merah seluruhnya harus diletakan diatas kode </body>
Save template.
Jika sobat ada yang mencobanya dan terjadi error, atau belum mengerti bagaimana memasang link pada menu, jangan sungkan sungkan bertanya kepada kami ya...
Untuk membuktikannya silahkan lihat DEMO
Silahkan bertanya jika masih menemukan ganjalan ya..
www.editblogtema.net
Jadi itu karena sobat membukanya melalui laptop atau desktop dan menggunakan mouse. Menyentuhkan mouse pada menu bagian "fitur" akan menghidupkan efek MegaMenu. Saya ingin sekali menuliskan detailnya. Tapi itu akan menjadi tutorial yang cukup panjang dan tidak nampak sebagai hal sederhana, kesederhanaan yang sangat dijunjung tinggi pada editblogtema. Yang penting sobat dapat mengerti tulisan kami sudah sangat senang sekali.
Oleh karena itu saya memutuskan memberikan sobat tips cara menerapkan mega-menu simple dan mudah diterapkan ke tema tema default bawaan blogger seperti: sederhana, pt. keren sekali, perjalanan dll, atau bahkan bisa juga dicobakan terhadap tema tema bawaan blogger terbaru seperti contempo, emporio, soho dst.
Baiklah caranya sama saja dengan triks yang kami berikan pada tutorial tutorial sederhana yang telah kami berikan sebelumnya:
- Masuk kepengaturan blogger
- Pilih Tema
- Pilih tombol edit HTML
- Cari kode kode utama: </header> <body>, </head> dan </body> saya tandai dengan huruf berwarna merah untuk mempermudah panduan.
Kalau sudah siap perhatikan kode dibawah ini yang saya sorot dengan warna warna: Biru,Kuning, Merah
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
}
.navbar {
overflow: hidden;
background-color: #6495ED;
font-family: Arial, Helvetica, sans-serif;
}
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font: inherit;
margin: 0;
}
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
width: 100%;
left: 0;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content .header {
background: red;
padding: 16px;
color: white;
}
.dropdown:hover .dropdown-content {
display: block;
}
/* Create three equal columns that floats next to each other */
.column {
float: left;
width: 33.33%;
padding: 10px;
background-color: #ccc;
height: 250px;
}
.column a {
float: none;
color: black;
padding: 16px;
text-decoration: none;
display: block;
text-align: left;
}
.column a:hover {
background-color: #ddd;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
.column {
width: 100%;
height: auto;
}
}
</style>
</head>
<body>
<div class="navbar">
<a href="#home">Beranda</a>
<a href="#news">Berita</a>
<div class="dropdown">
<button class="dropbtn">MegaMenu
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<div class="header">
<h2>Mega Menu</h2>
</div>
<div class="row">
<div class="column">
<h3>Category 1</h3>
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
<div class="column">
<h3>Category 2</h3>
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
<div class="column">
<h3>Category 3</h3>
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
</div>
</div>
</div>
<div style="padding:16px">
<h3>CONTOH MEGAMENU RESPONSIVE DROPDOWN FULL DALAM NAVBAR</h3>
<p>SENTUH (tidak usah dipencet, sentuhkan saja mouse) MENGAMENU UNTUK MELIHAT HASILNYA.</p>
<p>COBA GANTI MELIHAT DARI LAPTOP DAN HAPE UNTUK MEMBUKTIKAN EFEK RESPONSIVENYA.</p>
</div>
</body>
</html>
Kode kode yang saya sorot warna biru seluruhnya harus diletakan diatas kode </head>
Kode kode yang saya soroti warna kuning seluruhnya harus diletakan diatas kode </header> bukan </head> atau dibawah <body> ya (coba coba saja supaya tepat). Cari saja dengan menekan ctrl+c pada keyboard laptop dan letakan seluruh kode yang saya sebutkan tadi diatas atau dibawah kode tersebut.
Kode kode yang saya sorot warna merah seluruhnya harus diletakan diatas kode </body>
Save template.
Jika sobat ada yang mencobanya dan terjadi error, atau belum mengerti bagaimana memasang link pada menu, jangan sungkan sungkan bertanya kepada kami ya...
Untuk membuktikannya silahkan lihat DEMO
Silahkan bertanya jika masih menemukan ganjalan ya..
www.editblogtema.net
ijin pasang ya kak makasih
BalasHapus