Cara Edit HTML Template Blogger (untuk Mengubah Tampilan Blog)

Bagaimana cara melakukan Edit HTML pada template Blogger terutama untuk mengubah tampilan blog? Tentunya tidak jauh beda dengan pada umumnya, intinya mengutak-atik kode HTML template untuk memodifikasi tampilan blog.

HTML atau Hyper Text Markup Language adalah sebuah bahasa pemrograman yang digunakan untuk membangun blog atau website, HTML selalu dipasangkan dengan CSS yang berperan mengatur tampilan blog.

Dengan Edit HTML kamu bisa melakukan perombakan tampilan yang lebih drastis dan hampir nga terbatas. Misalnya apa aja?

• Bikin design atau tampilan blog jadi lebih modern
• Lebih dari sekedar ganti warna
• Memasang fitur-fitur yang lebih keren
• Menghapus fitur yang sulit dihapus
• Mengganti tampilan font dengan yang lebih sesuai seleramu

Nah, kira-kira kamu sudah paham bahasa pemrograman HTML belum nih? Kalau CSS udah paham juga? Kalau sudah bagus karena akan mempercepat proses belajarmu dalam mengubah tampilan blog, tapi kalau belum juga nga masalah yang penting harus jago nebak dan ikuti aja panduan ini, nanti kamu pasti bisa.

Template Blogger

Tadi sudah kita bahas tentang kode HTML dan CSS serta sedikit fungsinya. Supaya lebih mudah diatur dan dimodifikasi, kode-kode tersebut dikemas dan disatukan dalam sebuah file yang disebut template atau tema. Selain HTML dan CSS, dalam sebuah tema Blogger ada juga script JavaScript yang berperan mengatur interaktifitas blog.

Karena semua file yang digunakan terletak di satu tempat, maka kita tinggal mengakses file templatenya saja untuk mengatur blog secara keseluruhan, jika tidak menggunakan template maka semuanya harus diatur satu-satu dan sangat memakan waktu serta tidak praktis dan tidak efektif.

Template Blogger atau Tema Blogger itu disimpan dalam format XML, karena itu ekstensi yang digunakan adalah .xml, coba aja kamu backup tema atau template yang dipasang di blog kamu terus lihat nama filenya, ada .xml-nya pasti. Udah tahu kan cara backup template? Kalau belum nanti akan kita bahas.

Di dalam satu file XML template blogger ada ribuan kode, kalau kamu baru pertama kali mengotak-atik tema Blogger mungkin bakalan pusing mencari kode yang mau diedit.

Catatan: Karena banyaknya jumlah kode pada setiap template Blogger, beberapa kesalahan yang sering dilakukan pemula adalah bentrok antar kode yang tidak disadari, salah menempatkan kode atau tidak sengaja menghapus kode yang seharusnya tidak dihapus

Oiya, di tema Blogspot atau Blogger selain HTML, CSS dan JavaScript, ada juga Meta Tags dan script JQuery.

Mencari Kode HTML

Karena jumlah kodenya ribuan, kira-kira gimana ya cara mencari kode yang mau diedit dengan cepat? Tentu aja ada caranya sendiri.

Gunakan Ctrl + F atau F3 pada keybord, setelah kotak pencarian terbuka, tulis kode yang ingin kamu cari, lalu tekan Enter.

Kode-kode HTML berikut ini sangat penting, untuk latihan coba cari satu per satu html, head, body.

Dengan cara di atas kode yang ingin kamu edit akan ditemukan secara otomatis tanpa perlu scrolling bolak-balik.

Tentunya untuk bisa melakukan pencarian kode kamu harus sudah berada di halaman pengeditan HTML Blogger. Udah tahu kan gimana caranya, kalau belum berikut ini akan dijelaskan.

Halaman Pengeditan HTML Blogger

Untuk mengakses file HTML template, kita harus menuju ke kotak HTML Blogger. Fitur Edit HTML terletak di menu Template/Tema yang ada di dashboard Blogger.

Dari dashboard Blogger > klik menu Template atau Tema > lalu klik Edit HTML. Setelah itu halaman pengeditan HTML akan terbuka.

Saatnya mulai ngedit!

Untuk latihan ini kita akan menggunakan template default atau bawaan Blogger yaitu Sederhana atau Simple, karena template ini tergolong mudah diedit dan cocok untuk latihan pemula. Apakah bisa pakai template lain? Semua template Blogger pasti bisa diedit, cuma lebih disarankan pakai Sederhana untuk latihan pemula.

