Mohon Tunggu Proses Memuat Konten Halaman

Terbaru

18
Tgl. 27 Mei 2012

Cara Mengubah Drop-Down Menu Untuk Halaman Blog Tampilan Selular Menjadi Menu Horizontal

Terinspirasi dari jawaban seorang sahabat atas pertanyaan yang saya ajukan di sebuah forum (dalam ...

Ilustrasi Menu Pada Blog
Terinspirasi dari jawaban seorang sahabat atas pertanyaan yang saya ajukan di sebuah forum (dalam hal ini adalah pertanyaan tentang tips dan trik Blogger (Blogspot) apa yang sekiranya belum pernah dibahas atau belum pernah ada yang membuat uraian tentang hal tersebut dalam sebuah postingan artikel), yang menyebutkan bahwa menurut sepengetahuannya belum pernah ada seorang pun yang membahas tentang cara mengubah menu ‘Page’ tampilan seluler dari drop-down ke menu horizontal. Kemudian menurut pendapatnya, menu ‘Page’ untuk tampilan seluler yang secara default ditampilkan dalam bentuk drop-down rasanya kurang nyaman dan akan lebih nyaman apabila ditampilkan dalam tampilan horizontal saja.

Untuk mempermudah pemahaman dari uraian di atas, jadi intinya yang dimaksud adalah bagaimana cara untuk mengubah tampilan menu drop-down yang ditampilkan apabila sebuah blog dibuka dengan menggunakan perangkat selular, seperti yang tampak pada gambar di bawah ini.
Tampilan Menu Drop Down

Menjadi menu horizontal seperti halnya apabila halaman blog yang dimaksud dibuka dengan menggunakan komputer, seperti yang tampak pada gambar di bawah ini.
Tampilan Menu Horizontal

Jadi begini, apabila kita menggunakan template bawaan yang telah disediakan oleh Blogger, maka secara default menu halaman yang diberikan untuk tampilan blog versi mobile memang menu dalam bentuk drop-down. Hal tersebut tentunya sangat beralasan karena dengan penggunaan menu drop-down untuk tampilan mobile, maka menu tersebut akan dapat ditampilkan secara optimal pada semua jenis atau type perangkat selular (termasuk diantaranya perangkat selular yang memiliki resolusi layar tinggi maupun perangkat selular yang memiliki resolusi layar rendah atau kecil). Berbeda halnya dengan menu halaman yang ditampilkan secara mendatar, maka bisa jadi menu yang ada tidak dapat ditampilkan secara optimal apabila halaman blog yang dimaksud dibuka dengan menggunakan perangkat seluler yang memiliki resolusi layar kecil. Namun demikian pada kenyataannya memang akan lebih nyaman dan efektif apabila halaman yang ada ditampilkan secara mendatar, karena selain menu untuk semua halaman ditampilkan dan dapat langsung dilihat oleh pengunjung ketika membuka beranda, pengunjung pun akan lebih mudah dalam mengeklik untuk mengakses dan membuka setiap halaman yang ada.

Oke, sekarang kita kembali pada pokok bahasan yang utama, yaitu tentang cara mengubah drop-down menu untuk halaman blog tampilan selular menjadi menu horizontal. Seperti biasa, karena kita akan melakukan kustomisasi pada template halaman blog yang kita kelola, maka sangat disarankan apabila sebelumnya dilakukan backup terhadap template yang digunakan. Hal ini dilakukan untuk mengantisipasi apabila terjadi kekeliruan saat melakukan kustomisasi, sehingga apabila terjadi hal yang demikian maka template dapat dikembalikan dengan mudah yaitu memanfaatkan backup template yang telah diunduh atau disimpan sebelumnya.

Kemudian apabila template sudah dibackup, 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 -----------------

}
<-- 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 -----------------

}
<-- sampai sini


Ketiga, cari kode <span class='pagelist-arrow'>&amp;#9660;</span> dan kemudian hapus rangkaian kode yang ada mulai dari kode <b:if cond='data:mobile'> yang terletak beberapa baris di atasnya sampai dengan kode <b:else/>, dan hapus juga kode </b:if> yang terletak beberapa baris di bawahnya.
<div class='widget-content'>
    <b:if cond='data:mobile'>    <-- hapus dari sini

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

    <b:else/>    <-- sampai dengan sini
      <ul>

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

      </ul>
    </b:if>    <-- hapus juga kode ini
    <b:include name='quickedit'/>
  </div>


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

