Elemen input bertipe file sebenarnya tidak jauh berbeda dengan elemen radio atau checkbox. Mereka sangat sulit untuk dimodifikasi tampilannya. Selain itu, elemen <input type="file"> juga memiliki tampilan default yang berbeda-beda pada setiap peramban:
Tampilan elemen input file yang berbeda-beda, tergantung jenis peramban.
Namun, dengan sedikit elemen tambahan, kita bisa membuat elemen ini tampak sama pada semua peramban. Pada intinya kita hanya akan mengubah tampilan input tersebut menjadi transparan, kemudian kita letakkan sesuatu di bawahnya sebagai elemen input palsu, sehingga saat elemen palsu tersebut diklik, yang terjadi sebenarnya adalah kita memicu elemen input yang menutupi di atasnya yang tidak tampak karena transparan:
JavaScript ini sebenarnya tidak terlibat secara langsung pada kerja <input type="file">, dan hanya digunakan sebagai pelengkap. Fungsinya untuk mengambil nilai elemen input tersebut, kemudian meletakkannya ke dalam elemen <span> yang berperan sebagai pengganti kontainer teks (penampil path menuju file):
(function() { var input = document.getElementsByClassName('custom-file-input'); for (var i = 0, len = input.length; i < len; ++i) { var theInput = input[i].getElementsByTagName('input')[0]; theInput.onchange = function() { this.parentNode.parentNode.children[0].innerHTML = this.value; this.title = this.value; }; } })();
Mengaktifkan fitur threaded commenting non-standar pada Blogger.
Setelah berhasil menemukan beberapa metode untuk menciptakan komentar bersarang (atau berbalas??) pada Blogger, Saya rasa metode dari bX-NicoNico adalah yang paling bagus. Mengapa?
Dia tidak menggunakan elemen <data:post.commentJso/> sebagai salah satu elemen yang dibutuhkan untuk sistem ini, sehingga markup HTML akan menjadi lebih pendek dari markup HTML pada template dengan fitur komentar bersarang yang masih standar. (Fitur komentar bersarang yang masih standar akan menampilkan JSON komentar sebelum daftar komentar, sehingga jumlah karakter markup HTML pada fitur komentar bersarang yang masih standar akan menjadi dua kali lipat lebih panjang dibandingkan markup komentar biasa.
Layout komentar tertata secara otomatis. JavaScript hanya digunakan untuk mengubah URL pada iframe formulir komentar dan juga untuk memindahkan posisinya sesuai dengan ID komentar induk masing-masing.
Karena layout komentar ditata secara otomatis oleh Blogger, maka saat JavaScript dimatikan, tata letak komentar balasan akan tetap berada pada posisi yang benar. Ini berbeda dengan beberapa hack komentar bersarang Blogger yang hanya menggunakan JavaScript (yang juga telah Saya pakai sampai sekarang) untuk memposisikan komentar-komentar balasan, sehingga saat JavaScript dimatikan, layout komentar akan berantakan.
Berikut ini adalah fitur komentar versi Saya yang lebih pendek dan lebih mudah dalam hal instalasi yang Saya buat berdasarkan konsep dari Felipe, yaitu dengan cara menggunakan elemen data baru bernama <data:comment.inReplyTo/> untuk menyaring anak-anak komentar yang tampil. Elemen ini berfungsi untuk menampilkan ID komentar induk pada masing-masing komentar balasan. Saya bisa mengatakan bahwa metode ini adalah metode yang paling tepat dan bukan merupakan “hack”, karena kita menerapkan elemen yang ada dari Blogger untuk dimanfaatkan sesuai dengan tugasnya:
<script> //<![CDATA[ var originalSource = document.getElementById('comment-editor').src.split('#'); function replyTo(id) { var frame = document.getElementById('comment-editor'), form = document.getElementById('custom-comment-form'), container = (id != "cancel") ? document.getElementById('form-container-' + id) : document.getElementById('custom-comments'), part = originalSource; frame.style.height = "50px"; frame.style.visibility = "hidden"; frame.src = (id != "cancel") ? part[0] + '&parentID=' + id + '#' + part[1] : part[0] + '#' + part[1]; container.insertBefore(form, null); frame.onload = function() { this.style.height = "250px"; this.style.visibility = "visible"; }; } //]]> </script>
</b:if> </section> </b:includable>
Terakhir tinggal mengaktifkan fitur komentar kita. Cari semua kode yang tampak seperti ini:
<b:include data='post' name='threaded_comments'/>
atau seperti ini:
<b:include data='post' name='comments'/>
Di manapun Anda menemukan kode itu, segera ganti dengan kode ini:
<b:include data='post' name='custom-comments'/>
Klik Simpan Template.
Konfigurasi
Kode-kode yang Saya beri tanda adalah label-label tombol dan bisa Anda ganti teksnya sesuka hati sesuai dengan bahasa pada negara dimana Anda tinggal (beberapa teksnya ada yang terletak jauh di sebelah kanan, mohon gulung kontainer kodenya ke kanan sekali-kali).
Fitur penanda komentar administrator juga ada. Untuk mengaktifkannya, Anda bisa menggunakan selektor-selektor CSS yang tercantum di atas, kemudian awali dengan kelas .author-comment untuk menandai komentar penulis. Sebagai contoh, Saya akan memberikan border warna merah dan latar warna kuning pada komentar administrator, maka yang harus Anda lakukan adalah seperti ini:
Catatan: Bagi Anda yang selama ini telah lama menggunakan fitur komentar bersarang lebih dari dua level (seperti blog Saya), sangat disarankan untuk tidak menerapkan modifikasi di atas, karena Saya hanya menggunakan loop komentar balasan sebanyak satu kali:
<b:loop values='data:post.comments' var='replies'> <b:if cond='data:replies.inReplyTo == data:comment.id'> Komentar balasan muncul di sini... </b:if> </b:loop>
Seperti yang Anda lihat bahwa Saya hanya membandingkan nilai data:var.inReplyTo pada komentar balasan dengan ID komentar induk sekali saja (satu kali loop), sehingga jika komentar balasan lama Anda berada di level ke tiga dan seterusnya, komentar-komentar tersebut tidak akan tampil dalam posting Anda dikarenakan ID komentar induknya tidak sempat lolos penyaringan terhadap data:var.inReplyTo pada anak komentar di level tersebut.
Blog yang masih baru atau blog lama dengan sedikit komentar dan blog dengan fitur komentar yang masih lama bisa melakukan modifikasi ini dengan aman.
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:
Mencoba memanfaatkan <textarea> untuk mencegah peramban memparse kode HTML di dalam posting.
Selama ini kita telah mengenal kode JavaScript pembuat ringkasan posting otomatis yang hanya bekerja dengan cara mengambil HTML di dalam posting, kemudian mengurangi jumlahnya untuk menciptakan ringkasan dan menampilkannya lagi dengan cara mengganti konten posting awal dengan ringkasan teks baru yang sudah dikurangi. Namun terkadang cara ini tidak efektif, karena biasanya peramban masih tetap bisa mengakses dan memparse semua kode HTML di dalam posting. Karakter posting memang terpotong, tapi beban muat tidak berubah.
Saat ini tidak ada cara yang bisa dibilang paling tepat untuk mengatasi masalah ini, dan satu-satunya cara yang paling sesuai dengan prosedur adalah dengan memanfaatkan elemen <data:post.snippet/> yang sebenarnya merupakan elemen untuk blog tampilan seluler (baca di sini).
Tapi, sebenarnya masih ada cara yang sederhana untuk mencegah peramban mengakses semua kode HTML posting saat kita belum memasuki halaman tunggal posting tersebut, yaitu dengan cara mengubah data yang dipanggil (dalam hal ini adalah konten posting) menjadi sesuatu yang bukan kode HTML, sesuatu yang lebih ringan dan tidak memicu peramban untuk mengerjakan apapun kecuali mengunduh teks yang ada. Yaitu dengan cara memanfaatkan <textarea>
Bungkus semua konten posting yang ada dengan elemen <textarea> sehingga kode HTML apapun yang ada di dalamnya tidak akan pernah diparse oleh peramban karena peramban hanya akan menganggapnya sebagai teks biasa yang ringan dan tidak memberikan beban permintaan HTTP tambahan (misalnya dari gambar atau video yang ada di dalam posting):
Konsepnya hanya seperti itu. Dan sisanya, kita bisa menggunakan JavaScript untuk menampilkan sebagian konten dari area teks tersebut, kemudian kita masukkan hasilnya ke dalam kontainer lain sebagai HTML:
// Ambil teks dari `<textarea>`, kemudian kurangi jumlah karakternya (menjadi 200 karakter) var summary = document.getElementById('text-1234').value.substring(0, 200);
// Sisipkan karakter yang telah dikurangi tersebut ke dalam kontainer di bawahnya document.getElementById('container-1234').innerHTML = summary + '…';
</script>
Thumbnail posting bisa kita dapatkan melalui elemen <data:post.thumbnailUrl/> dengan resolusi yang sudah diubah, sedangkan elemen <textarea> bisa kita sembunyikan dengan CSS. Proses penerapan selengkapnya bisa Anda baca mulai dari sini.
Membuat Posting Auto Read-More Blogspot Versi Manipulasi Textarea
Sebelum melakukan modifikasi, terlebih dahulu backup kode template Anda untuk berjaga-jaga jika terjadi kesalahan.
Pertama-tama, masuklah ke editor HTML template Anda kemudian cek Expand Template Widget. Temukan kode ini:
</head>
Salin kode ini kemudian letakkan di atasnya:
<script type='text/javascript'> // Lightweight `auto read-more` hack for Blogger using `Textarea` by Taufik Nurrohman // URL: https://plus.google.com/108949996304093815163/about //<![CDATA[ var configSummary = { thumbnailSize: 100, // Define the post thumbnail size summaryLength: 300, // Define the summary length noThumbUrl: "http://3.bp.blogspot.com/-vpCFysMEZys/UOEhSGjkfnI/AAAAAAAAFwY/h1wuA5kfEhg/s72-c/grey.png" // `no image` URL }; function createPostSummary(a, b, c) { var text, doc = document, d = configSummary, copyFrom = doc.getElementById(a).value, pasteTo = doc.getElementById(b), postThumbnail = (c === "") ? d.noThumbUrl : c; text = copyFrom.replace(/<.*?>/g, "").replace(/\s+/g," "); pasteTo.innerHTML = '<img class="post-thumbnail" src="' + postThumbnail.replace(/\/s\d+(\-c)?\//, '/s' + d.thumbnailSize + '-c/') + '" alt="thumbnail" style="width:' + d.thumbnailSize + 'px;height:' + d.thumbnailSize + 'px;">' + text.substring(0, d.summaryLength) + '…'; } //]]> </script>
Setelah itu cari baris kode yang tampak kurang lebih seperti ini:
Sisanya tinggal menambahkan kode CSS ini yang berfungsi untuk menggeser thumbnail gambar ke samping kiri ringkasan artikel. Letakkan kode ini di atas ]]></b:skin> atau </style>:
Untuk template versi standar yang sekarang mungkin kodenya menjadi sedikit lebih rumit karena ada beberapa microdata yang disusun secara otomatis oleh Blogger. Mungkin suatu saat yang Anda temukan adalah baris kode seperti ini:
<b:if cond='data:blog.metaDescription == ""'> <!-- Then use the post body as the schema.org description, for good G+/FB snippeting. --> <div class='post-body entry-content' expr:id='"post-body-" + data:post.id' itemprop='description articleBody'> <data:post.body/> <div style='clear:both;'/> <!-- clear for photos floats --> </div> <b:else/> <div class='post-body entry-content' expr:id='"post-body-" + data:post.id' itemprop='articleBody'> <data:post.body/> <div style='clear:both;'/> <!-- clear for photos floats --> </div> </b:if>
Tidak masalah. Ganti semua kode di atas dengan kode ini:
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:
Indikator untuk menyatakan bahwa terdapat posting yang lebih baru sebelum posting/daftar posting yang sedang aktif/terlihat di halaman. Pada intinya, kondisi ini digunakan untuk memunculkan navigasi Posting Lebih Baru saat diperlukan dan akan menyembunyikannya saat tidak diperlukan —misalnya, saat kita sedang berada di halaman muka, kita tidak akan melihat navigasi Posting Lebih Baru. Elemen/data ini juga berfungsi untuk menampilkan URL halaman (saat sedang berada di halaman indeks) atau URL posting (saat sedang berada di halaman item) yang lebih baru dari halaman yang sedang aktif.
Indikator untuk menyatakan bahwa terdapat posting yang lebih lama setelah posting/daftar posting yang sedang aktif/terlihat di halaman. Kondisi ini digunakan untuk memunculkan navigasi Posting Lama saat diperlukan dan akan menyembunyikannya saat tidak diperlukan —saat kita sedang berada di halaman terakhir, maka kita tidak akan melihat navigasi Posting Lama). Elemen/data ini juga berfungsi untuk menampilkan URL halaman (saat sedang berada di halaman indeks) atau URL posting (saat sedang berada di halaman item) yang lebih lama dari halaman yang sedang aktif.
Elemen ini akan menampilkan teks navigasi ke halaman awal.
Beranda
data:mobileLinkUrl
Kode ini akan menggenerasikan URL blog versi seluler berdasarkan URL yang sedang aktif (lebih tepatnya, kode ini akan menghasilkan nilai yang sama dengan data:blog.url dengan akhiran berupa ?m=1).
http://nama_blog.blogspot.com/?m=1
data:desktopLinkUrl
Kode ini akan menggenerasikan URL blog versi desktop berdasarkan URL yang sedang aktif (lebih tepatnya, kode ini akan menghasilkan nilai yang sama dengan data:blog.url dengan akhiran berupa ?m=0).
http://nama_blog.blogspot.com/?m=0
data:mobileLinkMsg
Elemen ini akan menampilkan teks navigasi menuju blog tampilan seluler.
Lihat versi seluler
data:desktopLinkMsg
Elemen ini akan menampilkan teks navigasi menuju blog tampilan web/desktop.
