Cara Membuat Menu Navigasi Blog Khusus buat Tampilan di HP

New Fastest Magz V2
CARA membuat Menu Navigasi blog khusus hanya muncul di versi mobile (HP) ini sudah GBL terapkan di tampilan baru template blog New Fastest Magz. Silakan buka blog demonya di HP Anda, maka akan muncul menu di atas logo. Sedangkan di desktop, menu tersebut tidak muncul.

Bagaimana Cara Membuat Menu Navigasi Blog Khusus buat Tampilan di HP saja? Yang GBL 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 GBL 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>


GBL 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!

Post a Comment

0 Comments