Cara Membuat Mega MENU Pada Tampilan Blog
Bagaimana cara membuat mega-menu pada tampilan tema blog? Jika Anda membukanya melalui laptop atau desktop dan menggunakan mouse. Menyentuhkan mouse pada menu bagian "fitur" akan menghidupkan efek MegaMenu.
Membuat mega menu 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 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 bawaan blogger terbaru seperti contempo, emporio, soho dst.
Cara Membuat Mega MENU Pada Tampilan Blog:
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
Membuat mega menu 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 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 bawaan blogger terbaru seperti contempo, emporio, soho dst.
Cara Membuat Mega MENU Pada Tampilan Blog:
- 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, Hijau, 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...
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
0 Response to "Cara Membuat Mega MENU Pada Tampilan Blog"
Post a Comment
Silahkan Berkomentar Sesuai Dengan Topik Pembahasan,Komentar Spam Tidak Akan Muncul Sorry..!!!!