Mohon Tunggu Proses Memuat Konten Halaman

ADVERTISEMENT

Terbaru

42
Tgl. 07 Juni 2012

Cara Membuat Menu Mendatar Rata Tengah Untuk Halaman Blog Selular (Tampilan Mobile)

Apakah Anda pernah membuka halaman blog ini dengan menggunakan perangkat mobile, dalam hal ini adalah dengan memanfaatkan browser yang ter...

Tampilan Menu Halaman Selular Mendatar Rata Tengah
Apakah Anda pernah membuka halaman blog ini dengan menggunakan perangkat mobile, dalam hal ini adalah dengan memanfaatkan browser yang terdapat dalam telepon selular yang Anda miliki? Jika Anda belum pernah membuka halaman blog ini dengan menggunakan perangkat selular, maka tidak ada salahnya apabila Anda mencoba untuk melakukannya. Dan kemudian setelah membuka halaman blog ini dengan menggunakan perangkat selular, coba perhatikan tampilan halamannya. Nah, ketika membuka blog ini dengan memakai browser yang terdapat dalam telepon seluler, bisa jadi Anda akan terkejut karena tampilan selular untuk halaman blog ini sangatlah berbeda bila dibandingkan dengan tampilan selular halaman blog lain walaupun menggunakan platform yang sama.

Diantara beberapa bagian yang berbeda dari tampilan halaman versi selular blog ini dengan halaman versi selular blog lain yang menggunakan platform sama, salah satunya adalah terdapat pada bagian menu halaman yang terletak diantara header blog dan bidang posting. Apabila pada umumnya menu tersebut ditampilkan dalam bentuk menu drop-down yang merupakan model menu default untuk halaman blog tampilan versi selular, maka Anda akan mendapati menu halaman untuk versi selular blog ini ditampilkan dalam bentuk menu mendatar – rata tengah.

Menu mendatar rata tengah untuk halaman blog tampilan selular ini sebenarnya adalah versi ketiga untuk model menu halaman tampilan selular. Dimana untuk model menu yang pertama saya terbitkan dalam artikel yang berjudul “Cara Mengubah Drop-Down Menu Untuk Halaman Blog Tampilan Selular Menjadi Menu Horizontal”, dan model menu yang kedua saya terbitkan dalam artikel yang berjudul “Cara Mengubah Drop-Down Menu Pada Halaman Blog Versi Mobile Menjadi Menu Model Vertikal”. Namun pada kenyataannya kedua model menu halaman tampilan selular tersebut masih kurang efektif apabila diterapkan, apalagi jika perangkat selular yang digunakan untuk membuka halaman blog ini memiliki resolusi layar rendah atau telepon selular dengan model layar kecil.

Nah, terinspirasi dari menu halaman untuk tampilan selular situs web VIVAnews.com (seperti yang tampak pada gambar di bawah ini), saya mencoba kembali melakukan kustomisasi pada menu halaman tampilan selular untuk blog dengan platform Blogger, dan kemudian hasilnya adalah seperti yang saya uraikan dalam artikel ini.

Menu Halaman Tampilan Selular VIVAnews
Sumber gambar: screenshot halaman http://m.vivanews.com/

Seperti yang tampak pada gambar di atas, bahwasanya menu halaman untuk tampilan selular dari situs web tersebut ditampilkan dalam bentuk mendatar dengan sekat-sekat diantara setiap menu yang ada. Dimana model menu mendatar – rata tengah seperti ini bisa jadi lebih efektif dan efisien apabila dibandingkan dengan model menu tampilan selular seperti yang saya ulas pada kedua artikel saya sebelumnya.

Saya menyebutnya lebih efektif dan efisien karena dengan menggunakan model menu mendatar – rata tengah seperti ini, maka semua menu halaman akan langsung ditampilkan, sehingga dengan demikian akan sangat memudahkan pengunjung untuk mengetahui dan kemudian membuka setiap halaman yang ada. Kemudian saya menyebutnya lebih efisien karena model menu halaman seperti ini tidak memakan tempat yang cukup banyak, walaupun jumlah menu yang ditampilkan tidaklah sedikit. Sehingga dengan demikian pengunjung akan tetap mudah mengakses setiap halaman yang ada walaupun menggunakan perangkat selular yang digunakan untuk membuka halaman tersebut memiliki resolusi layar rendah atau telepon seluler dengan ukuran layar kecil.