Sebelum melakukan pengeditan backup dulu templatenya! Kenapa harus backup dulu?

• Tidak perlu takut jika terjadi kesalahan
• Bisa melakukan pengeditan dengan tenang

Dari dashbord Blogger > klik menu Tema / Template > klik Backup/Pulihkan > klik Download Tema. Sekarang tema blog kamu sudah ter-backup, jika terjadi kesalan tinggal upload tema yang tadi sudah dibackup.

Catatan: Karena template Blogger jumlah kodenya sangat banyak kesalahan bisa terjadi tanpa disadari, selalu lakukan backup setiap kali mau mengedit template, meski sudah mahir sekalipun

Berikut cara edit html template blogger bagi pemula yang masih sangat awam.

1. Mengubah Tampilan Blog Jadi Lebih Profesional dengan Menghapus QuickEdit

Obeng atau tangnya Blogger disebut juga QuickEdit. Sebenarnya QuickEdit cukup membantu dalam melakukan pengeditan cepat.

Namun sanyangnya yang bisa melihat fitur QuickEdit bukan hanya pemilik blog saja tapi juga pengunjung, sehingga membuat tampilan blog jadi kurang profesional. Jadi lebih baik dihapus saja.

Untuk menghapus fitur Quickedit, silakan hapus kode <b:include name='quickedit'/>.

Ada lebih dari satu fitur QuickEdit di kebanyakan template Blogger, jangan lupa gunakan CTRL + F untuk mencarinya, kemudian hapus satu-satu sampai tidak tersisa.

2. Memodifikasi Tampilan Blog Jadi Lebih Modern dengan Menonaktifkan Navbar

Satu lagi yang membuat tampilan blog jadi kurang profesional adalah fitur Navbar, fitur Navbar ini tidak bisa dihapus, hanya bisa dinonaktifkan saja.

Untuk menonaktifkan fitur Navbar gunakan kode CSS. Pada template Blogger CSS:

Dibuka dengan kode <b:skin><![CDATA[ dan kode ]]></b:skin> sebagai penutup

Atau jika menggunakan tema Blogger custom buatan pihak ketiga, bisa juga seperti ini:

Dibuka dengan kode <style type="text/css"><!-- /*<b:skin><![CDATA[ ]]></b:skin><style type='text/css'> dan kode </style> sebagai penutup

Letakkan kode berikut dimana saja diantara kode yang disebutkan di atas.

#navbar-iframe { height:0; visibility:hidden; display:none; }

3. Membuat Tampilan Blog Jadi Lebih Clean dengan Nonaktifkan Atribusi Blogger dan Feedlinks

Banyak blogger pemula yang ingin menghapus atribusi Blogger tapi sebaiknya jangan dihapus, cukup dinonaktifkan saja.

Untuk menonaktifkan atribusi Blogger juga gunakan kode CSS seperti menonaktifkan Navbar kodenya:

#Attribution1 { height:0; visibility:hidden; display:none; }

Menonaktifkan Feedlinks juga sama seperti menonaktifkan Navbar dan Atribusi kodenya:

.feed-links { height:0; visibility:hidden; display:none; }

Sedikit tentang selector CSS dan deklarasi CSS:

• Kode sebelum curly brace pembuka disebut selector CSS sedangkan kode yang ada di dalam curly braces disebut deklarasi CSS
• Selector CSS dengan deklarasi yang sama bisa digabungkan untuk mempersingkat kode
• Selector CSS yang digabungkan dipisahkan dengan koma

Jadi karena kode-kode untuk menonaktifkan Atribusi dan Feedlinks di atas deklarasinya sama maka bisa digabungkan seperti berikut:

#Attribution1, .feed-links { height:0; visibility:hidden; display:none; }

Apakah kode deklarasi CSS untuk menonaktifkan Navbar juga sama? Jika iya, silakan berimprovisasi sendiri.

Kesimpulan

Jika dibandingkan dengan menu Customize Blogger, Edit HTML memang tergolong lebih sulit, karena itu banyak pemula yang membuat kesalahan. Tapi biarpun lebih sulit Edit HTML juga memberikan keleluasaan lebih, bukan hanya mengubah tampilan blog, tapi juga bisa digunakan untuk mengatur keSEOan blog dan sebagainya. Jadi kemampuan Edit HTML Template Blogger yang lancar wajib dimiliki seorang blogger. Terus berlatih dan berimprovisasi supaya cepat lancar dan tentunya, jangan lupa backup dulu sebelum diedit.