Cara Edit Template Blog Baru Bawaan Blogger

Bagi sebagian orang, dalam hal ini blogger pemula, akan mengalami kesulitan bila berurusan dengan edit template. Padahal, blog baru biasanya berurusan dengan edit template, setidaknya untuk memasukkan  kode verifikasi, menu-menu yang tidak ada widget-nya dan juga kode lainnya yang dibutuhkan. 

Sumber:aplik.org

Apakah anda mengambil template dari Blogger? Bila mengambil, edit template blog baru menjadi tambah penting dilakukan. Alasanya, template blog dari Blogger/Blogspot tidak sesuai standar SEO yakni dalam masalah heading. Bila template blog ini digunakan untuk bisnis, jelas, hasilnya kunjungannya tidak maksimal.

Kebanyakan blogger mengambil template blogspot dari pihak luar Blogger/Blogspot. Alasanya karena sudah mengalami penyettingan/editing masalah heading yang tidak sesuai standar SEO. Biasanya, mereka mengandalkan template gratis. 

Namun, disini akan menjelaskan bagaimana cara edit template blog baru, yang sumber template-nya berasal dari Blogspot/Blogger. Bisa jadi, sebagian blogger pemula menginginkan mendalami skill editing temlate blog yang sekarang dibutuhkan banyak orang.

Baca: Cara Membuat Blog di Blogspot Terbaru 2021

Masuk Bagian Edit Menu Blogger

Untuk mengedit HTML, bagi yang sudah berpengalaman, tidak harus menggunakan media Blogger yakni lewat Edit HTML. Bisa juga menggunakan dreamweaver.

Hanya saja, pengeditan menggunakan Dreamweaver bukan menggunakan XML tetapi sudah berbentuk HTML. Artinya, anda harus mendownload tampilan blog terlebih dahulu untuk mengedit HTML.

Pada pembahasan ini, lebih kepada cara edit template blog baru dengan mengandalkan body HTML Blogger. Untuk itu, anda harus masuk terlebi dahullu lewat tombol Edit HTML.

Nanti masuk pada body HTML. Disini, anda bisa mengedit template blog baru bawaan blogger secara manual. Artinya, mengedit denganmengotak-atik kode html template pada blog bawaan blogger.

Selalu Menggunakan CTRL+F Dalam Mencari Kode Dalam Edit Template Blog

Ada dua hasil dalam menjalankan CTRL+F. Ketika kursos tidak dimasukkan di body HTML template blog, hasil dari CTRL+F akan muncul di bawah bagian browser. Anda bisa mencoba sendiri. Ketika kursor di tempatkan di dalam body THML, dengan meng-klik, hasil CTRL+F akan muncul di body HTML template blog.

Yang perlu anda gunakan adalah hasil CTRL+F yang muncul di bagian body html template blog.

 

Memanfaatkan kolom pencarian di atas bisa meringkas pekerjaan dalam edit template blog di blogger.

Selalu Simpan Terlebih Dahulu Template Sebelum Edit Template Dalam Blog Baru atau Lama

Biasanya, saya menyimpang template terlebih dahulu sebelum melakukan edit template blog terbaru. Hasil dari simpanan, saya biasanya memberi nama, misal templateedit-1, templateedit-2 dan seterusnya. Nomer urut template sebagai tanda dalam perkembangan hasil edit template blog.

Saya menuliskan nomer urut hasil edit template blog karena memang melakukan banyak editing pada kode HTML, kebutuhan merubah tampilan blog.

Selalu Menggunakan Tanda Untuk Menentukan Perbedaan Hasil Edit Template Blog

Maksudnya begini. Di dalam kode HTML, ada kode yang sama namun kegunaanya berbeda. Di blog Blogspot, memiliki dua tampilan  yakni homepage dan halaman publikasi tulisan (postingan dan dan laman). 

