1 Mei 2014

Membuat menu navigasi responsive pada template standar blogger

Code Javascript dan CSS diambil dari http://blogpedas.blogspot.com/2014/01/membuat-menu-navigasi-responsive-dengan.html.
Sebelumnya saya ucapkan terima kasih pada +Agri Ahyar Prasetya yang terlebih dahulu sharing mengenai navigasi yang responsive, serta seorang Anonim yang bertanya pada artikel sebelumnya. Sebenarnya masalah navigasi yang responsive ini sudah banyak dijelaskan melalui tulisan-tulisan blogger sebelumnya, salah-satunya pada artikel blogpedas, yang tanpa kemunafikan, sayapun mencontoh javascript dan CSS-nya pada blog ini, namun untuk mengimplementasikan tutorial pada template standar blogger, caranya sedikit berbeda. Ikuti langkah-langkah dibawah.


1. Letakan code javascript

Letakan code javascript dibawah ini tepat diatas code </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$( function()
{
$( '#nav li:has(ul)' ).doubleTapToGo();
});
</script>


2. Letakan link navigasi baru dibawah navigasi lama

Letakan code dibawah ini, dibawah navigasi lama pada template standar blogger.

<div class='nav'><div id="nav" role="navigation"> <a href="#nav">Show navigation</a> <a href="#">Hide navigation</a>
<ul class="clear-fix">
<li><a href="http://www.gokomputer.com/">Beranda</a></li>
<li><a href="http://alamat-lain1">kontak-saya</a></li>
<li><a href="http://alamat-lain2">tentang-saya</a></li>
</ul>
</div>
</div>

Notes : Tentu kalian sudah paham tentang masalah ini. Pada bagian a href, kalian harus mengganti alamat web/blog kalian masing-masing, seperti kontak, tentang saya, sitemap dll, lalu tambah lagi a href dibawahnya, jika merasa kurang ("sesuai kebutuhan anda").

Jika masih bingung dimana harus meletakan code diatas, lihat gambar dibawah.

Cara membuat navigasi responsive pada template standar blogger

Letakan code yang tadi dibawah <b:else/> seperti gambar diatas.

Notes : Banyak sekali code <b:else/> pada code html anda. Pastikan anda meletakannya pada bagian terdekat dari section class='tabs' dan widget id='pagelist1'. Perhatikan betul gambar diatas yang dilingkari.

3. Letakan css pada media screen

letakan css dibawah ini dibawah ]]></b:skin>.

@media only screen and ( max-width:820px) {
.tabs-inner .widget li a {display:none;}
#nav{display: inline-block;}
.nav {background:#72BF96;height: 35px}
#nav {width: 100%;font: 14px Arial,Tahoma,Helvetica,FreeSans,sans-serif;position: static;}
#nav ul, #nav li {list-style: none;margin: 0;padding: 0;z-index:99999}
#nav > a {display: none;}
#nav li {position: relative;}
#nav li a, #nav li a:hover {color: #fff;display: block;text-decoration: none;}
#nav > ul {background:none;height: 35px}
#nav > ul > li {width: 15%;height: 100%;float: left;list-style: none;margin: 0;padding: 0;}
#nav > ul > li > a {height: 100%;font-size: 14px;font-weight:bold;line-height: 35px;text-align: center;}
#nav > ul > li:hover > a, #nav > ul:not( :hover ) > li.active > a {background-color:#72BF96;transition: all 0.5s ease-in-out;}
#nav {position: relative;top: auto;left: auto;}
#nav > a {width: 35px;height: 35px;text-align: left;text-indent: -9999px;background-color: #72BF96;position: relative;}
#nav > a:before, #nav > a:after {position: absolute;border: 2px solid white;top: 35%;left: 25%;right: 25%;content: '';}
#nav > a:after {top: 60%;}
#nav:not( :target ) > a:first-of-type, #nav:target > a:last-of-type {display: block;}
#nav > ul {height: auto;display: none;position: absolute;left: 0;right: 0;background-color: #0B944B;}
#nav:target > ul {display: block;}
#nav > ul > li {width: 100%;float: none;}
#nav > ul > li > a {height: auto;text-align: left;padding:1.5px 7px 1.5px 7px;}
#nav > ul > li:not( :last-child ) > a {border: none;}
.menu1 {background-color:#1358BA}
.menu2 {background-color:#03C7E9}
.menu3 {background-color:#FE1635}
.menu4 {background-color:#6E8D5A}}

Keterangan :

Baris ke-4   .nav {background: #72BF96} adalah warna background awal navigasi sebelum dibuka
Baris ke-13 #background-color: #72BF96 adalah warna hover
Baris ke-16 white adalah warna putih pada dua garis border navigasi
Baris ke-19 #background-color: #0B944B adalah warna background setelah terbuka
max-width:820px artinya menu navigasi akan ditampilkan pada resolusi 820px kebawah
 
4. Sembunyikan menu navigasi baru

Letakan code dibawah ini tepat diatas code </style>

#nav{display: none;}

Tujuannya agar menu navigasi yang baru disembunyikan lalu akan ditampilkan pada resolusi 820px. Pada code css langkah 3 sudah disisipkan code agar menu navigasi yang lama disembunyikan dan menampilkan navigasi yang baru pada resolusi 820px kebawah. Semoga bermanfaat.

Mungkin anda ingin membaca artikel dibawah :
  1. Cara membuat template standar dari blogger menjadi responsive
  2. Cara membuat gambar menjadi responsive 100%
  3. Cara menghilangkan google+ followers pada responsive design
  4. Mengapa responsive tidak bekerja pada template standar blogger
  5. Menghilangkan scroll pada responsive design
4 komentar :
  1. Tanpa kemunafikan juga, blog agan adalah satu-satunya panduan saya dalam memodif template standar menjadi responsive. Artikel ini salah satu elemen penting dlm membuat template standar menjadi responsive yang sempurna. Terimakasih atas sharenya gan...

    BalasHapus
  2. ijin praktek mas decky. maksih sudah d share.. terima kasih sebelum.y :)

    BalasHapus
    Balasan
    1. Silahkan mas sandi, sama-sama. itu blog-nya pakek bahasa apa...? mantap bener. heheh

      Hapus

Jika ada artikel yang tidak Anda mengerti, maka gunakan fasilitas kotak komentar ini atau pada halaman kontak untuk menanyakannya.

Best Regard


Decky canser