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:

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:blog.isMobile'> … </b:if>

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

Pastikan Fitur Blog Seluler Aktif 

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

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: