Bagaimana Cara Membuat Menu Navigasi Blog Khusus buat Tampilan di HP saja? Yang CB praktekkan di New Fastest Magz adalah sebagai berikut:
1. Letakkan kode berikut ini DI ATAS kode </head>
<style type="text/css">
.mobileShow { display: none;}
/* Smartphone Portrait and Landscape */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px){ .mobileShow { display: inline;}}
</style>
2. Letakkan kode berikut ini DI ATAS kode <div id='header-wrapper'>
<div class="mobileShow">
<div style='background-color:#ddd;height:20px;padding:10px;text-align:right'>
<a href="/">Home</a> -
<a href="http://contohblognih.blogspot.com">About</a> -
<a href="http://contohblognih.blogspot.com">Sitemap</a> -
<a href="http://contohblognih.blogspot.com">Contact</a> -
<a href="http://contohblognih.blogspot.com">Link</a>
</div>
</div>
Anda juga bisa meletakkannya di bawah <div id='header-wrapper'> jika ingin memunculkan menu khusus versi mobile ini di bawah logo/nama blog, tapi nanti akan "bentrok" dengan menu versi mobile yang sudah ada.
3. Save Template!
4. Test langsung di HP Anda!
KODE "mobileShow" ini bisa juga buat menampilkan widget, sidebar, atau elemen tertentu hanya di versi mobile. Kode ini CB dapatkan dari HubSpot.
Aslinya, kode ini adalah untuk menampilkan teks atau gambar yang khusus untuk tampilan blog di versi mobile, tidak muncul di blog versi desktop.
Caranya:
1. Add the following code in the HTML <body>
<div class="mobileShow">
TEXT OR IMAGE FOR MOBILE HERE
</div>
2. Add the following code in the HTML <head> section of your page:
<style type="text/css">
.mobileShow { display: none;}
/* Smartphone Portrait and Landscape */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px){ .mobileShow { display: inline;}}
</style>
CB berharap Anda bisa mencoba panduan Cara Membuat Menu Navigasi Blog Khusus buat Tampilan di HP ini, lalu share di komentar.
Ingat ya.... mengetesnya langsung di HP Anda! Karena di desktop tidak muncul.
Tips lain tentang cara membuat menu blog responsif bisa Anda baca di situs Responsive Mobile Menu.
Good Luck and Happy Blogging!