Mohon Tunggu Proses Memuat Konten Halaman

ADVERTISEMENT

Terbaru

10
Tgl. 10 Agustus 2012

Cara Menghilangkan Baris Tombol Navigasi Pada Tampilan Blog Versi Mobile

Adakalanya bila kita melakukan kustomisasi desain tampilan blog versi seluler, maka beberapa elemen halaman yang sekiranya tidak efektif u...

Tombol Navigasi Blog Seluler
Adakalanya bila kita melakukan kustomisasi desain tampilan blog versi seluler, maka beberapa elemen halaman yang sekiranya tidak efektif untuk ditampilkan perlu dihilangkan atau disembunyikan. Sebagai contoh misalnya adalah baris tombol navigasi seperti yang tampak pada gambar di atas. Seperti halnya apabila Anda membuka blog ini dalam tampilan versi mobile atau membukanya dengan menggunakan perangkat seluler, maka Anda akan mendapati bahwa di halaman beranda tidak lagi ditampilkan baris tombol navigasi seperti yang biasa digunakan pada desain tampilan halaman versi seluler yang diberikan oleh Blogger. Namun ketika Anda membuka salah satu artikel yang ada, maka baris tombol navigasi tetap dimunculkan sebagaimana mestinya.

Hal tersebut disebabkan karena dalam teknik yang diuraikan pada artikel dengan judul “Cara Mengedit Template Untuk Mengubah Tema Tampilan Blog Versi Seluler”, saya sengaja melakukan kustomisasi pada template agar baris tombol navigasi hanya ditampilkan di halaman artikel saja, sedangkan di halaman beranda tombol navigasi tidak ditampilkan atau tidak dimunculkan.

Namun demikian bukan tidak mungkin bagi kita untuk menyembunyikan baris tombol navigasi dari halaman beranda maupun halaman artikel. Nah, terkait dengan hal tersebut (sekaligus menanggapi pertanyaan Sobat Blogger mengenai cara menyembunyikan tombol navigasi pada blog tampilan versi seluler), maka berikut ini adalah uraian cara yang dapat digunakan untuk mengerjakannya.

Pertama, buka editor template dengan cara mengeklik menu ‘Template>Edit HTML>Lanjutkan>Expand Template Widget’.

Kedua, cari kode <b:include name='mobile-nextprev'/> dan kemudian hapus kode tersebut untuk menghilangkan tampilan tombol navigasi pada blog versi seluler. Dimana dengan cara menghapus kode tersebut, maka tombol navigasi tidak lagi ditampilkan di halaman beranda maupun halaman artikel.
Kemudian apabila hanya ingin menghilangkan tombol navigasi dari tampilan beranda, maka tinggal menambahkan fungsi logika IF pada kode tersebut, sehingga menjadi seperti rangkaian kode di bawah ini.
<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <b:include name='mobile-nextprev'/>
</b:if>

Sedangkan untuk menghilangkan tombol navigasi dari tampilan halaman artikel saja, maka rangkaian kode yang digunakan adalah seperti yang tampak di bawah ini.
<b:if cond='data:blog.pageType == &quot;index&quot;'>
  <b:include name='mobile-nextprev'/>
</b:if>


Ketiga, simpan template.

Semoga berguna dan bermanfaat.
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 10 komentar pada artikel ini ▶
11/08/12, 04.15 O

Yeesss Akhirnya muncul jg Artikelnya,, Terima Kasih Sob MAster Blogger,, Sy Coba Dulu smoga berhasil...

11/08/12, 09.37 O

@MharxSilakan Sobat....

20/09/12, 01.17 O

lalu bagaimana cara menampilkan kembali tombol navigasinya sob

20/09/12, 09.49 O

@GhiieellaaankUntuk menampilkan kembali, maka tinggal menghapus fungsi IF yang sebelumnya digunakan. Yaitu menghapus [b:if cond='data:blog.pageType == "item"'] atau [b:if cond='data:blog.pageType == "index"'] yang terletak di atas [b:include name='mobile-nextprev'/] dan menghapus [/b:if] yang terletak di bawahnya.

22/09/12, 12.56 O

ko saya cari kodenya tidak ada sob di atas [b:include name='mobile-nextprev'/] , soalnya saya langsung mengedit nya dari artikel sobat yang berjudul Cara Mengedit Template Untuk Mengubah Tema Tampilan Blog Versi Seluler

22/09/12, 21.55 O

@GhiieellaaankApabila tidak dihapus maka semestinya kode tesebut tetap ada.

Coba sekarang Sobat lihat rangkaian kode yang terdapat pada langkah keenam dalam artikel yang dimaksud.

Nah, di situ Sobat dapat menemukan bahwa kode yang sobat maksud tersebut juga tetap tercantum (dalam hal ini terletak di atas [/b:includable] )

30/09/12, 13.02 O

tidak ada sob . bagai mana dong :(

01/10/12, 09.13 O

@Ghilank ArjunaKalau begitu mungkin saja memang sudah Sobat hapus. Sehingga untuk mengembalikannya tinggal menyisipkan kembali kode [b:include name='mobile-nextprev'/] ke tempat yang sesuai dengan sebelumnya.

Untuk mempermudah dalam melakukan penempatan kode, silakan Sobat gunakan blog percobaan dengan menggunakan template yang sama dengan template yang sekarang dipakai.

Sekian dan semoga dapat membantu.

05/07/13, 15.44 O

It works, terima kasih banyak gan.

05/07/13, 23.48 O

@Ahmad Daffa UrrofiSama-sama Sobat. :)

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