Bekerja dengan Blog Seluler
Tabel Konten
- 1. URL Blog Desktop dan Seluler
- 2. Perbedaan Elemen HTML Blog Desktop dengan Blog Seluler
- Pastikan Fitur Blog Seluler Aktif
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 + "_blog-pager-newer-link"' 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 + "_blog-pager-older-link"' 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 + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'>&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 + "_blog-pager-older-link"' expr:title='data:olderPageTitle'>&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'>&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'>&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:
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 == "false"'>
<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 == "true"'>
<div id='header-wrapper' class='mobile-header'>
Header Blog Tampilan Seluler
</div>
</b:if>
<b:if cond='data:blog.isMobile != "true"'>
<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='"mobile-" + 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:
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.
Unknown
kalau mengatasi widget pada sidebar hilang pada saat diakses melalui seluler gimana mas??
URL Blog Seluler: http://nama_blog.blogspot.com/?m=1
Taufik Nurrohman
→ XHTML Blogger, Elemen Halaman: Seksi dan Widget
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:
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
Taufik Nurrohman
Tinggal aktifkan fitur blog seluler saja.
runganSport
aduh, masih binging dengan kode-kodenya yang bejibun
Unknown
Terimakasih infonya gan, sy pernah coba aktifkan pilihan selulernya, tapi iklan sy g' muncul, gimana solusinya ya
Taufik Nurrohman
#c904152029287468995