Tampilan desktop itu sudah tidak penting lagi
Tampilan hape itulah yang lebih penting
Perbandingan kemungkinan orang mengakses blog sobat melalui kedua perangkat adalah:3:1 (tiga berbanding satu), 3 untuk hape hanya satu untuk Laptop/PCdesktop.
Jika sobat ingin tutorial membuat template sobat menjadi responsive kami telah memberikannya di dalam blog ini, terutama kami memposting beberapa tutorial khsusus membuat menu navigasi blogger sobat sendiri, contoh dibawah ini adalah bagaimana menu navigasi bekerja secara mobile, sobat bisa menerapkan contoh ini pada template bawaan (default klasik atau tema default yang lebih baru):
Perhatikan demo live dibawah ini, silahkan eksplorasi dengan menyentuhnya menunya karena image dibawah ini adalah HTML. Sentuh tombol hamburger (garis berlapis tiga):
Menu Navigasi Mobile
Ini hanya demo saja, Menu ini cocok di pasang pada blogger mobile atau Hape.sentuh atau klik menu hamburger (tiga garis putih) sebelah kanan atas demo ini, untuk menjalankannya.
Ini hanya demo saja, Menu ini cocok di pasang pada blogger mobile atau Hape.
sentuh atau klik menu hamburger (tiga garis putih) sebelah kanan atas demo ini, untuk menjalankannya.
Ini hanya demo saja, Menu ini cocok di pasang pada blogger mobile atau Hape.
sentuh atau klik menu hamburger (tiga garis putih) sebelah kanan atas demo ini, untuk menjalankannya.
Terimakasih!
Nah sobat tentu mengerti bahwa layar hape itu kecil sehingga sebuah menu navigasi blog harus bisa dropdown pada saat ditampilkan pada hape. Dan pada layar besar tentunya menu harus terlihat horisontal.
Pada Demo diatas kami mengikuti aturan standard blogger sebagai berikut:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {
font-family: Arial, Helvetica, sans-serif;
}
.mobile-container {
max-width: 480px;
margin: auto;
background-color: #555;
height: 500px;
color: white;
border-radius: 10px;
}
.topnav {
overflow: hidden;
background-color: #333;
position: relative;
}
.topnav #myLinks {
display: none;
}
.topnav a {
color: white;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
display: block;
}
.topnav a.icon {
background: black;
display: block;
position: absolute;
right: 0;
top: 0;
}
.topnav a:hover {
background-color: #5F9EA0;
color: black;
}
.active {
background-color: #5F9EA0;
color: white;
}
</style>
</head>
<body>
<!-- Simulate a smartphone / tablet -->
<div class="mobile-container">
<!-- Top Navigation Menu -->
<div class="topnav">
<a href="/" class="active">EditblogTema</a>
<div id="myLinks">
<a href="#news">Navigasi</a>
<a href="#contact">Pencarian</a>
<a href="#about">Perihal</a>
</div>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
<div style="padding-left:16px">
<h3>Vertical Mobile Navbar</h3>
<p>Ini hanya demo saja, Menu ini cocok di pasang pada blogger mobile atau Hape..</p>
<p>sentuh atau klik menu hamburger (tiga garis putih) sebelah kanan atas demo ini, untuk menjalankannya..</p>
<p>sentuh atau klik menu hamburger (tiga garis putih) sebelah kanan atas demo ini, untuk menjalankannya..</p>
<p>sentuh atau klik menu hamburger (tiga garis putih) sebelah kanan atas demo ini, untuk menjalankannya..</p>
<p>sentuh atau klik menu hamburger (tiga garis putih) sebelah kanan atas demo ini, untuk menjalankannya..</p>
</div>
<!-- Berakhir tampilan hape dan tablet -->
</div>
<script>
function myFunction() {
var x = document.getElementById("myLinks");
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
}
</script>
Ikuti terus tutorial sederhana kami, dan ajukan pertanyaan untuk kita bahas bersama. Blog ini terutama ditujukan buat pemula yang menginginkan Template gratis bercita rasa premium.
Banyak dari kita yang tidak mengindahkan fast speed sebuah blog sehingga pengunjung gak mau balik lagi.. pake code ini semoga aja lebih fast respon ya kang
BalasHapusGak..itu hanya navigasi menu
HapusIni penting banget buat pemula seperti saya...Makasih mas Ya-an
BalasHapusSama-sama.Akan saya jelaskan cara penerapannya...
Hapus