Menyediakan informasi seputar perkembangan mesin Blogger dan internet secara umum.

Bekerja dengan Blog Seluler

Berikut ini adalah beberapa cara yang bisa Anda lakukan untuk menangani tampilan blog versi mobile/perangkat seluler. Namun sebelum memulainya, ada beberapa hal penting yang harus Saya jelaskan terlebih dahulu sebagai pondasi:

1. URL Blog Desktop dan Seluler

Menampilkan tampilan blog blogspot versi seluler bisa dilakukan dengan cara menambahkan kueri berupa ?m=1 pada URL. Sebagai contoh, jika alamat blog Anda adalah http://nama_blog.blogspot.com, maka untuk menampilkan tampilan blog perangkat seluler, Anda harus mengubah URLnya menjadi http://nama_blog.blogspot.com/?m=1. Tampilan blog versi biasa bisa Anda akses dengan mengubah nilai m menjadi 0, atau cukup buang kueri tersebut dari URL:

URL Blog Seluler: http://nama_blog.blogspot.com/?m=1URL Blog Normal: http://nama_blog.blogspot.com/?m=0URL Blog Normal: http://nama_blog.blogspot.com/

2. Perbedaan Elemen HTML Blog Desktop dengan Blog Seluler

Setiap widget posting yang masih asli akan selalu dilengkapi dengan duplikat markup HTML khusus untuk tampilan blog seluler. Ini ditandai dengan munculnya beberapa elemen <b:includable> dengan atribut-atribut bernilai (atau setidaknya memiliki imbuhan kata) “mobile”.

Berikut ini adalah contoh susunan XHTML navigasi halaman blog pada versi tampilan biasa:

<b:includable id='nextprev'>
  <div class='blog-pager' id='blog-pager'>
    <b:if cond='data:newerPageUrl'>
      <span id='blog-pager-newer-link'>
      <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
      </span>
    </b:if>

    <b:if cond='data:olderPageUrl'>
      <span id='blog-pager-older-link'>
      <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
      </span>
    </b:if>

    <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>

    <b:if cond='data:mobileLinkUrl'>
      <div class='blog-mobile-link'>
        <a expr:href='data:mobileLinkUrl'><data:mobileLinkMsg/></a>
      </div>
    </b:if>

  </div>
  <div class='clear'/>
</b:includable>

Beberapa gulungan layar ke bawah, Anda akan menemukan kode yang nyaris sama dengan kode di atas. Perbedaan hanya terlihat pada karakteristik berupa ditambahkannya kelas-kelas dengan imbuhan “mobile” dan/atau hilangnya beberapa elemen HTML dari kode mirip yang pertama kali Anda temukan:

<b:includable id='mobile-nextprev'>
  <div class='blog-pager' id='blog-pager'>
    <b:if cond='data:newerPageUrl'>
      <div class='mobile-link-button' id='blog-pager-newer-link'>
      <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'>&amp;lsaquo;</a>
      </div>
    </b:if>

    <b:if cond='data:olderPageUrl'>
      <div class='mobile-link-button' id='blog-pager-older-link'>
      <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'>&amp;rsaquo;</a>
      </div>
    </b:if>

    <div class='mobile-link-button' id='blog-pager-home-link'>
    <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
    </div>

    <div class='mobile-desktop-link'>
      <a class='home-link' expr:href='data:desktopLinkUrl'><data:desktopLinkMsg/></a>
    </div>

  </div>
  <div class='clear'/>
</b:includable>

Fungsinya adalah untuk membedakan markup HTML antara blog tampilan layar desktop dengan blog tampilan seluler. Sehingga, sebagai contoh, jika kita mengakses halaman blog kita pada perangkat desktop, maka kita akan melihat kode HTML seperti ini pada sumbernya:

<div class='blog-pager' id='blog-pager'>
  <span id='blog-pager-newer-link'>
    <a class='blog-pager-newer-link' href='…' id='Blog1_blog-pager-newer-link' title='Posting Lebih Baru'>Posting Lebih Baru</a>
  </span>
  <span id='blog-pager-older-link'>
    <a class='blog-pager-older-link' href='…' id='Blog1_blog-pager-older-link' title='Posting Lama'>Posting Lama</a>
  </span>
  <a class='home-link' href='/'>Beranda</a>
  <div class='blog-mobile-link'>
    <a href='/?m=1'>Lihat versi seluler</a>
  </div>
</div>
<div class='clear'></div>