.mobile .tabs-inner .PageList .widget-content {
  padding: 1px;
  margin: 0px; 
}

.mobile .tabs-inner .widget ul {
  border: 1px solid #666666;
  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) );
}

.mobile .tabs-inner .widget li a {
  display: inline-block;
  padding: 5px;
  margin-$endSide: 0px;
  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) );
}

.mobile .tabs-inner .widget li.selected a,
.mobile .tabs-inner .widget li a:hover {
  background: #eeeeee; 
  background: -moz-linear-gradient( center top, white 70%, #cccccc 100% ); 
  background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, white), color-stop(1, #cccccc) );
}


Kelima, simpan template Anda


Sehingga akhirnya apabila halaman blog dibuka dengan menggunakan perangkat selular, maka menu drop-down akan berubah menjadi menu horizontal seperti yang tampak pada gambar di bawah ini.
Menu Horizontal Pada Blog Tampilan Mobile

Kemudian satu hal yang kiranya perlu saya tegaskan lagi yaitu, simpan atau backup terlebih dahulu template yang Anda gunakan sebelum menerapkan teknik ini, mengingat dalam penerapannya tidak sedikit kode yang dihapus dan kemudian diganti dengan kode yang berbeda. Dan ada baiknya pula apabila sebelum menerapkan teknik tersebut Anda buka terlebih dahulu http://eltelu.blogspot.com dalam tampilan mobile atau menggunakan browser pada perangkat selular yang Anda miliki untuk membuktikan dan memastikan bahwa trik ini benar-benar berhasil bila diterapkan.

Semoga berguna serta bermanfaat, dan selamat mencoba.
Salam.



Suka? Bagikan artikel ini kepada teman - jaringan Anda.
Label: , .
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 18 komentar untuk artikel ELTELU yang berjudul Cara Mengubah Drop-Down Menu Untuk Halaman Blog Tampilan Selular Menjadi Menu Horizontal .
28/05/12 20.01 O

Terima kasih sobat... artikelnya keren nih... aku coba deh tuk edit templetnya..
Sobat link sobat telah aku pasang di blogku...Tolong di back link ya
Thank's

29/05/12 04.04 O

@syamsul arifinOke...

30/05/12 05.49 O

Yap..pertanyaan serupa pernah di tanyakan oleh teman kami di yahoo answer. Kebanyakan user mengaktifkan mobile template hanya bermaksud agar situs dapat di buka via ponsel dengan cepat...bukan begitu kawan.

30/05/12 06.00 O

@Maya YuraYap... begitulah kawan. :)

15/06/12 10.24 O

thank gan, ane jadi experimen di hp

14/08/12 14.23 O

menarik nih drop down di seluler

18/11/12 05.44 O

itu untuk tampilan pada versi mobile kan, kalau untuk bikin menu laman jadi dropdown pada versi dekstop bijimana Gan?

18/11/12 22.09 O

@zhoe_haemyUntuk membuat menu laman pada halaman versi desktop menjadi drop-down, maka Sobat bisa menggunakan rangkaian script yang serupa dengan script yang dipakai untuk membuat menu laman pada halaman versi seluler.

Dalam hal ini script yang dimaksud adalah rangkaian script yang terdapat diantara [b:if cond='data:mobile'] dan [b:else/], yang dihapus dalam langkah ketiga teknik di atas.

Semoga dapat membantu. :)

08/08/15 22.41 O

Saya mau tanya bro..sejauh ini saya sukses menerapkan cara yang diatas tapi tampilan warna serta tulisan yang ada pada menu

/* Menu Halaman Horizontal Tampilan Selular
------------------------------------------------------------- */

.mobile .tabs-inner .PageList .widget-content {
padding: 1px;
margin: 0px;
}

.mobile .tabs-inner .widget ul {
border: 1px solid #666666;
background: #eeeeee;
background: -moz-linear-gradie
}
...................................... dst

Kemudian saya ganti dengan kode yang terdapat dalam blog anda juga yg "berjudul Cara Menambahkan Sub Menu (Pull Down Menu) Pada Tab Menu Horizontal Standar Blogger",

yaitu kode

.tabs-inner .widget li ul {
z-index: 100; position: absolute;
left: -999em; height: auto; margin: 0; padding: 0;
border: 1px solid #999999;
}

.tabs-inner .widget li ul, .tabs-inner .widget li ul a,
.tabs-inner .widget li ul li:first-child a {
-moz-border-radius: 0px; -webkit-border-radius: 0px;
-goog-ms-border-radius: 0px; border-radius: 0px;
}
....................... Dst


Dan berhasil! Pertanyaan saya,apakah itu boleh dilakukan? apakah penggantian yang saya buat bisa berpengaruh buruk atau tidak baik pada tampilan blog saya nantinya ?

TERIMAKASIH sebelumnya... sukses sllu

10/08/15 16.48 O

@Bola salju Selama tidak ada masalah saya rasa tidak apa-apa Sob. Namun perlu diketahui bahwasanya template blogger secara spesifik sebenarnya memberikan 2 (dua) opsi penggunaan CSS, yaitu untuk tampilan versi web dan mobile.

Dalam beberapa kasus, CSS yang digunakan untuk tampilan versi web bisa saja tidak berfungsi dengan baik pada tampilan seluler. Oleh sebab itulah perlu ditambahkan CSS khusus mobile agar tampilan versi selulernya sesuai dengan yang diharapkan. Akan tetapi bila tidak menambahkan CSS khusus mobile saja tampilannya sudah sesuai dengan yang diinginkan, maka CSS mobile pun tidak perlu ditambahkan.

15/08/15 00.12 O

Terimakasih untuk informasinya mas..semoga konten blog ini yang sudah memang sangat bagus semakin bermutu.

15/08/15 00.45 O

@Bola salju Aamiin. Sama-sama dan terimakasih balik Sob.

27/08/15 15.50 O

Mas,kenapa peng editan template mobile nya sudah tidak bisa lagi ya? maksudnya tidak tampil lagi dengan baik,padahal template sebelumnya adalah tampilan template "sederhana" tapi tidak bisa muncul dengan baik.. beberapa blog saya mmg sempat berhasil sebulan yang lalu membuat tampilan mobilenya,tapi kemarin saya buat sudah tidak bisa lagi.. mohon bantu annya mas.. thanks

04/09/15 19.59 O

@Mr Newton Menurut sepengetahuan saya, blogger secara berkala juga melakukan pembaruan terhadap template standar yang disediakan Sob. Sehingga apabila seperti itu maka mungkin saja hal tersebut terjadi karena beberapa pembaruan yang (mungkin) dilakukan oleh blogger. Namun demikian karena saya sendiri sudah cukup lama tidak berkutat dengan editing template, maka masalah yang menjadi penyebabnya pun secara spesifik saya juga kurang tahu. Maaf.

20/09/15 21.19 O

Mas kalo mau mengganti tanda pemisah "|" menjadi "•" seperti tampilan blog eltelu versi Mobile pada saat ini? Mohon bantuannya..

20/09/15 21.59 O

@Denz Ahmad Sobat tinggal mengganti tanda "|" dengan "& #8226;" ( tanpa tanda kutip dan tanpa spasi setelah & ) sehingga akan menjadi seperti ini: •

20/09/15 22.42 O

Maaf mas, tapi saya kurang paham. Maksudnya mengganti dimana ya? Karena saya tidak menemukan tanda "|" pada script nya?

21/09/15 11.49 O

@Denz Ahmad Oh, maaf Sob saya baru sadar bahwa yang Sobat maksud "|" merupakan garis pemisah yang terdapat diantara menu Beranda | Daftar Isi | Tentang.

Perlu diketahui bahwa garis tersebut dihasilkan oleh kode CSS berikut ini:

.mobile .tabs-inner .widget ul {
border: 1px solid #666666;
(dan seterusnya)

Sehingga apabila Sobat ingin menghilangkan garisnya maka hapus saja kode border: 1px solid #666666;

Lantas bagaimana cara mengantinya dengan • ?

Beberapa cara yang dapat dilakukaan misalnya adalah dengan memanfaatkan CSS ::after selector, menambahkan • dalam kode pengulangan template yang dipakai untuk membaca daftar laman, atau dengan cara membuat list item daftar laman secara manual.

Oleh sebab itu mungkin akan lebih baik bila Sobat pelajari terlebih dulu tentang berbagai hal tersebut karena akan menjadi panjang dan lebar uraiannya apabila saya jelaskan satu per satu.

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