7.2.14
45
Belajar Mengubah Kode Template Agar Valid HTML5
Belajar Mengubah Kode Template Agar Valid HTML5 - Rangka sebuah blog terletak pada susunan atau struktur bentangan kode-kode HTML pada template, semakin baik tata letak kode HTML templatenya, maka semakin bagus pula tampilan blog yang kita jalankan, renponsive dan tentunya SEO Friendly. Sebagai contohnya coba anda hapus beberapa kode HTML Template anda, atau memindahkan kode tersebut pada baris dan kolom yang tidak semestinya, apa yang terjadi.? ya..saya pastikan Template anda akan berantakan. Itu sebabnya penempatan kode HTML atau CSS yang salah pada template anda akan berakibat buruk pada tampilan blog anda.

Sebagai Pemahaman saja, hehe..!! SAHABAT BLOGGER 77 berkata - Level pintar atau MASTER dalam struktur Template Kode ada 2 kategori, pertama pintar karena ada seseorang yang membantu mengasah kemampuannya, dan kedua pintar karena berani (bukan Nekad) dan mau belajar dari apa yang dia baca dan ketahui(otodidak). Hayoo.. dilevel manakah anda.?
Kalau saya sich sudah pasti tidak termasuk pada level diatas, karena memang tidak paham akan Kode HTML Template, tetapi saya punya cara jitu untuk meraihnya, katanya ilmu tidak akan berkurang dan habis jika dibagikan, karenanya saya mengajak sahabat semua pecinta SAHABAT BLOGGER 77 untuk Belajar Mengubah Kode Template Agar Valid HTML5 dengan beberapa trik simple tetapi terbukti ampuh dan mendapat 2 jempol dari sang MASTER, hehe..!!

Update - Sebelum anda ingin mencoba tahapan ini, silahkan cek Valididasi HTML5 blog anda terlebih dahulu pada link ini Validator HTML5 sebagai perbandingan

1. LEKUKAN KODE TEMPLATE

Lekukan pada kode HTML template merupakan jarak atau spasi antara kode, atau sebagai perpanjangan kode HTML yang jika kita hapus akan mempunyai arti yang sama, jadi buat apa menyimpannya jika kode tersebut tidak berguna, lebih baik dihapus bukan.!, jadi silahkan periksa kode HTML template anda, jika masih terdapat lekukan silahkan langsung dihapus saja agar template lebih SEO Friendly dan Valid HTML5.

2. FUNGSI KODE DAN PENGHAPUSAN

Trik Ini didasarkan pada pemahaman fungsi kode tersebut pada template, jika anda tidak paham akan kode tersebut untuk menampilkan apa pada blog, jangan nekad untuk menghapus ya, (bisa brabeh urusannya) hehe..!!
Untuk tahap penghapusan saya akan ambil contoh menggunakan kode berikut :

Kode I
<b:include name='quickedit'/>

Kode II
<b:include data='post' name='postQuickEdit'/>

Kode III
<div class='post-share-buttons goog-inline-block'>sampai kode penutup </div> pertama

Kode IV
<b:includable id='postQuickEdit' var='post'>
<b:if cond='data:post.editUrl'>
<span expr:class='&quot;item-control &quot; + data:post.adminClass'>
<a expr:href='data:post.editUrl' expr:title='data:top.editPostMsg'>
<img alt='' class='icon-action' height='18' src='http://img2.blogblog.com/img/icon18_edit_allbkg.gif' width='18'/>
</a>
</span>
</b:if>
</b:includable>

Cari dan Temukan kode I,II,III dan IV pada HTML Template anda, gunakan CTRL+F untuk mempermudah pencarian, kalau sudah ketemu, silahkan langsung dihapus saja.

3. MENGUBAH STRUKTUR KODE HTML

Cara ini merupakan pergantian kode-kode tertentu agar web/blog anda lebih mudah dipahami oleh googlebot index, karena fungsi HTML5 ini merupakan technology HTML multimedia yang telah dikembangkan dari versi sebelumnya dengan tujuan agar content halaman pada blog lebih mudah dimengerti dan mudah terbaca oleh mesin pencari Google (googlebot,spider, dll).

Berikut beberapa kode yang perlu diubah/diganti
<b:include data='blog' name='all-head-content'/>

Hapus kode diatas dan gantikan dengan kode berikut
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<link expr:href='data:blog.homepageUrl + &quot;favicon.ico&quot;' rel='icon' type='image/x-icon'/>
<link expr:href='data:blog.url' rel='canonical'/>

Sampai tahap ini, jika anda melakukannya dengan benar, blog anda sudah mendukung HTML5 Validasi, langkah selanjutnya kembangkan kemampuan anda dalam pemahaman HTML Template Coding Editing secara perlahan.
Demikian tahap sederhana untuk Belajar Mengubah Kode Template Agar Valid HTML5 dari saya. Semoga bermanfaat

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul= Belajar Mengubah Kode Template Agar Valid HTML5
Ditulis oleh= Devy
Rating Blog 5 dari 5
Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip (meng-Copy), baik itu sebagian atau keseluruhan isi dari artikel ini harap menyertakan link dofollow ke >>
= TERIMA KASIH =