Namun, saat kita membuka halaman blog pada perangkat seluler, kita akan melihat bahwa elemen-elemen navigasi blog telah berubah:

<div class='blog-pager' id='blog-pager'>
  <div class='mobile-link-button' id='blog-pager-newer-link'>
    <a class='blog-pager-newer-link' href='…' id='Blog1_blog-pager-newer-link' title='Posting Lebih Baru'>&amp;lsaquo;</a>
  </div>
  <div class='mobile-link-button' id='blog-pager-older-link'>
    <a class='blog-pager-older-link' href='…' id='Blog1_blog-pager-older-link' title='Posting Lama'>&amp;rsaquo;</a>
  </div>
  <div class='mobile-link-button' id='blog-pager-home-link'>
    <a class='home-link' href='/'>Beranda</a>
  </div>
  <div class='mobile-desktop-link'>
    <a class='home-link' href='/?m=0'>Lihat versi web</a>
  </div>
</div>
<div class='clear'></div>

Logikanya seperti itu.

Masing-masing elemen <b:includable> akan ditampilkan sesuai keadaannya (dalam hal ini adalah mengenai apakah kita sedang berada pada perangkat desktop ataukah perangkat seluler), yang dalam sebuah widget dapat dikondisikan dengan kondisional <b:if cond='data:mobile'>:

<b:if cond='data:mobile'>
  <!-- menampilkan navigasi halaman versi mobile pada perangkat seluler -->
  <b:include name='mobile-nextprev'/>
<b:else/>
  <!-- menampilkan navigasi halaman versi desktop pada perangkat desktop -->
  <b:include name='nextprev'/>
</b:if>

<b:if cond='data:mobile'> hanya berlaku jika diletakkan/dideklarasikan di dalam <b:includable> dan tidak bisa bekerja di luar elemen itu. Kondisional universal untuk menyatakan tampilan seluler bisa dinyatakan sebagai ini:

<b:if cond='data:blog.isMobile'> … </b:if>
<b:if cond='data:blog.isMobileRequest'> … </b:if>

Anda bisa menerapkan kondisional di atas di mana saja.

Pastikan Fitur Blog Seluler Aktif

Pembaharuan: Kondisional data:blog.isMobileRequest dapat bekerja meski fitur blog seluler tidak aktif, karena kondisional ini tampaknya hanya mengecek keberadaan ?m=1 pada URL.

Jika tidak, aktifkan kembali dengan cara masuk ke tab Templat kemudian klik ikon roda gigi yang berada di bawah penayang blog seluler Anda:

Mengaktifkan Fitur Blog pada Perangkat Seluler
Mengaktifkan fitur blog seluler.

Setelah itu Anda akan mendapati pilihan untuk mengaktifkan atau tidak mengaktifkan fitur blog seluler. Pilih untuk mengaktifkan fitur blog seluler.

Dua Metode Modifikasi

Setelah mengerti tentang bagaimana Blogger bisa menangani tampilan blog seluler terhadap tampilan blog biasa, kita bisa memulai untuk mengetahui dua ide yang biasa digunakan untuk membedakan tampilan antara blog versi biasa dengan blog versi seluler.

Metode 1: Menambahkan Kelas Khusus Tampilan Seluler pada Tag <body>

Blogger sudah memiliki tag data tersendiri yang akan menggenerasikan kelas bernama mobile berdasarkan tipe tampilan blog, yaitu data:blog.mobileClass yang bisa kita letakkan pada tag HTML di dalam templat sebagai nilai kelas. Misalnya pada tag <body> seperti ini:

<body expr:class='data:blog.mobileClass'>

Dengan cara di atas, maka kita akan mendapati bahwa tag <body> telah dilengkapi dengan kelas mobile pada blog tampilan seluler seperti ini:

<body class=' mobile'>

Saat kita membuka blog pada tampilan desktop, nilai mobile pada atribut akan menghilang. Sehingga kita bisa membedakan tampilan blog seluler dengan blog biasa melalui kelas blog seluler tersebut melalui CSS:

#header-wrapper {
  background-color:#000;
  color:#fff;
}

#main-wrapper {
  width:900px;
  margin:0 auto;
}

/* mobile */
body.mobile #header-wrapper {
  background-color:#fff;
  color:#000;
}

body.mobile #main-wrapper {
  width:auto;
  margin:0 10px;
}

Metode 2: Memanfaatkan Kondisional Seluler

Kita juga bisa menggunakan kondisional universal yang digunakan untuk menyatakan tampilan blog seluler sebagai pembatas tampilnya elemen-elemen HTML —termasuk tag <style>— dengan cara seperti ini:

