Edit HTML Blogger

Pada kesempatan ini kita akan mempelajari konsep dasar Edit HTML Blogger. Banyak blogger pemula yang kesulitan melakukan edit HTML, karena mungkin belum terbiasa melihat kode-kode yang jumlahnya ribuan.

Sebenarnya jika sudah terbiasa, kode-kode yang ribuan itu tidak akan terasa terlalu banyak.

Karena setiap kode memiliki kelompoknya masing-masing. Dan dalam setiap template Blogger biasanya hanya ada sekitar 5 sampai 6 kelompok kode saja.

Jika sudah terbiasa melihat kode template Blogger yang jumlahnya ribuan, maka 100 kode akan terasa seperti 10, 1000 kode akan terasa seperti 100 dan seterusnya.

Sebelum kita membahas Edit HTML lebih jauh, mudah-mudahan sobat sudah membaca postingan saya sebelumnya yang juga berkaitan dengan postingan ini. Jika belum silakan dibaca dulu, agar lebih mudah mengikuti postingan ini.

Cara Membuat Blog di Blogger Super Lengkap

Edit HTML diperlukan karena kebanyakan blogger yang menggunakan platform blogging Blogger.com merasa tidak cukup dengan pengeditan default yang disediakan Blogger.

Sehingga banyak yang mencari tips dari blog-blog tutorial untuk lebih menyesuaikan tampilan blognya.

Untuk bisa menerapkan tips dari blog tutorial dengan tepat, tentunya sobat perlu memahami konsep dasar Edit HTML.

Banyak yang langsung menerapkan begitu saja tutorial-tutorial mengedit template Blogger yang ada di luar sana, tanpa memahami konsep dasarnya dulu.

Akhirnya banyak terjadi kegagalan, karena salah meletakkan kode atau ada duplikasi kode yang tidak disadari.

Dalam tutorial Blogger yang menggunakan edit HTML biasanya ada perintah seperti ini:

Letakkan kode berikut ini di bawah kode <data:post.body/> yang ke dua.

Tapi belum tentu meletakkannya harus sama persis karena setiap template Blogger struktur kodenya berbeda.

Untuk mengetahui di mana harus melakukan penyesuaian, sobat harus paham dulu konsep dasar Edit HTML Blogger.

Perlukah Menguasai HTML dan CSS?

Tentunya tergantung kebutuhan sobat.

Jika hanya ingin sekedar bisa mengikuti tutorial mengedit template Blogger tentu tidak perlu.

Di setiap tutorial modifikasi tampilan blog juga sudah diberikan HTML dan CSS lengkapnya.

Tapi jika sobat ingin bisa mengedit sendiri maka harus menguasai HTML dan CSS juga.

Memback-up Tema Blogger

Sebelum kita mulai panduan ini, sebaiknya back-up template Blogger sobat terlebih dahulu.

Jika terjadi kesalahan tidak terduga, tinggal upload file yang tadi sudah di-backup, dan blog pun akan kembali seperti semula.

Untuk memback-up tema dari Menu Tema di dashboard Blogger, pilih Cadangkan/Pulihkan kemudian pilih Download Tema.

Jika tema sudah di-backup, sobat bisa melakukan Edit HTML dengan tenang dan diharapkan hasilnya lebih maksimal.

Belajar Edit HTML Blogger: Menjadikan Tampilan Blog Lebih Profesional

Ada cukup banyak fitur-fitur Blogger yang sebenarnya tidak diperlukan, yang terinstall otomatis pada blog yang belum diedit sama sekali.

Kita akan hapus/nonaktifkan fitur-fitur itu supaya tampilan blog jadi lebih profesional.

Edit HTML Blogger bisa diakses melalui menu Tema di dashboard Blogger. Tinggal klik Edit Template maka Editor Template Blogger akan terbuka.

1. Hapus QuickEdit

Obeng atau tangnya Blogger disebut 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. Lebih baik dihapus saja.

Ada lebih dari satu fitur QuickEdit di setiap template Blogger, supaya lebih mudah gunakan CTRL + F untuk mencarinya, kemudian hapus satu-satu sampai tidak tersisa.

Misalnya pada setiap widget yang terinstall pasti otomatis diberi fitur QuickEdit. Hapus kode <b:include name='quickedit'/>.

2. Nonaktifkan 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:

Diawali dengan kode <b:skin><![CDATA[ dan diakhiri dengan kode ]]></b:skin>

atau

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

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

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

3. Nonaktifkan Atribusi Blogger

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; }

4. Nonaktifkan Feedlinks

Menonaktifkan Feedlinks juga sama seperti menonaktifkan Navbar dan Atribusi kodenya:

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

Kode-kode yang Paling Sering Dicari

Dalam kebanyakan tutorial Blogger yang menggunakan Edit HTML ada beberapa kode yang sering sekali diperintahkan untuk dicari.

Berikut ini daftar kode-kode yang paling sering dicari:

1. <body>

Menandai awal bagian konten yang ditujukan untuk pengunjung seperti tulisan dan gambar.

2. <b:includable id='post' var='post'>

Kode untuk halaman konten seperti komentar, tulisan utama dll.

3. <data:post.body/>

Ini adalah kode untuk artikel blog. Awalnya ketika template belum diedit sama sekali kode ini hanya ada satu, tapi setelah diedit biasanya ada dua.

Kode ini diperintahkan untuk dicari pada cukup banyak tutorial Blogger seperti membuat read more otomatis, menambahkan share buttons dll.

Untuk letaknya ada dibagian konten, bagian konten juga dibagi jadi beberapa <b:includable> dan letak kode ini tepatnya ada di dalam <b:includable id='post' var='post'>.

Memasang Tema Custom

Tema-tema yang tersedia di Blogger masih kurang memuaskan bagi kebanyakan Blogger. Karena itu banyak yang berusaha mengganti dengan tema custom buatan pihak ketiga.

Sebelum memilih tema Blogger buatan pihak ketiga, ikuti tips berikut ini:

  • Download dari tempat yang terpercaya
  • Fitur-fiturnya lengkap
  • Desain menarik tapi tidak berlebihan

Untuk memasang tema custom tentunya dengan menggunakan Menu Tema lalu pilih Cadangkan/Pulihkan.

Pada kotak dialog yang terbuka klik Choose File, lalu pilih file template yang tadi sudah sobat download. Jika sudah diupload klik Save.

Menghapus Bagian Tema Custom yang Tidak Bisa Dihapus

Bagian tema custom yang tidak bisa dihapus, ini kadang terjadi.

Namun sebenarnya bukan tidak bisa dihapus hanya caranya sedikit berbeda. Tidak bisa dihapus lewat menu Tata Letak dan juga tidak bisa dihapus dengan menghapus kodenya di template.

Masalah ini bisa diatasi dengan menginstal salah satu tema default Blogger misalnya Sederhana, lalu fitur QuickEdit akan muncul.

Gunakan fitur QuickEdit untuk menghapus bagian-bagian yang tidak bisa dihapus tadi, dan setelah selesai upload kembali template yang tadi sudah diback-up.

Daftar ID dan Class Terpenting

Untuk mengatur tampilan yang cukup kompleks template Blogger menggunakan banyak tag, ada tag utama dan tag tambahan.

Tag-tag utama seringnya diberi ID (<div id='wrapper'>) tapi ada juga yang diberi CLASS (<div class='wrapper'>) atau diberi ID dan CLASS.

Berikut ini dafar ID dan Class yang paling umum digunakan pada tag terpenting template Blogger.

  • wrapper, outer-wrapper: mengatur seluruh bagian template yang bisa dibaca pengunjung
  • header-wrapper, headersec: mengatur bagian header yang berisi logo dan menu navigasi utama
  • main-wrapper, content-wrapper, ct-wrapper: bisa dibilang ini yang terpenting karena berfungsi untuk mengatur artikel blog seperti tulisan, gambar, iklan, infografis dll
  • sidebar-wrapper: mengatur bagian sidebar yang berisi Postingan Terpopuler, Postingan Terbaru, Kolom Berlangganan dll
  • footer-wrapper, footersec: mengatur bagian footer atau bagian paling bawah pada blog. Berisi Credit Link, Copyright dan menu navigasi tambahan

Meta Tags Blogger SEO Friendly

Selain bagian dari latihan, meta tags Blogger SEO Friendly ini juga sebagai bonus karena sobat telah mengikuti tutorial ini sampai akhir.

Biasanya tutorial seperti ini dibuat menjadi postingan tersendiri, karena memang lumayan banyak dicari.

Hapus semua kode yang ada diantara kode <head> (letaknya di awal template kira-kira baris ke 2 atau 3 atau tidak jauh dari baris ke 2 atau 3) dan kode pembuka CSS (yang sudah dijelaskan di atas), lalu ganti dengan kode berikut ini:

<meta name='viewport' content='width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=10, user-scalable=yes'/>
<meta http-equiv='Content-Type' content='text/html; charset=UTF-8'/>
<meta http-equiv='X-UA-Compatible' content='IE=edge'/>
<link rel='canonical' expr:href='data:blog.url'/>
<link rel='icon' type='image/x-icon' expr:href='data:blog.homepageUrl + &quot;favicon.ico&quot;'/>
<link rel='alternate' type='application/atom+xml' expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' expr:title='data:blog.title + &quot; - Atom&quot;'/>
<link rel='alternate' type='application/rss+xml' expr:href='data:blog.homepageUrl + &quot;feeds/posts/default?alt=rss&quot;' expr:title='data:blog.title + &quot; - RSS&quot;'/>
<link rel='alternate' type='application/atom+xml' expr:href='&quot;http://www.blogger.com/feeds/&quot; + data:blog.blogId + &quot;/posts/default&quot;' expr:title='data:blog.title + &quot; - Atom&quot;'/>
<!--[if IE]><script> (function() { var html5 = ("abbr,article,aside,audio,canvas,datalist,details," + "figure,footer,header,hgroup,mark,menu,meter,nav,output," + "progress,section,time,video").split(','); for (var i = 0; i < html5.length; i++) { document.createElement(html5[i]); } try { document.execCommand('BackgroundImageCache', false, true); } catch(e) {} })(); </script><![endif]-->
     
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<meta name='robots' content='noindex,nofollow'/>
</b:if>
<b:if cond='data:blog.isMobile'>
<meta name='robots' content='noindex,nofollow'/>
</b:if>
<b:if cond='data:blog.searchQuery'>
<meta name='robots' content='noindex,nofollow'/>
</b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><title><data:blog.title/></title></b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><title><data:blog.pageName/> | <data:blog.title/></title></b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><meta name='description' expr:content='data:blog.metaDescription'/></b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><meta name='description' expr:content='data:blog.metaDescription'/></b:if>
<b:if cond='data:blog.pageType == &quot;archive&quot;'><title>Arsip untuk <data:blog.pageName/></title></b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'><title><data:blog.pageName/></title></b:if>
<b:if cond='data:blog.pageType == &quot;index&quot;'><b:if cond='data:blog.searchLabel'><title><data:blog.title/> - <data:blog.pageName/></title></b:if></b:if>
<b:if cond='data:blog.pageType == &quot;error_page&quot;'><title>Halaman Tidak Ditemukan</title></b:if>
<b:if cond='data:blog.pageType == &quot;index&quot;'><b:if cond='data:blog.url != data:blog.homepageUrl'><title><data:blog.pageTitle/> - Semua Postingan</title></b:if></b:if>
    
<!-- Open Graph | Twitter Card -->
<meta property='og:site_name' expr:content='data:blog.title'/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<meta property='og:type' content='article'/>
<meta property='og:title' expr:content='data:blog.pageName'/>
<meta property='og:url' expr:content='data:blog.canonicalUrl'/>
</b:if>
<b:if cond='data:blog.postImageUrl'>
<meta property='og:image' expr:content='data:blog.postImageUrl'/>
<b:else/>
<meta property='og:image' content='UrlLogoBlogSobat'/>
</b:if>
<meta property='fb:admins' content='KodeAdminFacebookSobat'/>
<meta property='fb:app_id' content='KodeAplikasiFacebookSobat'/>

<meta name='twitter:card' content='summary_large_image'/>
<meta name='twitter:site' content='@UsernameTwitterBlogSobat'/>
<meta name='twitter:creator' content='@UsernameTwitterBlogSobat'/>

Pada kode di atas sudah ada:

  • Meta Tag SEO Friendly: menjadikan blog lebih ramah SEO seperti dengan memberikan perintah no-index,no-follow pada halaman archive, label dan search
  • Title Tag SEO Friendly: menjadikan judul di halaman homepage, halaman statis dan halaman item otomatis SEO Friendly
  • Facebook Open Graph dan Twitter Card: menjadikan tampilan link di yang dishare ke Facebook dan Twitter jadi lebih menarik dan tidak monoton
  • dll

Kesimpulan

Sekarang sobat sudah tidak bingung lagi ketika melakukan Edit HTML. Dan bisa dengan leluasa mengikuti tutorial-tutorial di luar sana.