Oke, sekarang kita kembali pada pokok pembasahan yang sebelumnya, yaitu tentang cara membuat menu mendatar rata tengah untuk halaman blog selular (tampilan mobile). Jadi begini, perlu diketahui bahwa tidak diperlukan pengaturan khusus ketika kita ingin mengubah menu drop-down (sebagai tampilan menu default halaman blog tampilan selular) menjadi menu mendatar – rata tengah (horizontal), karena dalam proses penerapannya adalah serupa dengan penyisian script atau kode tertentu dalam melakukan kustomisasi template pada umumnya. Namun demikian satu hal yang perlu diingat adalah, sangat disarankan agar melakukan backup terlebih dulu atas template yang digunakan, sebelum Anda melakukan kustomisasi. Hal ini dimaksudkan agar jika terjadi kekeliruan dalam melakukan kustomisasi, maka desain halaman blog dapat dikembalikan dengan mudah, yaitu dengan menggunakan backup template sebelumnya.

Kemudian apabila template sudah dibackup, maka langkah selanjutnya buka editor template dengan mengeklik menu ‘Template>Edit HTML>Lanjutkan>Expand Template Widget’, dan selanjutnya kerjakan langkah-langkah di bawah ini secara berurutan.


Pertama, cari kode .mobile .tabs-inner .PageList .widget-content { dan kemudian hapus rangkaian kode yang ada untuk kode tersebut. Dalam hal ini seperti ilustasi kode CSS yang tampak di bawah ini.
--> hapus dari sini
.mobile .tabs-inner .PageList .widget-content {

   ----------------- kode -----------------

}
<-- hapus sampai sini


Kedua,  cari kode .mobile .tabs-inner .PageList .widget-content .pagelist-arrow { dan kemudian hapus rangkaian kode yang ada untuk kode tersebut, seperti cara yang digunakan dalam langkah pertama.
--> hapus dari sini
.mobile .tabs-inner .PageList .widget-content .pagelist-arrow {

   ----------------- kode -----------------

}
<-- hapus sampai sini


Ketiga, cari kode <span class='pagelist-arrow'>&amp;#9660;</span> dan kemudian untuk mempermudah proses, maka hapus rangkaian kode yang ada di atasnya mulai dari kode     <b:if cond='data:mobile'> sampai dengan kode     <b:else/> seperti yang tampak pada rangkaian kode di bawah ini.
<b:includable id='main'>
  <b:if cond='data:title'><h2><data:title/></h2></b:if>
  <div class='widget-content'>
    <b:if cond='data:mobile'>  <-- hapus dari sini

    ----------------- kode -----------------

    <b:else/> <-- hapus sampai sini
      <ul>
        <b:loop values='data:links' var='link'>


Selanjutnya salin kode di bawah ini dan kemudian sisipkan di tempat kode yang dihapus tadi.
<b:if cond='data:mobile'>
      <ul>
        <b:loop values='data:links' var='link'>
            | <b><a expr:href='data:link.href'><data:link.title/></a></b> 
        </b:loop>
      </ul>
    <b:else/>


Sehingga akhirnya rangkaian kode menjadi seperti kode di bawah ini.
<b:includable id='main'>
  <b:if cond='data:title'><h2><data:title/></h2></b:if>
  <div class='widget-content'>
    <b:if cond='data:mobile'>
      <ul>
        <b:loop values='data:links' var='link'>
            | <b><a expr:href='data:link.href'><data:link.title/></a></b> 
        </b:loop>
      </ul>
    <b:else/>
      <ul>
        <b:loop values='data:links' var='link'>


Keempat, salin kode berikut ini dan kemudian sisipkan tepat di atas kode ]]></b:skin>.
/* Menu Halaman Selular -- Horizontal Rata Tengah
------------------------------------------------------------- */

.mobile .tabs-inner .PageList .widget-content {
  width: 99,99%; height: 100%;
  padding: 1px; margin: 0px; 
}

.mobile .tabs-inner .widget ul {
  padding: 3px;
  text-align: center;
  border: 1px solid #000000;
  background: #eeeeee; 
  background: -moz-linear-gradient( center top, white 40%, #cccccc 100% ); 
  background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, white), color-stop(1, #cccccc) );
}


Kelima, simpan template Anda.


Setelah template disimpan, maka apabila halaman blog dibuka dengan menggunakan perangkat selular, menu halaman akan ditampilkan seperti yang tampak pada gambar di bawah ini, dan juga seperti yang tampak pada gambar paling atas (dalam hal ini adalah gambar tampilan menu halaman selular rata tengah yang terdapat di bawah judul artikel ini).

Menu Mendatar Rata Tengah Pada Tampilan Mobile

Sementara itu untuk memastikan keberhasilan penerapan teknik tersebut, maka Anda dapat membuka halaman blog dengan menggunakan browser pada perangkat selular yang Anda miliki, atau dapat pula dilakukan dengan menggunakan browser yang terdapat pada komputer Anda, yaitu dengan menambahkan tanda ?m=1 di belakang URL blog (sebagai contoh misalnya: http://eltelu.blogspot.com/?m=1). Dan sekali lagi yang perlu saya tekankan adalah, backup template Anda sebelum menerapkan teknik tersebut. Dan sebagai catatan, bahwasanya berdasarkan uji coba yang saya lakukan, teknik tersebut dapat diterapkan pada template Blogger kategoriMudah’, ‘Jendela Gambar’, ‘PT Keren Sekali’, ‘Tanda Air’, ‘Kelembutan’, dan juga ‘Perjalanan’.

Semoga berguna serta bermanfaat, dan selamat mencoba.
Salam.


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. Catatan: Komentar balasan hanya diprioritaskan untuk pertanyaan dan atau pernyataan yang diposkan dengan memakai formulir komentar Blogger.
Admin
Terdapat 42 komentar pada artikel ini ▶
07/06/12 20.29 O

Keren gan artikelnya, td di awal kata agan nyebut pernah pake mobile? Saya lg pake hp gan hehe mohon kunjungannya ya --> Online Library

Anonim
07/06/12 21.01 O

@Kang BejoTerimakasih Sob.

10/06/12 07.29 O

tolong...
ane ga ada .mobile .tabs-inner .PageList .widget-content { ??
gimana solusinya?

10/06/12 09.49 O

kayaknya bagus tuh . . .bisa dicoba nih

10/06/12 15.31 O

Kirain ga bisa pasang menu di blogger mobile . Eh ternyata bisa. Thanks tipsnya

Anonim
10/06/12 22.28 O

@EnyongDhewekSetelah saya cek, memang untuk template yang Sobat gunakan, Drop-Down menu terletak di dalam class="tabs-outer".

Sehingga apabila kasusnya seperti ini, maka untuk langkah 'Pertama' dan 'Kedua' dapat Sobat lewati dan langsung kerjakan langkah berikutnya yaitu langkah 'Ketiga' sampai dengan yang terakhir.

Anonim
10/06/12 22.39 O

@Febriansyah Haq (Just Copy and Leave It!!!)Silakan Sob... :)

Anonim
10/06/12 22.47 O

@ReyhanZSama-sama Sob.

11/06/12 13.23 O

ga bisa bro...

Anonim
11/06/12 14.10 O

Kalau begitu unduh (download) template yang Sobat gunakan dan kemudian kirim ke https://facebook.com/semarbingungweblog (via pesan). Dan kemudian nanti saya akan mencoba mengedit template tersebut untuk Sobat.

Anonim
12/06/12 21.28 O

Nice share.
keep posting brader..
Thumbs up!

14/06/12 05.26 O

@elteluThanks gan :)

08/07/12 07.53 O

nice blog... kunjungi juga agungbelog.co.cc

Anonim
08/07/12 09.37 O

@farizalakbarTerimakasih Sobat.

Anonim
08/07/12 09.38 O

@Agunk_arlyOke... Terimakasih Sobat. :)

Anonim
11/07/12 00.13 O

wah artikelnya keren brooo...bagus, mantaaapppp

16/08/12 12.24 O

gan gak bisa nih, kode yg diatas pada gk ada di template saya

17/08/12 15.37 O

sob script yang cara ke 3 tidak ada sob bagai mana ini

25/08/12 02.04 O

@sursatriaTerimakasih Sobat.

25/08/12 02.10 O

@GhiieellaaankHal tersebut terjadi karena bisa jadi karena Sobat belum mengaktifkan bilah menu horizontal standar Blogger.

Sehingga apabila Sobat belum mengaktifkannya, maka cara mengaktifkannya dapat Sobat pelajari pada artikel dengan judul Cara Menambahkan Sub Menu (Pull Down Menu) Pada Tab Menu Horizontal Standar Blogger. Dalam hal ini terdapat pada langkah yang pertama.

25/08/12 02.38 O

@Ricky kosasihJika Sobat menggunakan template standar Blogger, bisa jadi karena Sobat belum mengaktifkan bilah menu horizontal standar Blogger.

Namun bila Sobat menggunakan template dari pihak ke-3, tentu saja teknik tersebut tidak dapat diterapkan, karena seperti yang saya uraikan di atas bahwasanya teknik tersebut hanya berlaku pada template standar Blogger.

Sekian dan semoga dapat membantu.
Salam. :)

24/09/12 01.17 O

mas kode .mobile .tabs-inner .PageList .widget-content .pagelist-arrow { kok nggak ada diblog aku kek mana ya solusinya..?

24/09/12 12.10 O

@serba serbiSobat, perlu diketahui bahwasanya teknik yang diuraikan dalam artikel ini hanya berlaku dan dapat diterapkan pada template standar (bawaan) yang telah disediakan Blogger.

Sehingga tentu saja kode tersebut tidak ditemukan karena template yang Sobat gunakan adalah kustom template (template dari pihak ketiga).

Sekian dan semoga dapat membantu. :)

05/10/12 10.09 O

nice info gan,,,,mampir juga yuk di blog saya dan pasang iklan benners blog anda gratis
http://ramlibloger.blogspot.com
dan
http://cantikdanputihalami.blogspot.com

15/11/12 01.08 O

punya aku kok kode yang dimaksud itu nggak ada kang...

15/11/12 16.55 O

@Khasiat daun alamiApabila Sobat tidak menemukan beberapa rangkaian kode yang dimaksud dalam artikel ini, bisa jadi Sobat belum mengaktifkan penggunaan tab menu standar Blogger.

Sehingga bila memang demikian kasusnya, maka silakan lihat langkah pertama dalam artikel berikut ini untuk mengaktifkan tab menu standar blogger.

Cara Menambahkan Sub Menu (Pull Down Menu) Pada Tab Menu Horizontal Standar Blogger

Semoga dapat membantu. :)

Anonim
28/12/12 20.46 O

tips yang bagus..
terima kasih sudah sharing

29/12/12 12.47 O

@ubudscooterrentalTerimakasih balik Sobat.

mas ko punya saya yang langkah ketiga kodenya ga ada.. jd gimana ya mas.. saya pengen pake tutorial yang ini.. http://eltelu.blogspot.com/2012/07/white-purple-themes-untuk-desain.html.
berarti saya harus mulai dari yang awal ini dulu ya mas... mohon bantuannya ya mas.. terima kasih

mas ko punya saya yang langkah ketiga kodenya ga ada.. jd gimana ya mas.. saya pengen pake tutorial yang ini.. http://eltelu.blogspot.com/2012/07/white-purple-themes-untuk-desain.html.
berarti saya harus mulai dari yang awal ini dulu ya mas... mohon bantuannya ya mas.. terima kasih

mas ko punya saya yang langkah ketiga ga ada ya..
sy mau coba untuk tampilan yang purple putih.. gimana mau masukin lagkah2nya mas.. mohon penjelasnnya ya.. terimakasih

17/01/13 13.21 O

@Asih Budi AriyantiBila Sobat tidak menemukan kode yang dimaksud dalam langkah yang ketiga, maka dapat diartikan bahwa Sobat belum mengaktifkan penggunaan bilah menu standar Blogger.

Jadi untuk mengerjakan teknik yang diuraikan dalam artikel ini silakan Sobat aktifkan dulu bilah menu standar Blogger dengan menggunakan cara seperti yang diuraikan dalam langkah pertama artikel ini.

17/01/13 13.25 O

@Asih Budi AriyantiJadi pokok permasalahannya adalah karena Sobat belum mengaktifkan tab menu standar Blogger.

Jadi silakan Sobat aktifkan dulu dengan cara seperti yang telah saya sebutkan pada komentar balasan sebelumnya.

Semoga dapat membantu. :)

mas tanya lagi ya.. kenapa ga bisa ya.. saat saya coba katanya ada yang salah saat hapus pada kolom 15, baris 1915.. kalo ga salah itu kenapa ya mas..untuk yang langkah menghapus .mobile .tabs-inner .PageList .widget-content .pagelist-arrow {.. uda dicoba.. tapi saya ragu karena ada 2 tanda { yang pertama apa yang kedua..
.mobile .tabs-inner .PageList .widget-content .pagelist-arrow {
border-$startSide: 1px solid $(tabs.border.color);
}
#sidebar-toggler-wrapper {
clear:both;
position:relative;
}
seperti diatas sy musti hapus smp bagian mana ya.. terimakasih.

22/01/13 01.20 O

@Asih Budi AriyantiKalau Sobat ragu untuk menghapus bagian yang dimaksud, maka cara yang paling aman adalah dengan menjadikan bagian tersebut menjadi komentar.

Caranya adalah dengan menambahkan /* di awal kode dan menambahkan */ di akhir kode yang dimaksud.

Sebagai contoh misalnya dijadikan seperti komentar dalam CSS berikut ini:

/* Menu Halaman Selular -- Horizontal Rata Tengah
------------------------------------------------------------- */

25/03/13 20.43 O

mas nice arikel. tapi pusing kepalaku mau nyontohinnya, gk ketemu semua kodenya.
bisa dibuatin gk mas untuk saya versi blog mobilnya?

28/03/13 23.54 O

@Sandi MetalandSemangat Sob. Jangan sampai Sobat menyerah sebelum mencapai keberhasilan. Paling tidak sekalian untuk belajar lah.

Oh ya, perlu diingat bahwa teknik tersebut di atas hanya berlaku untuk template standar Blogger ya Sob.

Jadi kalau misalnya diterapkan pada custom template, maka hasilnya belum tentu sesuai dengan yang diharapkan.

Kemudian terkait dengan membuatkan versi tampilan mobile, untuk sementara jujur saja saya belum bisa. Hal ini disebabkan karena kebetulan ada cukup banyak pekerjaan di dunia nyata sehingga waktu untuk ngeblog pun cukup tersita.

jadi, ada baiknya bila Sobat coba dengan cara mempelajari artikel saya yang berhubungan dengan hal tersebut.

Sekian dan semoga dapat dimaklumi.

Anonim
31/03/13 15.16 O

permisi, bagus nie artikelnya, lagi bingung neh, jadi ikutan nanya, meringankan tampilan blog versi mobile gimana caranya, ketika tampilan home ringan tapi pada postingan berat, trims,,,

19/04/13 00.34 O

@kenaungankuKalau untuk masalah tersebut, jjur saja saya juga masih kurang begitu paham, Sob. Tapi bisa jadi dapat dilakukan dengan berbagai cara, yang salah satunya adalah dengan memperkecil dimensi ataupun ukuran gambar yang terdapat dalam post. Serta cara-cara yang lainnya.

21/05/13 08.01 O

terimakasih gan atas infonya salam kenal yah gan
maaf gan numpang promonya yah
rajalistrik.com ialah toko online kami yang menjual produk-produk teknik industri terbesar, terlengkap, termurah, dan terpercaya di Indonesia yang menawarkan lebih dari 200.000 item produk dari kurang lebih 200 merek. rajalistrik.com berupaya memudahkan Anda untuk mendapatkan produk-produk teknik yang Anda inginkan dengan jaminan orisinalitas, kemudahan bertransaksi, kecepatan pengiriman, dan harga yang kompetitif.http://rajalistrik.com/

13/11/13 17.56 O

ma brow kok di template ane kaga bisa yaw ,, Mohon Bimbinganya ,, gada kod ke 1 ke 2 ,, -_-

14/11/13 07.45 O

@Yayan KurniawanTentu saja tidak bisa Sob. Hal ini disebabkan karena Sobat menggunakan custom template. Sementara itu tutorial ini ditujukan pada penggunaan standar template (default) yang disediakan Blogger.

How To ▶
Education ▶
SEO ▶
Other Internet ▶
Programming ▶
Tutorial ▶
DP & Story ▶
Tips & Trick ▶

o

  • .Ragam Tumbuhan
  • .Unik & Langka
  • .Aneka Buah
  • .Produk Sederhana
  • .Karya Seni
  • .Tempat Wisata
  • .Ragam Kegiatan
  • .Aneka Bunga
  • .Hewan & Serangga
GALERI
KIRIM MASUKAN
E L T E L U
Semar Bingung's Weblog