Membedakan CSS Blog Desktop dengan Blog Seluler

<b:if cond='data:blog.isMobile'>
  <style>
  body {background-color:black} /* blog akan berwarna hitam pada tampilan seluler */
  </style>
<b:else/>
  <style>
  body {background-color:white} /* blog akan berwarna putih pada tampilan desktop */
  </style>
</b:if>

Menghilangkan/Menampilkan Elemen HTML

Beberapa pola yang biasa digunakan:

<b:if cond='data:blog.isMobile == &quot;false&quot;'>
  <div id='header-wrapper' class='desktop-header'>
    Header Blog Tampilan Layar Desktop
  </div>
</b:if>
<b:if cond='data:blog.isMobile'>
  <div id='header-wrapper' class='mobile-header'>
    Header Blog Tampilan Seluler
  </div>
</b:if>
<b:if cond='data:blog.isMobile == &quot;true&quot;'>
  <div id='header-wrapper' class='mobile-header'>
    Header Blog Tampilan Seluler
  </div>
</b:if>
<b:if cond='data:blog.isMobile != &quot;true&quot;'>
  <div id='header-wrapper' class='desktop-header'>
    Header Blog Tampilan Layar Desktop
  </div>
</b:if>

Menggunakan Kondisional Seluler Sebagai Bagian dari Kelas

Pada dasarnya, data:blog.isMobile akan menampilkan nilai berupa true atau false tergantung dari apakah blog tersebut dibuka pada tampilan seluler ataukah pada layar desktop. Sehingga, sebenarnya kita juga bisa menggunakan data tersebut sebagai nama kelas (bagian dari nama kelas) untuk menyatakan bahwa blog tersebut sedang dibuka pada perangkat seluler atau perangkat desktop:

<body expr:class='&quot;mobile-&quot; + data:blog.isMobile'>

Kode di atas akan menampilkan dua kemungkinan nilai kelas, yaitu:

<body class='mobile-true'>

atau

<body class='mobile-false'>

tergantung dengan perangkat apa kita membuka halaman blog tersebut. Sehingga:

/* blog normal */
body.mobile-false #header-wrapper {
  background-color:white;
  color:black;
}

body.mobile-false #sidebar-wrapper {
  background-color:white;
  color:black;
}

/* blog seluler */
body.mobile-true #header-wrapper {
  background-color:black;
  color:white;
}

body.mobile-true #sidebar-wrapper {
  background-color:white;
  color:black;
}

body.mobile-true .desktop-elem {
  display:none !important;
  visibility:hidden;
}

/* dan seterusnya… */

Terakhir…

Agar pengeditan CSS pada blog tampilan seluler bisa bekerja, jangan memilih jenis templat apapun pada opsi templat seluler. Pilihlah opsi Tersesuai:

Pilih Pilihan Tersesuai
Tidak memilih template seluler apapun dengan cara memilih opsi Tersesuai

  

Berlangganan

Berlangganan: Dapatkan berbagai materi dan informasi seputar dunia pemrograman yang tidak akan pernah bisa kalian dapatkan di buku dan di bangku kuliah.

 22 Komentar

Memuat…

Tautan (link) hidup dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan tautan dengan aman, gunakan kode [url=http://example.com]Teks Tautan[/url]
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA</i>
Untuk menyisipkan gambar, gunakan kode [img]URL GAMBAR[/img]
Untuk menyisipkan judul, gunakan tag <b rel="h4">JUDUL ANDA DI SINI…</b>
Untuk menciptakan efek tebal gunakan tag <strong>TEKS ANDA DI SINI…</strong>
Untuk menciptakan efek huruf miring gunakan tag <em>TEKS ANDA DI SINI…</em>

Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.

:) :( ^_^ :D ;) :bd :'( :\ ;p B) :Q :Ozzz 7:( \o/ **p :* 0:) :a 7:O *fuck* x& x@ ~x( *yaya* =p*

Nama Saya Taufik Nurrohman. Sebenarnya Saya tidak bisa disebut sebagai seorang yang profesional dalam bidang ini, karena Saya tidak menguasai bidang ini melalui pendidikan formal. Saya hanyalah seorang antusias. Dibandingkan sebagai seorang desainer atau pengembang, Saya lebih suka jika disebut sebagai seorang hobiis saja yang tertarik dengan dunia web.

Daftar Tautan

Saya tidak bisa hidup tanpa JavaScript! Aktifkan JavaScript?
Ke atas!