Harap Tunggu Proses Memuat Konten Halaman

Facebook Twitter YouTube
Google Plus Profile

Terbaru

22
Tgl: 23 Juni 2013

Cara Gampang Membuat Menu Tab Horizontal Atas Untuk Tampilan Browser Pada Layar Perangkat Handphone Atau Smartphone Smartphone. Ya, sebuah perangkat yang biasa disebut pula sebagai ponsel pintar yang dibangun pada s... http://lh3.ggpht.com/-P96PiS8y6Fg/UcaIjlDeMeI/AAAAAAAABZU/lS6pjQ6rGA8/s72-c/Ilustrasi-Eltelu-Versi-Tampilan-Mobi%25255B2%25255D.jpg?imgmax=800

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://lh4.googleusercontent.com/-vsn5KUlGsIc/UYmyA36vMDI/AAAAAAAABSc/UaF3PprKQH4/s800/Beranda.png" alt="Beranda" title="Beranda"/></a></li>
      <li><a href="http://eltelu.blogspot.com/p/sitemap.html?m=1"><img src="https://lh5.googleusercontent.com/-PzvwMDsW8Ew/UYmvLFADjDI/AAAAAAAABSI/nhJ3y-8lP98/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://lh5.googleusercontent.com/-yep7cuRpWq4/UYmvLsJJFPI/AAAAAAAABSQ/5hdXDeu0NLI/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://lh5.googleusercontent.com/-jbZduEQqB5Q/UYoDSQUNgNI/AAAAAAAABSw/-wbPXoxLfSw/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://lh4.googleusercontent.com/-zmS8wnvLt1g/UYoDSpgXLrI/AAAAAAAABS0/47n3M5mDB7M/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://lh6.googleusercontent.com/-5SO4j871H0I/UYpOK3f0iXI/AAAAAAAABTE/GqnU3S_Fkw0/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.

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.


Diterbitkan Oleh: Pada Pukul 12.33
Baca Pula Artikel Terkait Dalam Katagori: , , .
Silakan klik di sini untuk mengeposkan komentar Anda. Jika Anda ingin membaca artikel lain yang terdapat pada blog ini, maka dapat Anda lakukan dengan cara membuka laman daftar isi. Harap menyertakan http://eltelu.blogspot.com/2013/06/cara-gampang-membuat-menu-tab.html dan atau mencantumkan tautan untuk artikel ini bila Anda menyalin sebagian dan atau keseluruhan isinya. Terimakasih.
Terdapat 22 komentar untuk artikel ELTELU yang berjudul Cara Gampang Membuat Menu Tab Horizontal Atas Untuk Tampilan Browser Pada Layar Perangkat Handphone Atau Smartphone .
24/06/13 01.28 O

save page dulu bang
:D

24/06/13 08.59 O

Maksud di area skin itu di atas nya ]]> sob??

24/06/13 09.27 O

@Abdul MuhammadSilakan Sob. :)

24/06/13 09.28 O

@Denz AhmadYoi, betul sekali, Sob. :)

24/06/13 12.22 O

@AYAHE MELA Sudah Sukses Sob!
di tunggu tutorial Versi Mobile lainnya!

24/06/13 16.15 O

@Denz AhmadSip Sob. Tadi kebetulan saya juga sudah melihatnya langsung pada blog yang Sobat kelola. :)

25/06/13 09.36 O

@AYAHE MELA Terimakasih Sobat Atas kunjungannya, Tetapi kenapa tidak sekalian Join back Google friend connect dan google+ nya!!
hehehe

26/06/13 06.06 O

@Denz AhmadWahhhh, mohon di sorry bila belum bisa join Sob. Sebab kemarin itu ceritanya kan lagi buru-buru.:D #just kid

He heee, saya pasti join kok. :)

26/06/13 16.10 O

wah sangat bermanfaat mastahhh
www.cpartikel.com

26/06/13 23.37 O

@Copy PasteTerimakasih, Sob. Saya perhatikan artikel Sobat juga sangat bermanfaat semua kok. :)

27/06/13 17.23 O

Gan kalo cara membuat menu navigasi : blogging . How to . Mobile blog . Other internet . dll

versi mobile gi mana caranya?

28/06/13 10.29 O

@dani furqonItu sih sebenarnya saya menggunakan PageList (widget) standar Blogger, Sob. Hanya saja memang rangkaian script dan CSS-nya telah saya modifikasi sedemikian rupa sehingga akhirnya menjadi seperti itu.

28/06/13 11.00 O

@AYAHE MELA

Cara modifikasi cssnya gimana sob?

Sorry banyak nanya nubie gan

29/06/13 20.57 O

@dani furqonWahhh, kalau untuk modifikasinya sih tentu saja bila beda template maka caranya juga tidak sama, Sob.

Jadi untuk mengerjakan hal tersebut ada baiknya bila Sobat coba pelajari dulu HTML, CSS, dan atau JavaScript.

06/07/13 10.19 O

Tips trik yang mantap mas bro, tentu saja dapat membuat blog/template blog kita lebih User Friendly..., salam kenal.


http://caragampang21.blogspot.com

01/08/13 03.32 O

@Mona NinaTerimakasih dan salam kenal balik Sobat. :)

29/09/13 05.44 O

saya mau tanya nih, kalo tuto di http://eltelu.blogspot.com/2012/09/cara-membuat-tab-menu-horizontal.html?m=0 itu, tab menunya juga ada di blog versi mobilenya -,- solusinya gimana ?

30/09/13 19.42 O

@Kenns AlfSolusinya, gunakan fungsi kondisional yang saya uraian dalam artikel tentang cara membuat dan mengubah blog menjadi seperti website profesional ini Sob. :)

@AYAHE MELA : terimakasih gan, tolong share cara membuat menu seperti blog Eltelu dong gan, tp berupa widget ya gan :D

06/10/13 19.39 O

@Alfa Renaldo AluskaBisa jadi kali lain saya akan mencoba untuk membuat dan membagikannya Sob. Akan tetapi untuk sementara sepertinya saya belum dapat melakukannya. :)

18/11/13 06.50 O

Template dibagikan dong, keren deh....

18/11/13 10.11 O

@Suryatman SuryaKalau untuk template yang saya pakai sekarang ini, untuk sementara saya belum berencana membagikannya secara publik Sob.

Tapi kalau untuk yang versi 1 telah saya bagikan secara publik dan Sobat dapat menemukan artikel yang mengulas tentang hal tersebut dengan mencarinya dalam daftar isi blog ini. :)