Blogger ialah layanan blog gratis yang menunjukkan keleluasaan bagi user untuk mengedit tampilan dan fungsi blognya. Secara mendasar, Blogger berplatform HTML/XML dengan didukung pengaturan tampilan CSS dan fungsi-fungsi javascript. Kita mengenal adanya fitur edit template HTML Blogger dimana kita dapat dengan bebas melaksanakan modifikasi, desain ulang, hack, penambahan fitur dari pihak ketiga (third party) berupa widget, dan lain-lain.
Note: Fitur edit HTML Blogger diakses melalui dashboard > design/rancangan > edit HTML.
Beberapa kasus saya temui dari pengunjung dan beberapa sahabat blogger (khususnya newbie) yang mengeluh alasannya ialah gagal memasukkan hack/script tambahan, tidak menemukan aba-aba tertentu menyerupai yang ada di tutorial, bahkan ada pula yang templatenya "kacau" alasannya ialah salah mengedit template HTMLnya.
Tips ini saya buat untuk memberi masukan dan wangsit dalam melaksanakan editing Template HTML supaya akhirnya sesuai dengan yang diinginkan. Semoga bermanfaat.
1. Memahami elemen dasar dari template blogger/blogspot sangat penting, pada dasarnya ada 5 elemen penting pada template Blogger yang hampir sama dengan elemen dasar web HTML pada umumnya:
a. HTML/XML tag, yang membuktikan bab dari keseluruhan halaman, diawali dengan <html> dan diakhiri dengan </html>. Khusus untuk tag-tag XML, untuk template Blogger dan HTML editor setelah tahun 2007, selalu diakhiri dengan /, contoh: <data:post.body/>.
b. Head tag, merupakan bab dari keseluruhan head halaman, di dalamnya dimasukkan aturan-aturan yang mengatur banyak hal, termasuk tampilan (CSS), diawali dengan <head> dan diakhiri dengan </head>.
c. Body tag, merupakan isi dari halaman web/blog, di dalamnya terdapat konten/isi inti halaman, termasuk pula widget-widget yang menjadi bab dari isi halaman, diawali dengan <body> dan diakhiri dengan </body>.
d. CSS, elemen pengatur tampilan halaman, baik dari segi warna, font, posisi, lebar luas, dan masih banyak lagi. Letaknya diantara <b:skin><![CDATA[ dan ]]></b:skin> dan berada pada bab head. Pada beberapa kasus aba-aba CSS juga dimasukkan sempurna di atas </head> sebagai aturan tambahan.
e. Javascript, merupakan elemen yang sesungguhnya mengandung software (web widget) yang berisi perintah-perintah tertentu. Biasanya digunakan untuk memasukkan elemen pelengkap menyerupai popular post, auto readmore, dan sebagainya. Ada dua jenis javascript yang dapat digunakan: internal, yang diupload dan di-host eksklusif di Blogger, dan eksternal, yang diupload dan dihosting di server lain. Letaknya relatif, tergantung jenisnya. Untuk yang berjenis widget biasanya ada di dalam body.
2. Biasakan back up template terlebih dahulu sebelum editing, klik "Backup Full Template" di atas kotak "Edit HTML". Jika ada kesalahan dan anda tidak tahu script mana yang harus dibenahi, anda dapat dengan mudah mengupload file back-up template dan mengembalikan menyerupai semula.
3. Perhatikan benar-benar tutorial yang dibaca, jangan hingga ada yang terlewatkan. Sebagai contoh, kalau harus mencentang/klik "expand widget templates", maka pastikan sudah melakukannya. Fungsi dari perintah tersebut ialah untuk membuka bagian-bagian body yang mengandung widget. Jika tidak dicentang, bagian-bagian tersebut akan "disembunyikan" oleh Blogger alasannya ialah memang ditujukan untuk keamanan.
4. Ketika meng-copy script dari halaman tutorial yang anda baca, pastikan semua bab script sudah tercopy atau jangan ada bab selain dari script yang ikut ter-copy.
5. Jika harus mengubah isi script/kode, misalnya mengganti url blog/feed, value, dan lain-lain, salin/paste terlebih dahulu kode/script tersebut ke editor semacam notepad, wordpad, word. Setelah melaksanakan pengubahan script dan memastikan semuanya beres, gres masukkan script tersebut ke template HTML.
6. Agar lebih mudah dan cepat mencari aba-aba tertentu menyerupai yang diminta di dalam tutorial, gunakan fitur pencarian browser, tekan Ctrl + F, setelah kotak pencarian muncul masukkan aba-aba yang ingin dicari dan tekan next (enter).
7. Perhatikan benar-benar istilah di bawah/setelah serta di atas/sebelum, itu berarti letakkan aba-aba benar-benar setelah atau sebelum aba-aba yang dicari. Kode-kode dibaca oleh browser dari kiri ke kanan sebagai urutan. Atas bawah hanya digunakan untuk memberi kenyamanan dalam mengurutkan. Bagi browser, ia tetap dibaca dari kiri ke kanan. Contoh:
<b:include data='top' name='status-message'/><data:adStart/>
Kita lihat di situ ada 2 tag bersisian, kalau harus memasukkan tag/kode gres <b:include data='posts' name='breadcrumb'/> di bawah/setelah <b:include data='top' name='status-message'/>, itu berarti anda harus meletakkan benar-benar setelahnya, sehingga <data:adStart/> harus digeser posisinya, atau kode/tag gres disisipkan di antara keduanya, jadinya:
<b:include data='top' name='status-message'/>
<b:include data='posts' name='breadcrumb'/><data:adStart/>
atau,<b:include data='top' name='status-message'/><b:include data='posts' name='breadcrumb'/><data:adStart/>
8. Jika memang masih belum yakin dan terbiasa, buatlah blog gres yang fungsinya untuk eksperimen dan uji coba script (trial and error). Anda mampu dengan bebas melaksanakan uji coba tanpa ada ketakutan template blog anda rusak atau pembaca kabur. Agar akhirnya akurat, gunakan jenis template yang sama menyerupai blog anda. Saya memiliki 3 blog untuk eksperimen dan mencoba script gres sehingga mampu dengan bebas melaksanakan apapun tanpa rasa khawatir.
9. Khusus untuk hack/script tertentu di mana tampilannya mampu eksklusif dilihat di homepage/beranda (misalnya: memasang readmore atau background), setelah memasukkan script dan selesai meng-edit, jangan eksklusif di-save dulu. Gunakan/klik fitur preview/pratinjau untuk melihat hasilnya. Jika sudah beres dan sesuai yang diinginkan, gres lah di-save.
10. Pada beberapa template, ada yang bab tertentunya di apit oleh tag paragraf: <p> dan </p>, sehingga saat bab tertentu tersebut dicari, seolah tidak ketemu. Jika template anda berjenis menyerupai ini, jangan mengalah terlebih dahulu.
Contoh:
Contoh:
Ketika harus mencari <data:post.body/>, dan tidak ketemu, maka ada kemungkinan tag paragraf mengapitnya (<p><data:post.body/></p>), atau ada beberapa kondisi lain (misalnya, anda lupa mencentang "expand widget templates"). Agar lebih mudah lagi, jangan sertakan < dan /> saat mencari (Ctrl + F), cukup gunakan data:post.body saja.
Masih ada beberapa lagi yang hendak saya sampaikan, namun sekiranya 10 poin di atas cukup lengkap untuk menjadi tips dan petunjuk supaya lancar dan aman dalam mengedit Template HTML Blogger/Blogspot. Selanjutnya, sobat Blogger dapat menyebarkan dan membiasakan diri dengan template dan template editor Blogger serta melaksanakan editing secara berdikari (Do It Yourself [DIY]). Keep on learning and learning.