Tidak menyerupai WordPress dengan plugin Art Direction-nya, blogspot tidak mempunyai kemampuan untuk menyisipkan sesuatu menyerupai isyarat CSS atau JavaScript ke dalam area <head> melalui editor posting alasannya blogspot tidak dilengkapi dengan fitur khusus untuk menyisipkan isyarat modifikasi secara sepihak pada posting tunggal.
Saya berbicara mengenai Blogazine, sebuah konsep blog dimana setiap posting mempunyai keunikan tampilan sendiri-sendiri. Selama ini para Blogazinist blogspot memakai cara yang sederhana untuk membuat posting-posting unik, namun cara ini tidak sesuai dengan mekanisme dokumen HTML:
Bukan duduk masalah jikalau kita meletakkan JavaScript di dalam area <body>, tapi meletakkan CSS di dalam <body> akan menjadikan resiko ketidakstabilan tampilan pada ketika awal halaman termuat. Dan mereka juga tidak valid!
Line 294, Column 23: Element style not allowed as child of element div in this context. (Suppressing further errors from this subtree.) - W3C Markup Validation Service
Baiklah, validasi memang tidak penting. Tapi jikalau kita masih bisa menghilangkan kesalahan tersebut, kenapa tidak?
Tag Meta Deskripsi
Belum usang ini Blogger memperkenalkan fitur barunya yaitu preferensi penelusuran. Salah satu fitur yang paling menarik berdasarkan Saya yaitu formulir meta deskripsi yang memungkinkan kita untuk menambahkan deskripsi penelusuran yang berbeda-beda pada setiap posting – pelajari di sini:
<b:if cond='data:blog.metaDescription'> <meta expr:content='data:blog.metaDescription' name='description'/> </b:if>Pada intinya, deskripsi yang kita tuliskan di dalam formulir akan ditampilkan pada bab data:blog.metaDescription yang nantinya akan menjadi deskripsi penelusuran yang Saya maksudkan ketika posting sudah diterbitkan. Seperti ini:
<meta content='Deskripsi penelusuran yang Anda tuliskan di dalam formulir…' name='description'/>Anda bisa menemukan dan mengenali kode-kode XML Blogger menyerupai yang Saya tuliskan di atas jikalau Anda sudah mengaktifkan fitur preferensi penelusuran pada bab Tag Meta dan memodifikasi template yang Anda pakai untuk meningkatkan secara optimal mesin penelusuran. Jika Anda tidak menemukannya, Anda harus mulai mempelajari perihal fitur ini dari luar. Artikel ini tidak bermanfaat untuk Anda.
Formulir meta deskripsi inilah yang ingin Saya manfaatkan, alasannya ia mempunyai kemampuan untuk menyimpan data yang berbeda-beda pada setiap posting. Idenya bersama-sama sederhana, yaitu Saya akan memakai data meta deskripsi sebagai konten tag <style> secara tidak langsung:
<b:if cond='data:blog.metaDescription'> <style id='custom-post'> <data:blog.metaDescription/> </style> </b:if>Bisa Anda bayangkan bukan? Dengan cara mengubah status data deskripsi penelusuran menjadi konten dari tag <style> menyerupai di atas, maka kita bisa menyisipkan isyarat CSS di dalam formulir deskripsi penelusuran untuk ditampilkan di dalam tag <style> sebagai CSS menyerupai ini:
Dan hasilnya, isyarat CSS yang kita masukkan ke dalam formulir meta deskripsi akan tampil di dalam tag <style id='custom-post'> sebagai CSS ketika posting telah diterbitkan:
CSS Eksternal
Alternatif lain, Anda juga bisa memakai data meta deskripsi sebagai nilai atribut href pada elemen <link> untuk tipe CSS eksternal, dan Anda bisa memakai formulir deskripsi penelusuran untuk menyimpan URL file:
Selanjutnya, format isyarat template bisa Anda ubah menjadi menyerupai ini:
<b:if cond='data:blog.metaDescription'> <link expr:href='data:blog.metaDescription' media='screen' rel='stylesheet'/> </b:if>Hasil jadinya bisa Anda tebak:
Dengan cara ini maka Anda tidak perlu lagi meletakkan isyarat CSS di dalam posting dan membuat isi posting Anda menjadi berantakan. Dan proses perbaikan (maintenance) juga akan menjadi lebih mudah. Misalnya, jikalau Anda ingin menonaktifkan fitur posting unik pada blog Anda, maka Anda cukup menghapus isyarat <data:blog.metaDescription/> dari template sehingga data tidak akan terpanggil. Saya sudah beberapa kali mengetes formulir tag meta yang ada pada editor posting dan ia bisa menampung teks tanpa batas!
Pahami Resiko
Walau bagaimanapun juga, metode ini yaitu metode yang tidak standar dan tidak sesuai dengan mekanisme perkembangan Blogger, alasannya kita memakai direktori deskripsi penelusuran sebagai direktori CSS. Saya hanya sedang mencoba untuk memecahkan duduk masalah dengan apa yang ada dari Blogger ketika ini. Karena tidak ada rotan, maka Saya gunakan akar.
Ya, itu jikalau dilihat dari sisi Blogger, tapi jikalau dilihat dari sisi hasil akhir, maka metode ini bisa dijadikan sebagai jalan keluar untuk mengikuti mekanisme dokumen HTML yang benar, yaitu: “Tag <style> harus berada di dalam tag <head>!”
Saya juga tidak bisa menjamin bahwa formulir deskripsi penelusuran akan terus bisa menampung teks tanpa batas. Bukan hal yang mustahil jikalau suatu ketika Blogger tetapkan untuk membatasi jumlah teks deskripsi penelusuran. Saya sudah mencobanya hingga sejauh ini dan semuanya baik-baik saja. Selanjutnya yaitu pilihan Anda, apakah Anda mau mengambil resiko atau tidak, alasannya Anda berada dalam situasi yang penuh dengan keterbatasan.
Lupakan SEO! – Seperti perkataan para Blogazinist pada umumnya, sayangnya Anda harus sedikit mengabaikan mengenai SEO alasannya Anda telah memakai data:blog.metaDescription untuk hal lain yang sama sekali tidak berafiliasi dengan meta deskripsi.
Tapi itu juga bukan berarti bahwa Anda akan kehilangan deskripsi penelusuran Anda. Anda masih bisa memakai cara lama, yaitu menuliskan deskripsi tag meta secara manual. Hanya saja nilainya tidak bisa berubah-ubah:
<!-- Manual Meta Description --> <meta content='Deskripsi penelusuran utama Anda...' name='description'/> <!-- Hack: Art Direction Plugin for Blogger with Meta Description Data --> <b:if cond='data:blog.metaDescription'> <style id='custom-post'> <data:blog.metaDescription/> </style> </b:if>