AdelinaSasa

PARA PEMULA JANGAN TAKUT MENGEDIT HTML BLOGGER!

AvatarOleh:
 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.

Artikel Terkaitnya:

5 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

Home

Labels

Abadi account action addicted adobe photoshop fix adobe photoshop mix adobe photoshop touch adsense agama AI akal alam Albert Einstein alexander the great. Allien Amerika AMP anak Androd android angkasa angkasa luar animal animal planet animasi antithieft aplikasi hebat Appe apple Apple Face ID Artifical Intelligent artificial inteligent artikel artis asesories asus atheis autoCAD autodidact awas Ayu Ting Ting badai bahasa bahasa. bakteri batam BBM beginning benar bencana berbagi berita berjalan berlari bijaksana bing bisnis kecil black hole Blackberry blackberry Messenger blog blogger blogger logo blogger moblie blogging bluetooth keyboard bluetooth mouse bocor bot BPJS buku bully buruh burung langka business camera cat cellphone ceramah cerita charles Darwin chat China cinta classic Cloud cloud drive contempo contempohybrid coolest covid 19 CSS curhat custom ROM cybercrime Darwin dasbor Deep mind Demo desain Design dewa dilema docomo dollar amerika download DPR RI drama Drive DSLR dunia earn money editblogtema Education ekonomi Email emas endorse enggang English entertainment error etika evolusi Facebook fakta fanpage favicon feature fiksi fiksi sains filem filsafat finansial fisika flashdisk Florence Nightingle Florida food. forbes freckles Free friendship fun futuristik G+ Gadget Gagdet Galaxy Mega 6.3 Galaxy note 10.1 2014 edition gambir serawak game gaya hidup genetika Genius GENOM girl global gojek gold Google google adsense Google Rewards Opinion google%20drive google+ grafis Hack hacker handphone hantu hapeseken hari tua harimau harun yahya harvey heart secret hebat help me hewan hiburan hoax Hobit. hollywood horor HTML http://justdelete.me Huawei P20 pro hubungan hujatan hukum human humanbeing humor Hutan Lindung ICBM iis sugianto ilmuwan immortality impian Indosat infinity war iniJawabannya! insiden insipirasi intelligent Internasional internet invansion investment iOS iOS 11 iOS 8 iPad iPad Air ipad pro iphone iPhone 6 iPhone Case iPhone X iPhone Xs iphone. iPhoneX islam Israel isu sara jailbreak Jaime Sanjuan Ocabo Jalan Tikus janji Javascript Jenius Jerusalem jitu Job Jokowi Jokowi aja bekerja keras jokowi aja kreatif Jonru Ginting judi kamera kamera hape kantor Kaskus keabadian keadilan keamanan Kebenaran kecanduan kecantikan kecelakaan kecerdasan buatan kehidupan keluarga kemajuan kemanan kemiskinan kemudahan hidup kenyamanan kertas keruntuhan kesetiaan keyakinan keyboard external PC keyboard fisik tablet keyboard fisik tambahan keywords khairil anwar khotbah kiamat kisah klasik kode koding koes plus komedi komputer Konsipirasi konten kotak pandora kreatif kriminal krisis kristen kucing kuyang lagu lapangan kerja laptop leisure Lenovo Life lifehack lingkungan listrik logika logitech LOGO loneliness Lotgitech lowongan luar lucu MacBook madonna magis make up malam minggu Malaysia manipulatif manusia masa depan masa lalu mati tertawa media medis medsos membela diri mencari uang menggambar mengintip rahasia menulis meretas Messenger Micorosft Office Microsoft microsoft office microsoft%20office milk lover miras mitos mobile modal motivasi motivation motivation. movie Muhammad murai batu musik myths naluri NASA navigasi blogspot template network new news ngeblog Nokia X nuklir nyanyian nyata obat kuat Office office%20365 old time job online operating system oppo organisme original Otodidak pademi pahlawan pamali Pandora panduan paradox password PC pegawai negeri pekerja pekerjaan pemrograman pemula pencipta pendidikan pengarang penghasilan pension pensiun penulis perang perbankan perekamLayar perkawinan phablet phising PHK phone phone camera photographi phtography pilihan hidup pilosofi Play Store politik ponsel postingan potografer powered by blogger prabowo subianto prediksi teknologi premium pria pribadi prilaku privasi produktivitas programming promosi prostitusi psikologi Puasa publisher Puisi qoute Raffi Ahmad rahasia ramadhan rano karno rasialis relativitas reliji remaja renungan responsive review rhoma irama riba Robot ROM. stock ROM ruang waktu rumah sakit Rusia Safir screen sahabat sains salah Samsung samsung galaxy foldable Samsung Galaxy note 2014 Samsung S8 samsung tabS2 screenRecorder scy-fi SECRET secrets sejarah seken selebritis medsos self learning self-confident semesta sentinel SEO simalangkama simple singularity smarphone smartohone smartphone Smartwatch social song sony sosial spam spoiler Spy Stephen Hawking steve job strategi struktur success sukses suku terasing supernatural tablet tablet 7" TabletAndroid takhyul taktik tantangan target tauhid technic Technology teknik teknologi teknologi hoax telkomsel tema template tenaga kerja teologi teori terbaik theme thomas alpha edison Time traveller tips toko online Tokoh tourism town tragedi trik triks troubleshooting Tuhan Tutorial Tutorial. tweeter twiteer uang UFO ultrabook unggas langka United States universe usaha video viral virtual vivo waktu website widget Windows 8 Windows PC wisata women WORDPRESS xiomi xml xperia Yahoo yahudi

Get Updates