Berikut ini yakni beberapa cara yang sanggup 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 sanggup dilakukan dengan cara menambahkan kueri berupa ?m=1 pada URL. Sebagai contoh, jikalau alamat blog Anda yakni 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 sanggup Anda saluran 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 orisinil 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 mempunyai imbuhan kata) “mobile”.
Berikut ini yakni teladan 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 instruksi yang nyaris sama dengan instruksi di atas. Perbedaan hanya terlihat pada karakteristik berupa ditambahkannya kelas-kelas dengan imbuhan “mobile” dan/atau hilangnya beberapa elemen HTML dari instruksi ibarat 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 yakni untuk membedakan markup HTML antara blog tampilan layar desktop dengan blog tampilan seluler. Sehingga, sebagai contoh, jikalau kita mengakses halaman blog kita pada perangkat desktop, maka kita akan melihat instruksi HTML ibarat 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, ketika 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 ibarat itu.
Masing-masing elemen <b:includable> akan ditampilkan sesuai keadaannya (dalam hal ini yakni mengenai apakah kita sedang berada pada perangkat desktop ataukah perangkat seluler), yang dalam sebuah widget sanggup 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 jikalau diletakkan/dideklarasikan di dalam <b:includable> dan tidak sanggup bekerja di luar elemen itu. Kondisional universal untuk menyatakan tampilan seluler sanggup dinyatakan sebagai ini:
<b:if cond='data:blog.isMobile'> … </b:if><b:if cond='data:blog.isMobileRequest'> … </b:if>Anda sanggup menerapkan kondisional di atas di mana saja.
Pastikan Fitur Blog Seluler Aktif
Pembaharuan: Kondisional data:blog.isMobileRequest sanggup bekerja meski fitur blog seluler tidak aktif, sebab kondisional ini sepertinya 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 perihal bagaimana Blogger sanggup menangani tampilan blog seluler terhadap tampilan blog biasa, kita sanggup memulai untuk mengetahui dua pandangan gres yang biasa dipakai untuk membedakan tampilan antara blog versi biasa dengan blog versi seluler.
Metode 1: Menambahkan Kelas Khusus Tampilan Seluler pada Tag <body>
Blogger sudah mempunyai tag data tersendiri yang akan menggenerasikan kelas berjulukan mobile menurut tipe tampilan blog, yaitu data:blog.mobileClass yang sanggup kita letakkan pada tag HTML di dalam templat sebagai nilai kelas. Misalnya pada tag <body> ibarat 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 ibarat ini:
<body class=' mobile'>Saat kita membuka blog pada tampilan desktop, nilai mobile pada atribut akan menghilang. Sehingga kita sanggup 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 sanggup memakai kondisional universal yang dipakai untuk menyatakan tampilan blog seluler sebagai pembatas tampilnya elemen-elemen HTML —termasuk tag <style>— dengan cara ibarat 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, bersama-sama kita juga sanggup memakai 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 sanggup bekerja, jangan menentukan jenis templat apapun pada opsi templat seluler. Pilihlah opsi Tersesuai:
