Mecha versi 2.6.4 sudah dirilis!

Bekerja dengan Blog Seluler

Tabel Konten
  1. 1. URL Blog Desktop dan Seluler 
  2. 2. Perbedaan Elemen HTML Blog Desktop dengan Blog Seluler 
  3. Pastikan Fitur Blog Seluler Aktif 
  • Dua Metode Modifikasi 
    1. Metode 1: Menambahkan Kelas Khusus Tampilan Seluler pada Tag <body> 
    2. Metode 2: Memanfaatkan Kondisional Seluler 
      1. Membedakan CSS Blog Desktop dengan Blog Seluler 
      2. Menghilangkan/Menampilkan Elemen HTML 
      3. Menggunakan Kondisional Seluler Sebagai Bagian dari Kelas 
    3. Terakhir… 
  • 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

    22 Komentar

    Unknown

    CTRL + D dulu mas. Kemaren nyoba otak-atik template seluler dari eltelu gak bisa-bisa, nanti mau coba disini mana tau berhasil :D

    Fahmi

    mas. gimana ya caranya custom template mobile blogger?

    Adhit Ciyoni (Khodit)

    Ohh jadi jika ingin blog kita bisa diakses di handphone dengan tampilan seluler, cukup dengan menambahkan kan ?m=1 dibelakang URL nya ya mas taufik!!!!

    waah jadi terbantu :D
    :-bd nice info mas

    Unknown

    Dalam pengaturan seperti ini artinya web/blog otomatis akan menyesuaikan pada layar device ya sob?

    Unknown

    Pusing mas :p tapi lagi dicoba \o/

    Unknown

    Mas, ada solusi buat blog saya gak ? Begini, kenapa di blog saya pada saat ukuran Browser kita perkecil kok sidebarnya jadi pindah posisi di bawahnya postingan ya ? tampilannya jadi kayak acak-acakan.

    Apa Karena templatenya ? Tolong dicek: {aldhinya.blogspot.com. Mohon bantuannya...

    budkalon

    Berati templatenya responsif, dan itu bagus.

    generasimumet

    waiki seng tak golek i suwon mas taufik ,sedikit meringankan beban di kepala :-bd

    ahyarra

    menghilangkan m=1 di url, gimana ya mas? :(

    Taufik Nurrohman

    Tinggal dinonaktifkan saja fitur tampilan blog seluler dari pengaturan.

    ahyarra

    menghilangkan m=1 di blog gimana ya mas? supaya terlihat ga ada m=1 nya di mobile. saya pakai responsive template.
    makasih mas.
    http://www.ahyarramadhan.com

    Rizki Heryandi

    Itu mode template seluler masih diaktifkan berarti mas , coba non aktfikan dulu , bisa dibaca disini mas , yang paling bawah ya http://www.kizeh.com/2015/01/cara-cek-websiteblog-mobile-friendly-sudah-mobile-friendly-kah-sahabat.html

    Willy Prasetyo

    bang. di blog saya tampilan mobilenya kok nggak fit di layar..
    seperti ini

    udah tak utak atik tapi tetep aja.. mohon solusinya.. 0:)

    TKP ---> http://winpz.blogspot.com/?m=1

    Taufik Nurrohman

    Masih bisa di zoom ya? Tambahi kode meta ini pasti beres:

    <meta name='viewport' content='width=device-width'/>

    Willy Prasetyo

    iya. wah beneran. makasih mas penyelesaiannya.. :)

    Unknown

    Mas mau tanya cara biar tampilan mobile menjadi m=0 gimana ya?
    Kayak ini b4sharing.blogspot.com

    runganSport

    aduh, masih binging dengan kode-kodenya yang bejibun

    Komentar telah ditutup.