Ini sebabnya mengapa tutorial HTML template blogger harus spesifik

Tidak semua tipe penulisan kode HTML sama pada setiap template. Beberapa penulis tema blogger merubah nama ID dan Class Class tertentu dengan nama yang mereka inginkan, mulai dari pengaturan ID dan Class pada HTML, dan tentu saja pada pengaturan CSSnya, bahkan hingga ke dalam fungsi Javascriptnya.

mengoprek kode HTML pada perangkat mobile

Itu mereka lakukan demi menandai elemen elemen yang telah mereka modifikasi agar mudah di ingat, atau, untuk memberikan sinyal kepada mesin pencari dan pada akhirnya kepada pengguna yang menggunakan hasil karya mereka bahwa 'Ini adalah karya saya'. Atau dengan kata lain untuk melindungi hak cipta mereka agar tidak mudah di utak atik oleh pengguna awam. 

Itu hanya contoh.

Akan tetapi memang demikian adanya, bahkan pada setiap varian template bawaan (default) blogger memberikan nama nama dan class yang berbeda beda pada setiap varian template yang mereka sediakan secara gratis di halaman dasbor blogger. Itu subjektif dari para penulisnya yang mungkin berbeda, atau mereka juga ingin memberikan 'identitas' khusus pada setiap template yang berbeda beda. Namun elemen yang mereka buat adalah elemen elemen standar yang biasa kita pergunakan juga.

Nah itu default lho. Apalagi template template premium buatan pihak ketiga yang jumlahnya tidak terhitung itu. Pasti ID dan class class HTML yang mereka tulis sangat beragam juga bukan? Wah kepanjangan mukadimah, tapi saya kok merasa perlu nyinyirin pembaca dengan hal ini ya...

Mari kita berikan contoh...

Mari kita pergi ke inti masalah, yakni bagaimana cara merubah tag h1 yang hilang setelah di uji oleh tool online akibat mengganti judul blog dari text ke Gambar atau image? Anda tahu sendiri kan, ini adalah di karenakan robot TXT Google belum bisa membaca gambar, mereka membaca text. 

Untuk template editblogtema cara mengatasinya sederhana saja, Anda dapat mencari kode yang saya sorot warna kuning, ID-nya adalah 'title'. Kemudian perhatikan kode di bawahnya yang saya sorot kuning lagi, kita tahu homepageUrl adalah URL beranda sedangkan title berarti judul. 

Ada yang 'mengganjal' saat saya temukan kesalahan tag <h2> yang seharusnya adalah <h1> disana. Makanya heading H1 editblogtema hanya 3.8 pada saat menggunakan image sebagai pengganti Judul blog.

<b:includable id='title'>
        <div>
          <b:class cond='data:this.imagePlacement == &quot;REPLACE&quot;' name='replaced'/>
          <b:if cond='data:view.isSingleItem'>
            
            <h2>
              <a expr:href='data:blog.homepageUrl' expr:title='data:title'><data:title/></a>
            </h2>
            <b:else/>
            <h1>
              <b:if cond='!data:view.isHomepage'>
                <a expr:href='data:blog.homepageUrl' expr:title='data:title'><data:title/></a>
                <b:else/>
                <data:title/>
              </b:if>
            </h1>
          </b:if>
        </div>
      </b:includable>

Jadi jelas, saya harus merubah h2 tersebut menjadi h1. Dan hasilnya seperti yang telah di ketahui heading h1 langsung naik menjadi 9.3. Memang tidak 100% akan tetapi mengingat h1 tidak terlalu berpengaruh bagi halaman blog modern secara keseluruhan, saya menerimanya saja.

Contoh lain pada template blogger umumnya..

Punca masalah adalah pada:

<div id='header'>

Tetapi di dalam template yang saya buat saya tidak menyertakannya karena saya tetap menulis pada kondisi tertentu. Disini ada tag <header> (keduanya adalah class yang sama) dan kita anjurkan untuk mengganti kode tersebut dengan:

<header itemscope='itemscope' itemtype='http://schema.org/Organization'>

Di luar pengaturan CSSnya, saya hanya ingin mengatakan bahwa semua kode kode tersebut adalah sama hanya saja pendeklarasiannya, penamaannya saja yang kadang berbeda beda. Tapi malangnya oleh karena hal tersebut pulalah yang menyulitkan para pemula dalam mengedit kode kode HTML untuk merombak tampilan halaman web atau blog personal mereka menurut keinginan.

Itulah hal yang sering di komentari oleh pengunjung (pengguna): 

Kok kode yang di maksudkan gak ada?

Aku kok gak nemu kode tersebut di dalam halaman editor HTML blogku?

GAKADA!

Padahal kode tersebut ada namun dengan nama Class dan ID yang berbeda.

Jadi memang sebaiknya membuat sebuah tutorial harus menyertakan detail, kondisi dan sasarannya. Contoh: Cara merombak header template blogger viomagz. Cara merombak tampilan homepage template default contempo dst.

Jangan buat begini: Cara merombak header template blogger padahal yang di maksud adalah template blogger solaris misalnya. Karena pas yang baca menggunakan template yang berbeda mereka tidak menemukan satupun kode kode yang di sebutkan.... 

Ikuti terus trik, tips, teknik hack dan kabar terupdate dari blog ini! Share:

Posting Komentar

Silahkan berkomentar sesuai dengan topik kita ya...

Lebih baru Lebih lama

Formulir Kontak