Cara Membuat Menu Navigasi Halaman About, Contact, Disclaimer, dan Privacy Policy di Blogspot
Cara Membuat Menu Navigasi Halaman About, Contact, Disclaimer, dan Privacy Policy di Blogspot - Tutorial kali ini akan membahas tentang cara membuat menu halaman About, Contact, Disclaimer, dan Privacy Policy di Blogspot dengan template bawaan blogger.
Jika teman-teman baru membuat blog dan belum memiliki akun google adsense, template dan menu navigasi blog sangat mempengaruhi proses review pendaftaran akun google adsense.
Tidak jarang alasan pendaftaran adsense ditolak karena halaman atau aplikasi yang memiliki navigasi atau interaksi dengan kontentanya sengaja dibuat sulit.
Membuat menu navigasi di atas header pada blogspot sebenarnya tidaklah sulit, namun karena tidak ada menu khusus yang di sediakan oleh blogger, hal tersebut membuat kita sedikit kebingungan.
Menu navigasi di atas header biasanya digunakan untuk meletkan navigasi about, disclaimer, contact, sitemap, privacy policy, dll.
Ok, silakan simak cara membuat menu navigasi di asat header berikut ini:
Cara Membuat Menu Navigasi Halaman About, Contact, Disclaimer, dan Privacy
1. Template > Edit HTML2. Pasang kode HTML berikut ini di bawah kode <body> atau <body ...ada kode lain... .>
<ul class="topnav" id="myTopnav">
<li><a href="/p/about.html">About</a></li>
<li><a href="/p/sitemap.html">Sitemap</a></li>
<li><a href="/p/kontak.html">Kontak</a></li>
<li><a href="/p/disclaimer.html">Disclaimer</a></li>
<li class="icon">
<a href="javascript:void(0);" onclick="myFunction()">☰</a>
</li>
</ul>
Catatan:
Kode di atas sudah dilengkapi link ke halaman statis About, Sitemap, Kontak, dan Disclaimer. Anda tinggal membuat halaman statis dengan nama/judul halaman yang persis sama: About, Sitemap, Kontak, Disclaimer.
3. Pasang Kode CSS Topbar Navigasi Menu di atas Header Blog berikut ini di atas kode ]]></b:skin> atau awali denga kode <style> dan akhiri dengan kode </style> jika akan disimpan di atas kode </head>
/* Topbar Navmenu */
ul.topnav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
ul.topnav li {float: left;}
ul.topnav li a {
display: inline-block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
transition: 0.3s;
font-size: 17px;
}
ul.topnav li a:hover {background-color: #555;}
ul.topnav li.icon {display: none;}
@media screen and (max-width:680px) {
ul.topnav li:not(:first-child) {display: none;}
ul.topnav li.icon {
float: right;
display: inline-block;
}
}
@media screen and (max-width:680px) {
ul.topnav.responsive {position: relative;}
ul.topnav.responsive li.icon {
position: absolute;
right: 0;
top: 0;
}
ul.topnav.responsive li {
float: none;
display: inline;
}
ul.topnav.responsive li a {
display: block;
text-align: left;
}
}
4. Pasang Kode Add JavaScript berikut ini di atas kode </head> atau </body>
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
5. Save Template!
Menu navigasi di atas header template blogspot ini tidak responsive, menu navigasi tersebut tidak muncul jika blog Anda dikunjungi melalui smartphone atau Android.
Namun, teman-teman tidak perlu khawatir karena tutorial ini saya buat khusus untuk blog yang menggunakan template bawaan blogger yang diperuntukan mendaftar google adsense agar cepat diterima atau di aprov.
This comment has been removed by the author.
ReplyDeletesama-sama semoga menjadi ilmu yang bermanfaat.
DeleteMakasih gan sangat bermanfaat
ReplyDeletesama-sama salam sukses
Delete