Mengganti header template blogger dengan cara menghapus header bawaannya

Pernahkah Anda mengalami hal begini: Ketika diperiksa, entah salah apa heading h1 hilang sehingga struktur template tidak baik di mata mesin online? Atau begini: Header bawaan blog tampak monoton dan membosankan. Jadi dengan trik yang saya kemukakan berkat rajin bikin template he he he...Anda akan menarik manfaat:

1. Merubah gaya header
2. Membuang atau menghapus sama sekali widget header bawaan blogger sampai ke akar akarnya.
3. Dengan mudah memindah mindah posisi header baru ini ke kiri, ke kanan dan atau gaya header halaman website masa kini: Judul di tengah (text.align.center).
4. Memperbaiki dan mengatasi tag h1 yang hilang.

Loh kan yang bawaan juga bisa di modifikasi kok. Anda jangan mengira sebundel pengaturan CSS dapat mengatur atur semua varian template blogger, perhatikan apa yang sering di posting oleh para blogger untuk meletakan Judul blog menjadi di tengah. Sarannya kebanyakan meletakan CSS berikut ke dalam template di astas ]]></b:skin.

/* Header
----------------------------------------------- */
.header-outer {
background: $(header.background.color) $(header.background.gradient) repeat-x scroll top left;
_background-image: none;
color: $(header.text.color);
text-align:center;
}

Perhatikan baik baik itu bukan kode CSS sapu jagat, bukankah itu lebih kepada template dengan versi layout ke 2? 

Yakni dapat di terapkan ke beberapa template yang dibuat berdasarkan varian varian tema blogger dengan layout kedua.

Bagaimana dengan template template varian terbaru dengan layout versi ke 3? Class dan ID HTML-nya tidak sama, tag conditonalnya beda. Terutama banyak sekali perbedaan dalam pendeklarasian kode kode pembuatannya.

Untuk itu saya menghapus widget header bawaan blogger dan mengabaikan pengaturan CSSnya. Saya membuat pengaturan CSS baru sebagai berikut:

<style> header {
position: relative;
height: 27px;
background-image: linear-gradient(#FFCC99, #fff);
}

.kepala{text-align: center;float: center;}
</style>

Ya CSS style yang di letakan tepat di atas tag </head>

Lalu membuat ID pada pengaturan HTML  sebagai berikut:

<div class='kepala'><h1><a expr:href='data:blog.homepageUrl' expr:title='data:blog.title'><font face='Arial' color='#f0f0f0'><data:blog.title/></font></a></h1></div>

Saya meletakan kode tersebut tepat di atas kode </header> setelah widget header bawaan saya hapus.

Hasilnya? Heading yang tadinya pada saat menggunakan heading bawaan nilainya adalah 3,5 sekarang telah sempurna menjadi 10.

Saya tidak mengatakan trik ini bisa diterapkan pada semua jenis varian varian template, terutama buatan pihak ketiga, yang saya maksudkan adalah sebagian pengaturan CSSnya. Akan tetapi bagian HTML-nya dapat di pastikan akan bekerja dengan baik...

Bagi yang biasa bermain dengan kode kode HTML silahkan melakukan eksprimen sendiri. Mudah kok. Saya bahkan melakukannya hanya dari perangkat mobile (hape atau ponsel) saja.

Demikianlah cara memperbaiki heading tag h1 yang hilang dengan cara mengganti header bawaan blogger itu dengan header buatan kita sendiri.

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

SHARE YA:

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.

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:

SHARE YA:

Cara memperbaiki heading h1 yang tidak terbaca mesin pencari setelah judul blog diganti gambar

Kami mencoba berbagai trik mudah bagaimana caranya menentukan sebuah deklarasi h1 agar terbaca dengan mudah dan jelas pada saat di telusur oleh mesin pencari, walaupun tanpa h1 pun tidak akan melukai halaman sebuah web, namun menurut John Mueller, webmaster ahli Google H1 dapat memberikan sebuah sinyal yang kuat kepada sistem pencarian di internet oleh mesin pencari.

H1 tidak akan terbaca ketika halaman blog kalian robah menjadi image atau gambar, penyebabnya masih dikarenakan mesin penelusur tidak dapat membaca dan mengenali image atau gambar, mereka hanya membaca text. Mungkin di butuhkan beberapa tahun ke depan sampai machine learning mengajarkan mereka dan mereka dapat belajar lebih mudah karena peningkatan kecerdasan buatan.

Banyak trik cukup membingungkan terutama pada saat bagaimana sebagai pemula saya pernah menerapkannya dan gagal. Akhirnya saya mencobakan trik kami sendiri (trik editblogtema). 

Masuk ke pengaturan baru dasbor blogger:

1. Pilih tema
2. Klik titik tiga bersusun di kanannya
3. Setelah muncul 5 menu pilih 'Edit HTML'

Perhatikan Gambar berikut:

Pada halaman editor HTML blogger yang telah terbuka klik mouse dan pada keyboard laptop tekan CTRL+F maka  akan muncul di pojok atas halaman editor HTML sebuah kolom pencarian disitu ketikan </head>, dan lalu tekan ENTER pada keyboard. 

Cara pertama:

Copy-Paste kode berikut dan letakan di bawah kode </head> yang telah ditemukan di atas.

<a expr:href='data:blog.homepageUrl'/><h1><data:blog.title/></h1>

Perhatikan gambar:

Cara kedua (recommended):

Tapi cara di atas akan menampilkan Judul blog dipojok kiri paling atas halaman, jadi untuk menyembunyikan Judul atau Nama blog tersebut letakan saja kode tadi setelah kode berikut kode berwarna biru:

<b:section id='header' name='Header' showaddelement='false'>

Letakan kode berikut di bawahnya atau setelanya: 

<a expr:href='data:blog.homepageUrl'/><h1><data:blog.title/></h1>

Setelah itu save Tema silahkan uji melalui tool online untuk mengetahui apakah heading h1 halaman web atau blogger kalian telah baik. Saya kadang memanfaatkan Nibbler:

https://nibbler.silktide.com/en/reports/www.editblogtema.com

Terlihat setelah memasang kode HTML/XML di atas heading telah terstruktur 100%. Triks diatas terutama sangat efektif pada saat di terapkan pada 4 varian terbaru template blogger.

Peringatan: Mungkin hanya berlaku pada beberapa jenis template default yang telah di modifikasi headernya

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

SHARE YA: