Blogger yakni 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 sebab gagal memasukkan hack/script tambahan, tidak menemukan instruksi tertentu ibarat yang ada di tutorial, bahkan ada pula yang templatenya "kacau" sebab salah mengedit template HTMLnya.
Tips ini saya buat untuk memberi masukan dan wangsit dalam melaksanakan editing Template HTML supaya balasannya 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 adegan 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 adegan 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 adegan 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 adegan head. Pada beberapa kasus instruksi CSS juga dimasukkan sempurna di atas </head> sebagai aturan tambahan.
e. Javascript, merupakan elemen yang tolong-menolong mengandung software (web widget) yang berisi perintah-perintah tertentu. Biasanya digunakan untuk memasukkan elemen suplemen ibarat popular post, auto readmore, dan sebagainya. Ada dua jenis javascript yang dapat digunakan: internal, yang diupload dan di-host pribadi 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 ibarat semula.
3. Perhatikan benar-benar tutorial yang dibaca, jangan hingga ada yang terlewatkan. Sebagai contoh, jikalau harus mencentang/klik "expand widget templates", maka pastikan sudah melakukannya. Fungsi dari perintah tersebut yakni untuk membuka bagian-bagian body yang mengandung widget. Jika tidak dicentang, bagian-bagian tersebut akan "disembunyikan" oleh Blogger sebab memang ditujukan untuk keamanan.
4. Ketika meng-copy script dari halaman tutorial yang anda baca, pastikan semua adegan script sudah tercopy atau jangan ada adegan 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 instruksi tertentu ibarat yang diminta di dalam tutorial, gunakan fitur pencarian browser, tekan Ctrl + F, setelah kotak pencarian muncul masukkan instruksi yang ingin dicari dan tekan next (enter).
7. Perhatikan benar-benar istilah di bawah/setelah serta di atas/sebelum, itu berarti letakkan instruksi benar-benar setelah atau sebelum instruksi yang dicari. Kode-kode dibaca oleh browser dari kiri ke kanan sebagai urutan. Atas bawah hanya digunakan untuk memberi kenyamanan dalam mengurutkan. Bagi browser, beliau tetap dibaca dari kiri ke kanan. Contoh:
<b:include data='top' name='status-message'/><data:adStart/>
Kita lihat di situ ada 2 tag bersisian, jikalau 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 balasannya akurat, gunakan jenis template yang sama ibarat 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 pribadi dilihat di homepage/beranda (misalnya: memasang readmore atau background), setelah memasukkan script dan selesai meng-edit, jangan pribadi 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 adegan tertentunya di apit oleh tag paragraf: <p> dan </p>, sehingga dikala adegan tertentu tersebut dicari, seolah tidak ketemu. Jika template anda berjenis ibarat 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 /> dikala 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.
Komentar
Posting Komentar