Gampang Membuat Menu Tab Horizontal Atas Untuk Tampilan Browser Pada Layar Perangkat Handphone Atau Smartphone
Ilustrasi Tampilan Eltelu Versi Mobile Dibuka Dengan Menggunakan Perangkat iPhone
Smartphone. Ya, sebuah perangkat yang biasa disebut pula sebagai ponsel pintar yang dibangun pada sistem operasi mobile dengan kemampuan komputasi serta konektivitas lebih maju bila dibandingkan dengan fitur telepon ini bisa jadi di jaman yang semakin maju dan canggih sekarang ini bukan lagi merupakan suatu perangkat yang asing apalagi aneh bagi kita. Smartphone yang awalnya hanya menggabungkan fungsi personal digital assistant (PDA) dengan ponsel ini kini semakin lengkap dengan adanya tambahan fungsi media player portabel, kamera, dan unit navigasi GPS yang akhirnya membentuk satu perangkat multi guna.
Seiring dengan perkembangan, akhirnya banyak pula smartphone modern yang memiliki resolusi tinggi dan web browser yang dapat menampilkan halaman web standar serta situs mobile yang dioptimalkan. Sedangkan untuk sistem operasi yang digunakan pada smartphone modern pun juga semakin beragam. Sebagai contoh diantaranya adalah Google Android, Apple iOS, Symbian Nokia, RIM BlackBerry OS, Bada Samsung, Microsoft Windows Phone, webOS Hewlett-Packard, dan embedded distribusi Linux seperti Maemo dan MeeGo. Dimana sistem operasi tersebut dapat diinstal atau dipasang pada berbagai model ponsel yang berbeda, dan biasanya masing-masing perangkat dapat menerima update atau pembaruan software OS selama masa pakainya.
Lantas apa hubungannya artikel ini dengan handphone, smartphone, dan atau yang sejenisnya? Sesuai dengan uraian di atas bahwasanya smartphone modern pada umumnya telah memiliki dukungan web browser yang dapat menampilkan halaman web standar serta situs mobile yang dioptimalkan, sehingga seiring dengan perkembangan perangkat mobile termasuk diantaranya adalah smartphone, tablet pc, dan lain sejenisnya, maka untuk mengakses situs web atau blog tertentu seseorang tidak lagi harus menggunakan perangkat komputer seperti misalnya desktop personal computer, laptop, notebook, dan atau netbook. Akan tetapi itu semua dapat pula dilakukan secara lebih mudah dan gampang dengan menggunakan perangkat mobile, misalnya dengan memakai browser yang terpasang pada smartphone.
Merujuk pada data laporan yang disajikan oleh Google Analytics, rata-rata tiap hari lebih dari 30% (tiga puluh persen) pengunjung yang mengakses blog ini menggunakan perangkat mobile. Dimana berdasarkan data laporan tersebut berapa jenis perangkat mobile yang digunakan antara lain adalah perangkat besutan Samsung (misal: Samsung GT-E2200, Samsung GT-S5360 Galaxy Y, Samsung GT-P3100 Galaxy Tab 2 7.0, Samsung GT-B5330 Galaxy Chat, Samsung GT-I9300 Galaxy SIII, Samsung GT-N7100 Galaxy Note II, Samsung GT-I8160 Galaxy Ace 2, Samsung GT-P5100 Galaxy Tab 2 10.1, Samsung GT-C3312), kemudian disusul oleh perangkat BlackBerry (misal: BlackBerry 9320 BlackBerry Curve 9320, BlackBerry 9300 Curve 3G, BlackBerry 9220, BlackBerry 9700 Bold, BlackBerry 9800 Torch), diikuti dengan perangkat besutan Google, Apple, dan sebagainya termasuk diantaranya yang juga cukup banyak adalah perangkat Nokia serta perangkat mobile lainnya yang tidak terdeteksi jenisnya namun diketahui menggunakan Opera Mini Browser sebagai perambannya.
Nah, berdasarkan rujukan data di atas maka dapat disimpulkan bahwa ternyata penggunaan perangkat seluler untuk mengakses situs web atau blog cukup tinggi, dan bahkan bisa jadi pemakaiannya untuk keperluan tersebut akan semakin meningkat seiring dengan perkembangan serta semakin murah dan beragamnya perangkat mobile yang tersedia di pasaran.
----------
Oke, karena bahasan utama dalam artikel ini tidaklah untuk mengulas tentang merk, model, jenis, ataupun harga dan lain sebagainya terkait dengan spesifikasi handphone maupun smartphone, maka sekarang kita kembali pada pokok bahasan yang utama yakni tentang cara gampang membuat menu tab horizontal atas untuk tampilan layar perangkat mobile. Dimana salah satu tujuan dari pembuatan tab menu model ini adalah untuk mempermudah pengunjung dalam melakukan navigasi sekaligus untuk mempercantik atau memperindah tampilan blog yang kita kelola.
Apabila Anda membuka laman Twitter versi seluler (dalam hal ini adalah mobile.twitter.com) dengan memakai prangkat mobile seperti smartphone misalnya, maka salah satu bagian yang tampak pada posisi paling atas laman tersebut adalah sebuah barisan menu horizontal yang memuat beberapa tombol navigasi, dimana model dari tombol navigasi tersebut lebih kurang adalah seperti yang tampak pada gambar di atas.
Lantas cara pembuatannya bagaimana? Sekaligus melanjutkan artikel saya sebelumnya yang berjudul “Cara Membuat Dan Mengubah Halaman Blog Menjadi Seperti Tampilan Website Profesional”, untuk membuat menu tab horizontal pada tampilan blog versi seluler seperti itu sebenarnya tidaklah sulit, karena dalam pengerjaannya teknik yang digunakan adalah serupa dengan cara membuat tab menu untuk tampilan versi web. Dimana dalam hal ini adalah seperti yang sebelumnya telah saya uraikan dalam artikel dengan judul “Cara Membuat Tab Menu Horizontal Seperti Navbar Di Atas Header Halaman Blog” dan artikel dengan judul “Cara Membuat Menu Tab Keren Pada Blog Dengan Sub Menu Pull Down Dan Ujung Sudut Melengkung”. Hanya saja karena tujuannya nanti adalah agar tab menu yang dibuat ini dimunculkan pada tampilan blog versi mobile, maka secara otomatis kita pun mesti menggunakan fungsi kondisional yang disediakan oleh Blogger, yaitu fungsi <b:if cond='data:blog.isMobile'> seperti yang sebelumnya juga telah saya uraikan dalam salah satu artikel di atas.
Selanjutnya terkait dengan cara membuat menu tab horizontal untuk tampilan versi seluler, Anda dapat melakukannya dengan mengerjakan langkah-langkah berikut ini secara urut dan runtut.
Pertama, buka editor template.
Kedua, sisipkan CSS berikut ini dalam area skin.
.bilah-menu-seluler{
text-align:center;
width:100%;
min-height: 34px;
z-index: 99;
background: #19A347;
background: -moz-linear-gradient(center top , #4DB870 0%, #009933 100%);
background: -webkit-gradient(linear, left top, left bottom, from(#4DB870), to(#009933));
background: -o-linear-gradient(top, #4DB870, #009933);
background: -ms-linear-gradient(top, #4DB870, #009933);
border-bottom: 2px solid #006B24;
}
.bilah-menu-seluler ul{
margin:0px;
padding:0px;
}
.bilah-menu-seluler li{
display:inline;
}
.bilah-menu-seluler img{
width:24px;max-width:24px;
height:24px;max-height:24px;
margin:2px;
padding:2px;
border-bottom: 1px dotted #80CC99;
}
.bilah-menu-seluler img:hover{
background: #009933;
}
Ketiga, sisipkan rangkaian kode dengan format seperti contoh di bawah ini pada division tertentu dalam template Anda. Apabila menggunakan template standar Blogger, maka Anda dapat menyisipkannya tepat di bawah content-outer division atau dalam hal ini tepatnya adalah di bawah <div class="content-outer">. Akan tetapi apabila menggunakan custom template, maka sisipkan pada division yang sesuai dengan kondisi template yang Anda gunakan.
<b:if cond='data:blog.isMobile'>
<div class="bilah-menu-seluler">
<ul>
<li><a href="http://eltelu.blogspot.com/?m=1"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXfkTqLPaDnk1QltC0uPivqQRzzK-Xu2oBsmMG8dC_r-xvaxGXXpRJt2AjPlf2xkTAXY5XHHhBclZJGglSC_MEI0YOZ61Ho57GwSM_TSYjp4gFwsuehNoBhlFzWjbnhdeUoGhnQhboqb8/s800/Beranda.png" alt="Beranda" title="Beranda"/></a></li>
<li><a href="http://eltelu.blogspot.com/p/sitemap.html?m=1"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXG_gqeHveFQnJwcx0siMJOcbtcKeX1AwsKLFFidIfxTRuASXMYVpKCa0gXfueps_V3w1RHeGO9ujxJK7h6xci0Y4nroClBTM-ER2wmHUU8FDIh4vuUNEu7KV_yZ5hV0ICkYbCHDz3XDU/s800/Daftar%2520Isi.png" alt="Daftar Isi" title="Daftar Isi"/></a></li>
<li><a href="http://eltelu.blogspot.com/2012/06/klik-di-sini-untuk-mengajukan.html?m=1"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPuGy-wIcU_N5N1-glYKYEfLeLho_64cQ9ZtcoX6LWUxWeESDq_Lu8Z6cfvGfflwyMYg33ftx0Db-OsSokVnJXbp_h4BeNUG_A3Id8GJnIFi4mRKlrc-o0O0t9beaLx9Mj5h3i5Q9kyR0/s800/Tanya%2520Jawab.png" alt="Tanya Jawab" title="Tanya Jawab"/></a></li>
<li><a href="http://eltelu.blogspot.com/2012/08/ketentuan-dan-kebijakan.html?m=1"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSZTS_XXQBNf7s4wZg_IptX-SgupNSRj61j-wd5rKTSgBVxazsfRsoQeaAyYulNcDxSINecLrrmVmmlJ-G0w_ipCSQzR_9qksc6YR-9kbJzxWUHgkyW6pQ8r4adexZJl5RY9jM9JyyuOE/s800/Kebijakan.png" alt="Kebijakan" title="Kebijakan"/></a></li>
<li><a href="http://eltelu.blogspot.com/2012/10/tata-cara-menghubungi-admin-eltelu.html?m=1"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDMyFlX8awEOOwE5G-g_YpD7ieSndvB9HwPeIqcRaHL1TE2feEq-oeEDGiaQUgAPaSsUxx1FSJfe97HhNEJW25WO3Cwo20VMivZa6tUQaJMvP7xanfTlxUc8aoljhUyvDbjocXLRFDlGY/s800/Kontak.png" alt="Kontak" title="Kontak"/></a></li>
<li><a href="http://eltelu.blogspot.com/2013/01/pasang-iklan-anda-dalam-bentuk-banner.html?m=1"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi858cobFci3LZM-Toe5IoiGrdDuuSXDavcC96DHG_63dTrWHZQe2xyJkyeYxZffwTDF_yDeOsPqBIlxXQmV10-atkwsTIteGjTsENCWDrINy9lyaEzvX7eZkzSKHMIm1laSTMSCWVJdl8/s800/Info%2520Pemasangan%2520Iklan.png" alt="Pasang Iklan" title="Pasang Iklan"/></a></li>
</ul>
</div>
</b:if>
Keterangan:
Rangkaian kode di atas hanyalah sekedar contoh. Sehingga dalam penerapannya silakan dilakukan penyesuaian terhadap URL, gambar, alt image, maupun title yang digunakan.
Pembuatan menu dalam bentuk gambar atau ikon tertentu seperti contoh di atas dimaksudkan agar dapat menampilkan lebih banyak menu pada tab. Sehingga secara otomatis akan menjadi lebih efektif bila dibandingkan dengan menu dalam bentuk teks. Hal ini disebabkan karena dimensi layar perangkat seluler (handphone/smartphone) yang terbatas (tidak selebar layar komputer), sehingga kalau menggunakan model menu dalam bentuk teks maka akhirnya menu yang dapat ditampilkan pun menjadi lebih sedikit.
Keempat, simpan template.
Demo
Bagaimana, tidak sulit bukan? Jadi, apabila Anda tertarik untuk menerapkan teknik tersebut pada blog yang yang Anda kelola, maka tidak ada salahnya bila mencobanya. Namun sebelum Anda menerapkan teknik yang saya uraikan di atas, jangan lupa untuk mengubah setelan pilihan template seluler kedalam setelan khusus karena tab menu hanya akan dimunculkan pada tampilan seluler apabila menggunakan setelan tersebut.
Semoga berguna, bermanfaat, dan apabila Anda mengalami kesulitan atau kendala dalam mengimplementasikan teknik tersebut di atas, maka Anda dapat mengajukan pertanyaan terkait kesulitan atau kendala yang anda alami tersebut dengan cara mengeposkan komentar secara langsung dalam artikel ini.
Salam.
