Contoh tampilan ‘status message’ yang sudah dimodifikasi.
Status Message adalah sebuah pesan yang akan muncul di atas posting ketika kita sedang berada di halaman hasil pencarian atau halaman label. Memodifikasi tampilannya mungkin mudah, yaitu dengan cara menimpa CSS bawaan Blogger dengan kode CSS baru yang mengandung pengaturan tampilan yang berbeda seperti ini:
Kode di atas akan secara otomatis meliputi posting pertama dengan elemen <div class='first-post'>, sehingga kita bisa melakukan sesuatu dengan kelas itu untuk mengubah tampilannya:
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=1 URL Blog Normal: http://nama_blog.blogspot.com/?m=0 URL 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”.
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:
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:
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>
Anda bisa menerapkan kondisional di atas di mana saja.
Pastikan Fitur Blog Seluler Aktif
Jika tidak, aktifkan kembali dengan cara masuk ke tab Template kemudian klik ikon roda gigi yang berada di bawah penayang blog seluler Anda:
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 template 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:
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 type='text/css'> body {background-color:black} /* blog akan berwarna hitam pada tampilan seluler */ </style> <b:else/> <style type='text/css'> body {background-color:white} /* blog akan berwarna putih pada tampilan desktop */ </style> </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:
<b:if cond='data:post.allowComments'> adalah kondisional template yang berfungsi untuk menyatakan bahwa pemilik blog mengizinkan pengunjung untuk menuliskan komentar. Anda biasanya akan melihat kode ini membungkus semua elemen di dalam seksi komentar sehingga jika administrator mengeset opsi pengaturan untuk tidak mengizinkan pengunjung lain menuliskan komentar baru melalui panel pengaturan utama (bukan opsi pada pengaturan posting), maka seluruh komentar yang telah masuk akan ikut menghilang (disembunyikan):
<!-- Seluruh konten di bagian ini akan menghilang jika Administrator mengeset opsi pengaturan untuk tidak mengizinkan pengunjung menuliskan komentar baru. -->
</b:if> </div>
Biasanya hal ini akan merugikan blog-blog bertipe diskusi yang ramai pengunjung, terutama jika komentar-komentar yang diterbitkan berguna untuk pembaca lain sebagai referensi tambahan.
Suatu saat mungkin Anda akan mengalami masa-masa sibuk atau katakanlah “sedang tidak mampu untuk membalas komentar-komentar yang masuk”. Saat Anda mengalami itu biasanya hal yang akan Anda lakukan adalah menutup komentar posting secara temporer dengan cara menyembunyikannya seperti ini:
Menonaktifkan sekaligus menyembunyikan komentar pada semua posting.
Untuk menjaga agar komentar-komentar lama tidak hilang, Anda bisa memindahkan/memperbaharui wilayah kondisional <b:if cond='data:post.allowComments'> menjadi lebih sempit. Cukup hilangkan formulir komentarnya saja dan biarkan komentar-komentar yang sudah ada tetap pada tempatnya. Caranya adalah hapus kode <b:if cond='data:post.allowComments'> ... </b:if> yang mengelilingi elemen <div class='comments' id='comment'> sehingga akan tersisa seperti ini:
Masing-masing kode biasanya akan ditemukan dua buah, termasuk juga untuk seksi komentarnya. Dimana salah satu adalah elemen komentar yang akan aktif pada blog versi biasa dan satunya lagi aktif pada blog tampilan seluler.
Tipe halaman berubah peran menjadi nama kelas pada tag <body>
Cara termudah untuk menambahkan kelas spesifik pada tag <body> berdasarkan tipe halaman adalah dengan mencantumkan nilai atribut kelas berupa data:blog.pageType seperti ini:
<body expr:class='data:blog.pageType'>
Dengan cara di atas, maka blog Anda akan memiliki kelas spesifik pada tag <body> yang nilainya akan menyesuaikan diri berdasarkan tipe halaman yang sedang diakses.
Kemungkinan akan muncul lima macam nama kelas yaitu:
index
item
archive
static_page
error_page
Jika Anda ingin menambahkan lebih dari satu kelas, Anda bisa memisahkannya menggunakan simbol + dan beberapa " Misalnya:
Kode di atas nantinya akan menghasilkan markup HTML seperti ini:
<body class='loading tipe_halaman'>
Lalu Bagaimana dengan Halaman Muka, Halaman Label dan Pencarian?
Untuk menambahkan kelas spesifik berdasarkan kondisi-kondisi halaman yang tidak termasuk di dalam data:blog.pageType, caranya menjadi sedikit rumit. Kita harus menambahkan sesuatu berupa elemen divisi tepat setelah tag <body>, kemudian kita tambahkan kelas-kelas tertentu berdasarkan kondisional halaman yang nantinya akan kita terapkan satu per satu. Tag yang kita pakai harus diubah menjadi karakter entitas HTML agar bisa lolos dari editor HTML Blogger:
Ya, mungkin Anda ingin membuat warna latar artikel yang berbeda-beda berdasarkan tipe halaman. Saat Anda berhasil menerapkan ini, maka Anda bisa menuliskan kode CSS pada selektor yang diawali oleh nama kelas tersebut untuk membatasi penerapan deklarasi:
.post { background-color:white; /* default */ }
.home-page .post { background-color:red; /* warna latar artikel saat sedang berada di halaman muka */ }
.item-page .post { background-color:orange; /* warna latar artikel saat sedang berada di halaman item */ }
.static-page .post { background-color:green; /* warna latar artikel saat sedang berada di halaman muka */ }
.archive-page .post { background-color:gold; /* warna latar artikel saat sedang berada di halaman arsip */ }
.error-page .post { background-color:blue; /* warna latar artikel saat sedang berada di halaman error */ }
.label-page .post { background-color:violet; /* warna latar artikel saat sedang berada di halaman label */ }
.search-page .post { background-color:brown; /* warna latar artikel saat sedang berada di halaman hasil pencarian */ }
Saya baru menyadari ternyata tag kondisional halaman label dan halaman pencarian bisa ditemukan melalui logika script Widget Manager yang terdapat di atas </body>. Untuk itu Saya bisa menyimpulkan hasilnya seperti ini:
Tag Kondisional Halaman Label Tertentu
<b:if cond='data:blog.searchLabel == "Liburan"'> Saya akan tampil di halaman label `Liburan` </b:if>
Dulu Saya pernah menuliskan potongan kode untuk menandai menu berdasarkan URL pada address bar dengan JQuery atau JavaScript di sini, kali ini Saya akan menggunakan tag kodisional untuk menandai menu berdasarkan persamaan URL halaman atau katakan saja pada halaman yang sedang aktif. Dengan begitu, saat Anda sedang berada pada halaman Tentang, maka menu navigasi Tentang akan berubah warna sesuai dengan pengaturan tampilan menu aktif yang Anda buat. Sebagai contoh.
Anggaplah Anda sudah memiliki menu navigasi di dalam template dengan kerangka seperti ini:
Setelah itu temukan kode </head> dan tambahkan kode-kode CSS yang berisi semua ID menu di atas. Isi selektor-selektor tersebut dengan deklarasi yang sama. Sebagai contoh, di sini Saya menuliskan warna latar hijau dan warna teks putih untuk menu yang sedang aktif:
<style type='text/css'> #home a {background-color:#0A7936;color:white;} #about a {background-color:#0A7936;color:white;} #archive a {background-color:#0A7936;color:white;} #contact a {background-color:#0A7936;color:white;} </style>
Letakkan kode di atas tepat di atas tag </head>
Mengatur Warna Menu dengan Tag Kondisional
Pada intinya kita hanya akan memecah semua selektor di atas menjadi kode CSS tunggal yang akan tampil hanya jika halaman yang sedang aktif merupakan halaman yang memiliki URL sama dengan URL pada menu. Jadi kita bisa menggunakan tag kodisional halaman khusus untuk kasus ini:
Pisahkan semua selektor item menu di atas menjadi seperti ini:
<style type='text/css'> <b:if cond='data:blog.url == "URL HALAMAN"'> #home a {background-color:#0A7936;color:white;} </b:if> <b:if cond='data:blog.url == "URL HALAMAN"'> #about a {background-color:#0A7936;color:white;} </b:if> <b:if cond='data:blog.url == "URL HALAMAN"'> #archive a {background-color:#0A7936;color:white;} </b:if> <b:if cond='data:blog.url == "URL HALAMAN"'> #contact a {background-color:#0A7936;color:white;} </b:if> </style>
Ganti kode URL HALAMAN dengan URL halaman pada menu yang terkait dengan ID menu dalam selektor CSS. Dalam contoh menu yang Saya ilustrasikan di atas, seharusnya kodenya akan menjadi seperti ini:
<style type='text/css'> <b:if cond='data:blog.url == data:blog.homepageUrl'> #home a {background-color:#0A7936;color:white;} </b:if> <b:if cond='data:blog.url == "http://test.blogspot.com/p/about.html"'> #about a {background-color:#0A7936;color:white;} </b:if> <b:if cond='data:blog.url == "http://test.blogspot.com/p/archive.html"'> #archive a {background-color:#0A7936;color:white;} </b:if> <b:if cond='data:blog.url == "http://test.blogspot.com/p/contact.html"'> #contact a {background-color:#0A7936;color:white;} </b:if> </style>
Catatan:data:blog.homepageUrl setara dengan "http://test.blogspot.com/" menurut sampel alamat blog di atas, dan juga setara dengan window.location.hostname dalam JavaScript.
Klik Simpan Template.
Alternatif Lain
Tanpa Tag Kondisional
Kita bisa membuat manipulasi ini tanpa tag kondisional, diantaranya adalah dengan cara menerapkan manipulasi JavaScript atau JQuery (baca di sini) yang lebih praktis. Tapi metode ini memiliki satu kekurangan yaitu efek tidak akan bekerja jika JavaScript dimatikan. Atau kita juga bisa menggunakan metode yang jauh lebih sederhana lagi, yaitu dengan cara menyisipkan kode CSS secara langsung ke dalam posting, sama seperti saat kita membuat posting Blogazine.
Hal yang paling penting dalam pembuatan manipulasi efek aktif pada menu sebenarnya hanya ada pada modifikasi ID atau kelas item menu agar mereka menjadi lebih spesifik/berbeda satu sama lain.
Dengan Widget Daftar Halaman (Page List)
Blogger memiliki widget bernama Daftar Laman. Dulu sebenarnya widget tersebut digunakan untuk menampilkan semua daftar tautan khusus untuk halaman statis, tapi saat ini widget tersebut sudah berkembang dan bisa ditambahi dengan tautan-tautan non-halaman statis. Dalam widget tersebut sudah terdapat peraturan kondisi tersendiri yaitu <b:if cond='data:link.isCurrentPage'> yang memiliki kemampuan untuk menambahkan kelas atau keadaan yang berbeda pada item menu jika halaman yang sedang aktif adalah halaman yang memiliki URL sama dengan URL pada menu tersebut:
Untuk menerapkan efek aktif pada menu, cukup gunakan CSS ini:
/* Versi daftar menu */ .PageList li.selected a { background-color:#0A7936; color:white; }
/* Versi selectbox */ .PageList option[selected] { font-weight:bold; }
Kekurangan manipulasi tampilan menu aktif pada widget Daftar Laman adalah kita tidak memiliki kemampuan untuk menambahkan sub-sub menu baru sebagai anak menu utama.
Dalam tag kondisional blogspot kita tahu bahwa kondisi dinyatakan dengan <b:if>. Tapi biasanya kita juga akan menemui <b:else/>. Apa itu? Mereka berdua pada dasarnya masih memiliki tugas yang sama yaitu untuk menciptakan kondisi seperti halnya peraturan if dalam JavaScript. Jika kondisi terpenuhi, lakukan A. Jika tidak, lakukan B. Berikut ini adalah salah satu contoh peraturan if pada JavaScript dengan perintah: Jika A, tulskan A!
if(A) { document.write('A'); }
Dalam tag kondisional blogspot, kita bisa menuliskannya seperti ini:
<b:if cond='A'> A </b:if>
<b:else/>
<b:else/> digunakan untuk menyatakan perintah cadangan jika tugas yang diberikan tidak terpenuhi. Sama seperti halnya else dalam JavaScript: Jika A, tuliskan A. Jika bukan A, tuliskan B!
Dalam tag kondisional blogspot, kita bisa menuliskannya seperti ini:
<b:if cond='A'> A <b:else/> B </b:if>
Satu contoh nyata ada dalam beberapa penerapan tag kondisional halaman. Katakanlah, saat kita sedang berada pada halaman item, kita ingin menampilkan posting. Sedangkan saat kita sedang tidak berada pada halaman item, kita ingin menampilkan sidebar. Pada umumnya, kita akan menuliskan kondisinya seperti ini:
Sebuah impian mungkin, bagi kalian untuk memiliki halaman muka blog tersendiri yang terbebas dari daftar posting yang telah diterbitkan. Dulu Saya juga begitu, sampai Saya mempelajari tag kondisionalBlogger lebih jauh. Kali ini Saya akan membagikannya kepada kalian tentang bagaimana cara menghilangkan semua posting dan menambahkan pesan selamat datang di halaman muka. Yang kita butuhkan pada dasarnya hanya satu jenis tag kondisional, yaitu tag kondisional halaman muka seperti ini:
Seperti yang kalian lihat bahwa apa yang kalian lakukan sebenarnya hanyalah menggandakan elemen <b:section> dimana salah satu hanya akan tampil di halaman muka, sedangkan satunya lagi hanya akan tampil selain di halaman muka.
Klik Simpan Template. Sekarang masuklah ke halaman Tata Letak. Jika berhasil, seharusnya widget posting akan menghilang, digantikan oleh sebuah navigasi untuk menambahkan widget baru seperti ini:
Widget posting akan menghilang, dan sebuah elemen untuk menambahkan widget baru akan tampil seperti halnya pada sidebar blog.
Dari elemen itu Anda bisa menambahkan widget yang hanya akan ditampilkan pada halaman muka. Widget bisa berupa apa saja. Misalnya seperti teks ucapan selamat datang seperti gambar di atas, widget daftar isi, slideshow otomatis, atau yang lainnya.
Catatan: Menerapkan manipulasi ini akan membuat fitur pratinjau pada editor posting tidak berfungsi. Sebenarnya bukannya tidak berfungsi, hanya saja saat Anda mengeklik tombol Pratinjau, yang akan Anda lihat selalu berupa widget yang Anda tambahkan, sedangkan posting yang seharusnya ingin Anda lihat tidak akan tampil.
