Mohon Tunggu Proses Memuat Konten Halaman

Terbaru

6
Tgl. 04 Juni 2012

Cara Mengubah Drop-Down Menu Pada Halaman Blog Versi Mobile Menjadi Menu Model Vertikal

Menu Vertikal Pada Blog Selular
Sobat, seperti yang telah saya uraikan dalam artikel sebelumnya yang berjudul “Cara Mengubah Drop-Down Menu Untuk Halaman Blog Tampilan Selular Menjadi Menu Horizontal”, bahwasanya menu drop-down yang menjadi menu default apabila halaman blog dibuka dengan menggunakan perangkat seluler, dapat diubah atau dikustomisasi kedalam bentuk menu model horizontal. Sehingga dengan demikian maka semua menu halaman akan ditampilkan dan dapat langsung dilihat oleh pengunjung, yang akhirnya dapat mempermudah pengunjung dalam melakukan navigasi.

Namun seperti yang telah saya uraikan pula dalam artikel yang berjudul “Apakah Menu Drop-Down Pada Halaman Blog Versi Mobile Dapat Diubah Menjadi Menu Model Vertikal?” telah saya uraikan pula bahwasanya penggunaan menu model horizontal menjadi kurang efektif ketika perangkat seluler yang digunakan untuk mengakses halaman blog tersebut memiliki resolusi layar kecil, sehingga semua menu tidak dapat ditampilkan dalam satu baris, apalagi jika menu halaman yang ada cukup banyak jumlahnya. Dengan demikian pada akhirnya tampilan halaman malah terkesan kurang rapi dan akan lebih baik apabila beberapa menu halaman yang ada tersebut dijadikan dalam bentuk menu vertikal, yang akan menampilkan menu dalam beberapa baris sekaligus. Dengan menggunakan model menu vertikal untuk menu halaman dengan jumlah banyak, maka selain akan mempermudah pengunjung dalam melakukan navigasi, juga akan menjadikan tampilan halaman terkesan lebih rapi dan profesional.

Seperti biasa dan juga seperti yang telah saya sampaikan dalam artikel sebelumnya yang berjudul “Cara Mengubah Drop-Down Menu Untuk Halaman Blog Tampilan Selular Menjadi Menu Horizontal”, bahwasanya karena kita akan melakukan kustomisasi pada template, 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 di atasnya mulai dari kode <b:if cond='data:mobile'> sampai dengan kode <b:else/> seperti yang tampak pada rangkaian kode di bawah ini.
<div class='widget-content'>
    <b:if cond='data:mobile'> <-- hapus dari sini

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

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

Dan selanjutnya salin kode di bawah ini kemudian sisipkan di tempat kode yang dihapus tadi.
<b:if cond='data:mobile'>
        <b:loop values='data:links' var='link'>
        <ul><li><div align='center'><a expr:href='data:link.href'><data:link.title/></a></div></li></ul>
        </b:loop>
      <b:else/>


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

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

.mobile .tabs-inner .widget ul {
  border: 1px solid #000000;
}

.mobile .tabs-inner .widget li {
  width: 100%; height: 100%;
}

.mobile .tabs-inner .widget li:first-child a {
  padding-$startSide: 0px;
}

.mobile .tabs-inner .widget a {
  text-align: center;
  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) );
  width: 100%; height: 100%;
  border-$endSide: none;
  padding: 4px;
}

.mobile .tabs-inner .widget 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 halaman akan ditampilkan dalam bentuk menu model vertikal seperti yang tampak pada gambar di bawah ini.
Menu Model Vertikal Pada Blog Versi Mobile

Sedangkan untuk memastikan apakah teknik yang telah diterapkan tersebut sudah berhasil atau belum, maka Anda dapat membuka halaman blog tersebut dengan menggunakan browser pada perangkat selular yang Anda miliki, atau dapat pula menggunakan browser yang terdapat pada komputer yang Anda gunakan, yaitu dengan menambahkan tanda ?m=1 di belakang URL blog (misal: http://eltelu.blogspot.com/?m=1).

Semoga berguna serta bermanfaat, dan selamat mencoba.
Salam.


Katagori: ,
Terdapat 6 komentar pada artikel ini ▶

kalau pasang iklan adsense di blogger versi mobile bagaimana caranya yah mas?

Anonim
04/06/12, 18.40 O

@adminSobat, setahu saya Adsense untuk tampilan selular secara otomatis akan ditampilkan apabila telah terpasang Adsense dalam tampilan web. Akan tetapi iklan tersebut memang hanya akan tampil jika perangkat selular yang digunakan merupakan perangkat seluler kelas atas (seperti iPhone dan sejenisnya).

Sehingga Sobat tidak perlu menambahkan kode Adsense pada template tampilan selular, apabila dalam template tampilan web telah terpasang.

Nah, untuk membuktikannya silakan buka blog sobat dalam mode (tampilan) selular dengan menggunakan browser yang ada di komputer Sobat, yaitu dengan menambahkan ?m=1 di belakang URL (misal: http://eltelu.blogspot.com/?m=1)

Namun demikian untuk lebih jelasnya, saya sangat menyarankan agar Sobat membuka dan mempelajari panduan penerapan Adsense untuk konten terlebih dahulu.

Semoga dapat membantu.

05/06/12, 12.06 O

5ksh gan infonya...sangat brmanfaat.

06/06/12, 15.13 O

Keren, makasih tipsnya mas..

23/06/12, 15.22 O

Saya sbg pemula baru mengenal dunia blogging, sebelumnya saya mau tanya mas.
Apakah menu tersebut tidak akan muncul saat dibuka lewat tampilan komputer?
Join balik ya mas www.wanditwenty.blogspot.com

Terimakasih..
Infonya sangat bermanfaat..

Anonim
25/06/12, 00.20 O

@Wandi TwentyMenu hanya akan muncul pada tampilan seluler, Sob. Untuk membuktikannya silakan buka blog ini dengan menggunakan HP Sobat. :)