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>
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.
Letakan code yang tadi dibawah
<b:else/>
seperti gambar diatas.<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 :
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...
BalasHapusOk gan. sama-sama
Hapusijin praktek mas decky. maksih sudah d share.. terima kasih sebelum.y :)
BalasHapusSilahkan mas sandi, sama-sama. itu blog-nya pakek bahasa apa...? mantap bener. heheh
Hapus