45 komentar

  1. jadi tambah ilmu tentang blog nih di sini.
    terima kasih mbk atas penjelasannya tentang Mengubah Kode Template Agar Valid HTML5

    BalasHapus
    Balasan
    1. belajar bersama mas, asal jangan ilmu hitam aja,hehe

      Hapus
  2. wah makasih sharingnya ya sangat bermanfata bagi saya :D thank you ..

    BalasHapus
    Balasan
    1. sama-sama sist friska, alhamdulillah kalau bermanfaat :)

      Hapus
  3. dalam raya kunbal :D
    sya pernah terapin ini mlah jd acak2an ni templateny, kurang ngerti soalnya beginian :D
    mending gni dlu aja dh hhe :D

    BalasHapus
    Balasan
    1. hehe..bener sekali sist, salah-salah hapuf malah berantakan, tetapi jika tidak sekarang kapan lagi keberanian itu lahir, cara diatas sudah saya susun dari yang termudah sampai yang tersulit, belajar lekukan saja dulu sist,untuk tahap selanjutnya pasti akan paham sendiri..

      Hapus
  4. Artikel seperti ini yang lagi aku cari... :)
    Tapi gak berani utak-atik sendiri, gak merasa mahir soalnya.... somebody help me, please.... ^^

    oh iya, mba Devy.... meralat dikiiit, gak apa-apa ya...? istilah untuk menyebut mau belajar dari apa yang dia baca dan ketahui alias belajar sendiri itu disebut Otodidak, bukan Ortodok...
    Maaf yaa kalau aku lancang.... btw, visit back yah :)

    BalasHapus
    Balasan
    1. kalau belum berani belajar sendiri ntar saya dampingi dech,hehe..jika ada kesulitan silahkan tanyakan,ok sist saya juga masih belajar ko.

      oh iya jadi malu,salah sebut istilah ya,maklumlah waktu nulis artikel ini jam 3pagi jadi campur sedikit ngantuk dech, terimakasih sudah dibenarkan ya sist,

      Hapus
  5. nyimak aja sist,,,
    belum belajar html

    BalasHapus
    Balasan
    1. sipp..suatu saat pasti bisa,saya doain dech,,hehe

      Hapus
  6. sangat membantu sekali bos, thx yia....

    BalasHapus
  7. siiiplah, makin pinter aja aku jadinya setelah baca2 disini :D

    BalasHapus
    Balasan
    1. adduh mas bisa aja, justru mas yang banyak mengajarkan saya lewat artikel blog mas

      Hapus
  8. ccocok, bisa blajar disini, maksih mba'

    BalasHapus
  9. nah yang jadi pertanyaan sekarang ya mbak kalau di validkan malah tampilan layout jadi tidak karuan itu bagaimana mbak

    BalasHapus
    Balasan
    1. padding dengan nilai nol atau backgroun dengan value none jika kita hapus maka akan membuat tampilan layout acak-acakan, kita harus jeli tentang kode margin,
      karena ada saatnya kapan kita menggunakan pixel,dan em untuk ukuran layout,
      seperti misal ukuran font:11px, kita bisa gunakan dengan 120%, seperti margin:12px,kita bisa ganti menjadi 2em untuk naik dan -2em untuk turun mengaturnya,
      semoga dapat membantu

      Hapus
  10. Kalau saya masih sedikit bingung tentang artikel di atas, tetapi saya akan mencoba untuk mengutak-atik sehingga blog saya benar-benar valid html5, terima kasih

    BalasHapus
    Balasan
    1. kebingungannya dimana bang, karena versi HTML saat ini untuk rekomendasi SEO google adalah HTML5 oleh W3C, sehingga tanpa kita harus mengganti template,kita bisa mengubah element kode HTML-nya menjadi valid HTML5.
      salah satunya adalah yang saya sebutkan di artikel ini,
      coba check validitas HTML blog abang, maka abang akan tahu berapa banyak kode yang error dan harus kita perbaiki

      Hapus
  11. kalau saya masih level newbie jauh mbak, jadinya saya suka pakai template yg sdh valid html5 aja tinggal langsung pakai, lalu tinggal memvalidkan isinya lagi dikit2, hehehe :D

    makasih sharingnya akan saya gunakan utk belajar :)

    BalasHapus
    Balasan
    1. lebih praktis ya mbak, hanya saja kita kudu mengganti tempalenya dahulu mencari yang sudah v-HTML5,
      saya sendiri menggunakan HTML versi 4 mbak,kode HTML-nya saya rubah ke-5 dan banyak kode yang saya hapus dan ganti, alhasil 99% HTML5 dengan kesalahan kode minim dengan 1 error dan 2 warning, lumayan mbak,,
      heheh

      Hapus
  12. perlu pelan pelan dan butuh waktu senggang nih buat pelajari ilmu mengubah kode supaya valid nya nih...besok balik lagi ah

    BalasHapus
    Balasan
    1. dengan senang hati mas, blog saya terbuka buat umum kok heheh,jika ada yang kurang dipahami,mari sama-sama kita bahas, saya akan bantu sebisa mungkin

      Hapus
  13. Boleh juga nih ilmunya Mbak, siap untuk dicoba Mbak

    BalasHapus
    Balasan
    1. berbagi ilmu itu kan ibadah mas,,hehe
      silahkan dicoba mas, tapi sebelumnya cek dahulu validasi HTML tmplatenya pada link diatas, untuk mengetahui berapa banyak kode yang error,sehingga mudah memperbaikinya

      Hapus
  14. knp kode 1-4 ditemplate sy ngak ada ya??

    BalasHapus
  15. saya hanya ambil contoh elemen dasar pada markup template mas, karena semua template kode diatas pasti ada, karena kode tersebut untuk menampilkan pengeditan cepat dalam halaman, seperti gambar tang dan obeng jika pada template default blogger.
    jika kita belum merasa menghapus kode itu berarti tanda tanya besar..??

    BalasHapus
  16. Oh gitu ya, mungkin sy lupa klao udah dihapus, tapi tanda tanyanya jangan besar2 ahh, seram.. hehehe

    BalasHapus
  17. Boleh tanyakah???
    kalau cara mengetahui dan memperbaiki crip eror dan warning yg ditunjuk oleh http://validator.w3.org bagaimana ya?

    BalasHapus
    Balasan
    1. sebenarnya kode error dan warning itu berlaku pada HTML versi 5, jika sebelumnya pada template ada kode yang menurut W3C itu berarti kode tersebut tidak valid, karena jika kita ingin mengubah template ke v-HTML5 mau tidak mau kita harus menghapus kode yang tidak valid, contohnya kode & tidak valid,berarti yang valid adalah &am, berarti kode & harus dirubah menjadi &am;

      untuk mengetahui dimana letak kode errornya,centang semua pilihan dibawah saat anda masuk kesitus W3C. scroll kebawah,maka akan ada angka, klik angka tersebut, disanalah letak kode erornya pada template

      Hapus
  18. Ohh gitu, paham dah. Berarti sebelum v templat diganti ke v5 sampai jenggot berantakan juga ga bs sempurna ya?
    Sy udah coba cari tamplate toko OL yg V5 ga ada, paling banyak V1 & V2 maklum cari yang geratisan, hehehe...
    TQ Sis buat pencerahanya.
    NB. Buat Agan or Sista yg punya Template Toko OL V4 or 5 yg berbaik hati, boleh x bagi2..

    BalasHapus
    Balasan
    1. saya menggunakan template versi 3.2 mas, tetapi saya validkan ke HTML5, cukup dengan menghapus kode error dari pemberitahuan W3C validator, alhasil template saya sudah valid HTML5, hanya ada 1 kode error dan 2 warning yang bersumber dari kode iklan, sengaja belum diperbaiki,karena masa iklan belum berakhir,,
      hehe

      Hapus
  19. wah mantap bgt mba tutorialnya,, coz saya masih pake template jadus,, mau ganti tapi sayang,, akhirnya ada jg tutorial ini,,hehe

    BalasHapus
  20. tapi kode no 3 yang mw dihapus ga ada gimana mba?? apakah masih bisa berjalan dg mulus, hee

    BalasHapus
  21. template default blogger pasti selalu ada kode ini mas, ini kode share sosial editing, biasanya letaknya dibawah <b:widget........</b:widget>
    tetapi jika tidak ada mungkin sudah terhapus

    BalasHapus
  22. wahh terima kasih gan saya coba dan akhirnya berhasil bisa dilihat atau di ratinjau template saya www.syahdanshare.com

    BalasHapus
  23. hehe kan saya jujur, ga bisa kalau ga ada orang-orang yang mau berbagi seperti mbak devy.

    BalasHapus
  24. ketemu tp ga tau benerinya, spt: > , &, diganti sama apa, atau dihapus..?

    BalasHapus
    Balasan
    1. validasi mbak, sekarang template blogger sudah sangat dianjurkan untuk menggunakan versi yang terakhir yaitu HTML-5, jadi kode & sudah tidak dianggap valid lagi oleh W3C,

      jangan dihapus mbak, tetapi ganti menjadi seperti ini:
      [pre]&am;[/pre]

      Hapus
  25. yoo berhasil hehe.. kalo yang > ganti sama apa mba...

    BalasHapus
  26. Pungsi Kode dan Penghapusan di atas saya hanya mendapatkan kode No 1 saja mbak di hapus saja ya..??? tapi takut gak ea..!!!

    BalasHapus
    Balasan
    1. gak ada yang marah dan tidak bakalan ditangkap POLISI kok mas kalau dihapus, tetapi kalau masih takut, ntar aja hapusnya, tunggu sampai mas berani menghapusnya..

      Hapus
  27. untuk kode III dan IV sepertinya sudah jarang muncul di template, kode I dan II masih ada. Makasih infonya mbak

    BalasHapus

  • Design
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JQuery
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • CSS
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • HTML
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JavaScript
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK