PARA PEMULA JANGAN TAKUT MENGEDIT HTML BLOGGER!

 Edit HTML blogger itu mudah dan gak usah terlalu takut salah karena zaman now hampir semua kesalahan dapat di "undo" dan di "skip", kecuali dosa dosa dan kesalahanmu terhadap diriku he he he... biasanya teman teman kalau ngedit HTML adalah karena ingin masang iklan di milihnya di tengah, diatas atau dibawah judul, banyak yang kasih saran seperti ini: Masuk ke Template blogger-edit HTML dan Cari kode <head>, <body> atau <data:post.body/>  untuk yang terakhir selalu di sarankan agar menghapus dan mengganti dengan kode ini: bla bla bla..letakan iklan yang sudah di parse disini bla bla bla.



Jika kita terlanjur melakukan kesalahan pada saat melakukan pengeditan dan berpengaruh terhadap tampilan blogger, misalnya:


  • Isi blogger cuma tampil separoh
  • Kode script muncul diantara postingan (ini biasanya akibat kopi paste kode pada saat pemasangan iklan)
  • Tampilan header jadi berpindah
  • dll
Tinggal masuk ke settingan blogger>Edit HTML tidak perlu mencari kode kode yang bikin eror atau menghapus kode, cukup lihat menu HTML, pada gambar dibawah ini pertama ada "back" >save theme> Jump to widget dst. Kita pilih "Revert widget to default" akan muncul pilihan: Revert widget themes to default, pilih saja: Select all widget, maka templat kita akan kembali normal. Perlu diketahui cara ini tidak akan menghilangkan widget atau pengaturan yang telah kita buat degan bersusah payah contohnya seperti: Menu Navigasi akan tetap aman, Side bar tetap aman, postingan tetap selamat. Templat kembali ringan dan normal. Namun semua iklan akan hilang dan kita harus memasangnya lagi dari awal. Kalau menurut saya ini malah bagus karena kita telah belajar dari kesalahan.


Gambar templat HTML blogger
Cara mengembalikan template error adalah dengan mencentang "select all widgets"
CONTOH IKLAN DIATAS DAN DIBAWAH POSTINGAN
Adapun cara memasang iklan yang kita sebutkan diatas dan sering dilakukan oleh blogger memang manjur, tapi menghapus kode <data:post.body/> dan menggantinya dengan kode "antah berantah" maaf saya tahu kode itu dibuat berdasarkan aturan bahasa pemrograman tapi terasa sedikit ribet terutama bagi pemula.



Memang banyak cara memasukan iklan dengan memberikan perintah kode script yang benar, legal menurut aturan. Akan tetapi lebih baik jika kita melakukannya dengan cara yang lebih simple dan sedikit pemakaian kode kecuali kode iklan yang akan ditanamkan kedalam template blog kita dalam hal ini template blogger.



Pertama masuk kepengaturan blogger-pilih theme atau template-kemudian pilih "edit theme" atau "edit template" setelah kode HTML blogger muncul, tekan mouse dimana saja.




cari kode: <data:post.body/>

Cara pintas mencari kode adalah (jika memakai laptop) arahkan kursor mouse ke tengah kode dan tekan lalu pada keyboard tekan CTRL+F setelah kotak pencarian muncul ketikan atau kopi saja kode diatas dan  tekan "enter" pada keyboard.
Jika kode yang dicari tidak ketemu, bukan berarti kode itu tidak ada tapi disembunyikan maka kita harus meng "expand" kode dengan cara pintas lagi:



Tekan isi HTML ditengahnya. Pada keyboard tekan CTRL+A secara bersamaan, maka tampak seluruh kode menjadi highlight atau berwarna kelabu lalu tekan CTRL+C secara bersamaan, lalu dilanjutkan dengan menekan Del (delete atau hapus) isi HTML akan terhapus dan hilang dan selanjutnya tekan lagi CTRL+V untuk mempaste kode. Seluruh kode HTML muncul lagi namun telah di expand seluruhnya.



Cari kembali kode <data:post.body/> kalau sudah ketemu letakan kode dibawah ini diatas kode <data:post.body/>, dibawah ini kodenya (kopi saja dan pastekan diatas kode <data:post.body/> tadi ya.



<b:if cond='data:blog.isMobile'>



<div>

 --Kode adsense  untuk mobile view--

</div>
<b:else/>
<div>

 --Kode adsense untuk komputer view--



</div>

</b:if>


Tulisan warna merah diganti dengan kode iklan dari google adsense (masuk ke akun google adsense dan pilih dua iklan yang akan ditempatkan untuk mengganti tulisan merah diatas, dan kopi lalu pastekan untuk mengganti tulisan warna merah, iklannya tidak perlu di parse, lho kalau tidak di parsing apa gak error? Tidak, tidak akan error asalkan menambahkan sedikit kode tambahan kepadanya.)



Contoh penggalan awal kode iklan adsense selalu sebagai berikut:


<async src="//pagead2...dst



Agar kode iklan tidak error pada saat di paste ke dalam HTML blog kita hanya perlu menambahkan ="async" jadi penggalan awal kode akan terlihat seperti dibawah ini:



<asyn =async" src="//pagead2...dst



Tampilan iklan nantinya akan seperti ini: (tuh kan lihat Judul postingannya kejepit sama iklan, he he he)

Setelah menerapkan kode diatas iklan tampak tampil diatas dan dibawah judul atau diatas postingan agar iklan juga tampil pada versi mobile (atau tampilan di hape) Pilih pengaturan custom: Masuk pengaturan blogger lagi:



Theme/Template>pada versi mobil tekan tombol dibawah yang bergerigi>ketika muncul menu pilih "custom" biasanya muncul paling bawah.




Jangan lupa selalu pilih iklan yang responsive agar lebih besar kemungkinannya bisa tampil dalam versi mobile template custom ini. Sebenarnya iklan tetap dapat tampil dengan elegan pada templat mobile non-custom, yakni tepat diatas judul dan dibawah postingan, akan tetapi kelemahan template mobil non-custom adalah hilangnya beberapa widget yang kita pasang untuk tampilan desktop.



Jadi pada tampilan mobile atau tampilan hape iklan akan tampak nangkring seperti ini:




Supaya iklan benar benar muncul di tampilan mobile sebaiknya cari kode <data:post.body/> yang di atasnya terdapat kode: (kodenya di highlight kebiruan)


<div class='post-header'>
  <div class='post-header-line-1'/>
</div>
<div class='post-body entry-content expr=id='qout;post-body-qout; + data:post.id' itemprop='articleBody'>
  <data:post.body/>
<div style='clear: both;'/><-- clear for photos floats -->
</div>



Kemudian kode iklan yang telah di parse maupun yang telah di edit langsung saja di letakan diatas kode data post body dan iklan yang lainnya di letakan saja di bawah data:post.body tadi. Kalau kita takut mengedit kode iklan lebih aman mem"parse" iklan yang akan di tempatkan terlebih dahulu.

Mungkin penjelasan didalam video dapat memberi gambaran yang lebih jelas:

Sebelum Save template lakukan "preview" terlebih dahulu, setelah dinyatakan tidak mengandung error baru di SAVE.



Comments

  1. Sama persis dengan pengalaman saya beberapa hari yang lalu, saking penasaran pasang kode google analytic sampe 4 kali gagal yang ke 5 baru bisa ma'lum modal nekat dan masih awan sama yg kaya gini.

    Terimakasih om artikelnya sangat bermanfaat.

    ReplyDelete
  2. he he he hari ini opsi "undo" dan "skip" telah di aplikasikan dimana mana. Sama sama...terimakasih atas kunjungannya.

    ReplyDelete
  3. Iya ... gue otak-atik HTML pakai modal nekat dan dukungan dari Mbah Google. Memang kalau tidak dicoba, nggak bakalan bisa.

    ReplyDelete
  4. mbak dyah termasuk produktif, sambil travelling sambil nulis...enjoy sekali jadi iri

    ReplyDelete
  5. Kalau sy setiap hari ngedit biar beda dan jangan itu itu saja

    ReplyDelete

Post a Comment