Contoh kode yang sama namun beda kegunaan. Kode yang sama seperti <h2>tulisan</h2> bisa ada di bagian homepage dan bagian halaman publikasi tulisan. Ketika melakukan edti template, akan sulit mencari dimana kode yang perlu di edit, karena ada beberapa <h2>tulisan</h2> di beberapa urutan.

Uuntuk memudahkan dimana yang harus diedit, anda perlu menggunakan "tanda" untuk menentukan perbedaan hasil edit template blog. Karena ini, anda bisa dengan mudah memutuskan mana yang perlu di edit THML-nya.

Lebih baik langsung contoh, sekaligus membenarkan heading template bawaan Blogspot yang tidak sesuai standar SEO.

Pengaturan heading standar SEO di bagian homepage:

• Heading 1 (H1) untuk judul blog
• Heading 2 untuk judul postingan

Namun, pada template bawan blogger di bagian homepage yaitu

• Heading 1 (H1) untuk judul blog
• Heading 3 untuk judul postingan

Berikut cara membenarkan heading bagian homepage Blogspot.

Lebih dahulu mencari kode <h1> (cara penulisanya tidak kurung tutup : <h1). Tulis di kolom pencarian. Pastikan jangan ada spasi setelah menulis <h1

Setelah diklik untuk pencarian, maka akan menemukan <h1. Bila kode <h1 ada dua, disini perlu teknik memberikan tanda pembeda. Tanda bedanya bisa diberikan angka di tengah tagnya, misal <div>11111111</div>, <div>222222222</div>. Lalusimpan untuk melihat hasilnya.

Dalam pencarian menggunakan template blog bawaan blogger, memang tidak menemukan kode <h1. 

Cara alternatifnya bisa lewat browser dengan menggunakan klik kanan mouse. Pada tampilan blog di browser Mozila, pilih Inspect Element. Kalau tampilan blog menggunakan Chrome, bisa memilih Inspeksi. Agar lebih mudah, lebih baik menggunakan browser Chrome.

Hasil dari pencarian.

 

Ini adalah kode hasil pemilihan.

Keterangan:

Nomer 1: Tombol untuk melakukan pencarian dengan cara menentuh-nyentuh tulisan pada tampilan blog di blogspot

Nomer 2: Bahasa kode HTML yang terbaca setelah menyentuh bagian tampilan blog

Nomer 3: Badan kode CSS yang mengikutsertakan pada kode HTML yang sudah ditampilkan

Cara memilihnya adalah dengan mengaktfkan pada poin nomer satu. Lalu menempil-nempelkan mouse, dengan sendirinya kode berjalan. Ketika nemu tempat pencariannya di homepage, anda tinggal meng-klik mous sekali saja agar bisa memunculkan kode CSS.

Dalam contoh ini, saya memilih bagian judul blog. Dalam hasil, bagian judul di apit oleh class "hamburger-section" dan id "header". Kata kunci dari class dan id ini cukup untuk melakukan pencarian.

Bila judul atau tulisan mengandung url atau anchor tek (tautan teks), cukup mencadri dengan <a saja. Kali ini mau mencari <a untuk judul blog. Berhubung sudah tahu lokasinya, pencariannya secara manual saja.

Ketika sudah menemukan <a, dibagian ini ditambahkan tanda tertentu bila memang ada heading-nya berjumlah banyak. 

Namun dalam contoh, heading 1 berjumlah 1 saja. Sayangnya, pas di cek, tidak mendapatkan <h1. Sudah begitu, tidak ada kode ahref <a href></a>. 

Untuk mencari posisi judul blog, tetap perlu pemberian tanda di area header.

Hasilnya, tanda "multi 3" dan "multi 4" berada pada homepage dan juga halaman postingan. Sedangkan tanda "multi 1" berada pada halaman postingan.

Halaman homepage

 Halaman postingan

 

Karena sudah tahu posisi judul blog dan judul artikel, saya tinggal mengedit apa yang perlu di edit. 

Karena template jenis di atas kurang bagus untuk membuat tutorial edit template, saya akan mengganti dengan template blog yang lainnya.

 

Intinya, pembahasan di atas sekedar contoh bagaimana pemberian tanda bisa sebagai langkah memudahkan edit template.

 

Cara Memperbaiki Title Tag HTML Yang Tidak Sesuai SEO

Satu lagi masalah template Blogspot dari Blogger yang desainnya tidak sesuai standar SEO yaitu masalah title tag. Entah apa alasannya sehingga banyak yang harus mengedit atau mengandalkan template dari luar Blogger.

 

Title tag adalah judul blog yang tampil di browser.

 

Untuk membuat judul blog yang akan tampil di browser, diperlukan kode title tag seperti ini.

 

<title><data:blog.pageTitle/></title>

 

Hanya saja, di dalam template Blogger tidak ada tag kondisional yang akan mencegah menampilkan judul blog ke banyak artikel. Contoh: Cara Membuat Blog (judul blog) - Judul Artikel (judul artikel)

 

Untuk mencegah tampil ke banyak artikel, dibutuhkan tag kondisional yang hanya akan tampil di homepage.

 

Namun untuk penulisan lengkap kode title tag, saya hanya mencopy dari template yang sudah benar pengaturan title tag-nya.

 

Title tag versi Evomag Lama

 

<b:if cond='data:view.isHomepage'>
    <title><data:blog.pageTitle/></title>
<b:elseif cond='data:view.isSingleItem'/>
    <title><data:blog.pageName/> - <data:blog.title/></title>
<b:elseif cond='data:view.isMultipleItems and data:blog.pageName == &quot;&quot;'/>
    <title>
    <b:switch var='data:blog.locale'>
      <b:case value='id'/>
          Semua Postingan - <data:blog.title/>
      <b:default/>
          All Posts - <data:blog.title/>
    </b:switch>
    </title>
<b:elseif cond='data:view.isError'/>
    <title>
    <b:switch var='data:blog.locale'>
      <b:case value='id'/>
        Halaman tidak ditemukan - <data:blog.title/>
      <b:default/>
         Page Not Found - <data:blog.title/>
    </b:switch>
    </title>
<b:else/>
    <title><data:blog.pageName/></title>
</b:if>

 

Title tag Evomag versi baru (yang di pakai dalam blog ini)

<b:comment><!-- Title start --></b:comment>
<b:if cond='data:view.isPost'>
    <title><data:blog.pageName/></title><b:comment><!-- title post --></b:comment>
<b:elseif cond='data:view.isPage'/>
    <title><data:blog.pageName/></title> <b:comment><!-- title page --></b:comment>
<b:elseif cond='data:view.isHomepage'/>
    <title><data:blog.pageTitle/></title> <b:comment><!-- title homepage --></b:comment>
<b:elseif cond='data:view.isArchive'/>
    <title><data:blog.pageName/> - <data:blog.title/></title> <b:comment><!-- title archive --></b:comment>
<b:elseif cond='data:view.isLabelSearch'/>
    <title><data:blog.pageName/> - <data:blog.title/></title> <b:comment><!-- title label --></b:comment>
<b:elseif cond='data:view.search.query'/>
    <title><data:blog.pageName/> - <data:blog.title/></title> <b:comment><!-- title search --></b:comment>
<b:elseif cond='data:view.isError'/>
    <title>404 : <data:messages.theresNothingHere/></title> <b:comment><!-- title error --></b:comment>
<b:elseif cond='data:view.isMultipleItems and data:blog.pageName == &quot;&quot;'/>
    <title><data:messages.showAll/> - <data:blog.title/></title> <b:comment><!-- title all post --></b:comment>
<b:else/>
    <title><data:blog.pageName/></title> <b:comment><!-- default title --></b:comment>
</b:if>

<b:comment><!-- Title end --></b:comment>

 

Untuk memasangnya, cukup mudah. Silahkan copy salah satu kode title tag di atas. Lalu hapus title tag bawaan Blogger seperti di bawah.

<title><data:blog.pageTitle/></title>

Lalu anda paste sebagai ganti title tag yang sudah dihapus.

 

Hasilnya.

 

 

Catatan: Beberapa template keluaran baru dari Blogger sudah memberesi masalah title tag. Jadi, anda tidak perlu melakukan penggantian title tag

Cara Edit Heading Template Blog Bawaan Blogger Agar Sesuai Standar SEO

Berikut saya membuat pembahasan tutorial edit template memakai jenis template yang lain. Dalam kasus ini, saya ingin membenarkan heading terlebih dahulu.

 

1. Aturan heading homepage:

• Judul blog: H1
• Judul postingan H2
• Judul Sidebar, Footer H3 (Karena berurusan dengan perubahan widget, biasanya tidak diedit sehingga tetap H2)
  

Halaman homepage

 

 

Memberi heading apa, mau memberikan efek CSS apa di dalam judul di atas, bisa dengan memakai cara di atas.

Nah, saya akan membenarkan heading pada judul postingan artikel yang ditandai dengan "multi 2". Headingnya masih menggunakan heading 3 (h2) yang memang tidak sesuai standar SEO. Harusnya heading 2 (h2) .

Karena ada perubahan dari heading 3 ke heading 2, biasanya berpengaruh pada kode CSS. Untuk membenarkan CSS, bisa mencarinya dengan mencari class dari heading 3. Dalam contoh diatas, class-nya adalah 'post-title'. Untuk memudahkan mencari, bisa menggunakan: .post-title (diberi tanda titik).

2. Aturan heading halaman postingan artikel:

• Judul blog: (atau H1 untuk judul artikel dengan mengatur tampilan dengan tak kondisional)
  
• Judul postingan H1 (atau H2 bila judul artikel sudah sudah ada yang mewakili untuk H1)
  
• Judul Sidebar, Footer H3 (Karena berurusan dengan perubahan widget, biasanya tidak diedit sehingga tetap H2) 

Heading judul blog sudah benar dalam heading yaitu menggunakakn H1. Tetapi, judul ini akan tampil di halaman postingan dengan heading yang sama di halaman postingan. Harusnya, judul postingan yang seharusnya heading 1 alias H1. Ini kondisi template bawaan blogger yang bisa mengacaukan SEO sehingga perlu upaya edit template blog.

 

Cara melakukan edit templatenya masih sama. Yang dibutuhkan adalah menyembunyikan judul yang memiliki heading H1, diganti dengan judul blog yang tidak memiliki heading. Atau, bisa diganti dengan judul postingan. 

Untuk memudahkan, saya akan mengganti judul blog menjadi judul artikel di dalam halaman postingan artikel.

Gunakan tag kondisional Blogger agar bisa menyembunyikan judul blog berheading H1.

Tag berikut untuk menampilkan judul blog atau lainya hanya di homepage saja.

<b:if cond='data:view.isHomepage'>

tulis yang mau disembunyikan

</b:if>

 

Contoh penerapan bila mau dipasang di widget judul blog dan widget lainnya. Jangan sampai salah, karena nanti widget di Tata Letak ikut disembunyikan.

<b:widget id='HTML7' locked='false' title='' type='HTML'>
<b:includable id='main'>
<b:if cond='data:view.isHomepage'>
<!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h4 class='title'><data:title/></h4>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>
  <b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

Tak kondisional Blogger harus dipasukkan sesudah kode yang di warnai merah.

 

Tetapi, tidak semua tag kondisional Blogger dijalankan seperti di atas. Dalam contoh ini, hanya ingin menyembunyikan judul blog, berganti dengan judul artikel. Berikut caranya.

Tag berikut untuk menampilkan judul blog atau lainya di semua halaman kecuali homepage.

<b:if cond='data:blog.url != data:blog.homepageUrl'>

Judul artikel

</b:if>

 

Hasilinya

Saya rasa, penjelasan mengedit sudah selesai pada masalah inti penting edit template blog bawaan Blogger. Untuk selanjutnya, akan menjelaskan secara mendalam di halaman berikutnya.