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
Kode II
Kode III
Kode IV
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
Hapus kode diatas dan gantikan dengan kode berikut
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
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='"item-control " + 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>
<b:if cond='data:post.editUrl'>
<span expr:class='"item-control " + 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 + "favicon.ico"' rel='icon' type='image/x-icon'/>
<link expr:href='data:blog.url' rel='canonical'/>
<link expr:href='data:blog.homepageUrl + "favicon.ico"' 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 >>
jadi tambah ilmu tentang blog nih di sini.
BalasHapusterima kasih mbk atas penjelasannya tentang Mengubah Kode Template Agar Valid HTML5
belajar bersama mas, asal jangan ilmu hitam aja,hehe
Hapuswah makasih sharingnya ya sangat bermanfata bagi saya :D thank you ..
BalasHapussama-sama sist friska, alhamdulillah kalau bermanfaat :)
Hapusdalam raya kunbal :D
BalasHapussya pernah terapin ini mlah jd acak2an ni templateny, kurang ngerti soalnya beginian :D
mending gni dlu aja dh hhe :D
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..
HapusArtikel seperti ini yang lagi aku cari... :)
BalasHapusTapi 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 :)
kalau belum berani belajar sendiri ntar saya dampingi dech,hehe..jika ada kesulitan silahkan tanyakan,ok sist saya juga masih belajar ko.
Hapusoh iya jadi malu,salah sebut istilah ya,maklumlah waktu nulis artikel ini jam 3pagi jadi campur sedikit ngantuk dech, terimakasih sudah dibenarkan ya sist,
nyimak aja sist,,,
BalasHapusbelum belajar html
sipp..suatu saat pasti bisa,saya doain dech,,hehe
Hapussangat membantu sekali bos, thx yia....
BalasHapusterimakasih kembali sob
Hapussiiiplah, makin pinter aja aku jadinya setelah baca2 disini :D
BalasHapusadduh mas bisa aja, justru mas yang banyak mengajarkan saya lewat artikel blog mas
Hapusccocok, bisa blajar disini, maksih mba'
BalasHapussama-sama mas
HapusKalau saya masih sedikit bingung tentang artikel di atas, tetapi saya akan mencoba untuk mengutak-atik sehingga blog saya benar-benar valid html5, terima kasih
BalasHapuskebingungannya 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.
Hapussalah 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
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
BalasHapusmakasih sharingnya akan saya gunakan utk belajar :)
lebih praktis ya mbak, hanya saja kita kudu mengganti tempalenya dahulu mencari yang sudah v-HTML5,
Hapussaya 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
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,
BalasHapuskarena 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
perlu pelan pelan dan butuh waktu senggang nih buat pelajari ilmu mengubah kode supaya valid nya nih...besok balik lagi ah
BalasHapusdengan 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
HapusBoleh juga nih ilmunya Mbak, siap untuk dicoba Mbak
BalasHapusberbagi ilmu itu kan ibadah mas,,hehe
Hapussilahkan dicoba mas, tapi sebelumnya cek dahulu validasi HTML tmplatenya pada link diatas, untuk mengetahui berapa banyak kode yang error,sehingga mudah memperbaikinya
knp kode 1-4 ditemplate sy ngak ada ya??
BalasHapussaya 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.
BalasHapusjika kita belum merasa menghapus kode itu berarti tanda tanya besar..??
Oh gitu ya, mungkin sy lupa klao udah dihapus, tapi tanda tanyanya jangan besar2 ahh, seram.. hehehe
BalasHapusBoleh tanyakah???
BalasHapuskalau cara mengetahui dan memperbaiki crip eror dan warning yg ditunjuk oleh http://validator.w3.org bagaimana ya?
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;
Hapusuntuk 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
Ohh gitu, paham dah. Berarti sebelum v templat diganti ke v5 sampai jenggot berantakan juga ga bs sempurna ya?
BalasHapusSy 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..
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,,
Hapushehe
wah mantap bgt mba tutorialnya,, coz saya masih pake template jadus,, mau ganti tapi sayang,, akhirnya ada jg tutorial ini,,hehe
BalasHapustapi kode no 3 yang mw dihapus ga ada gimana mba?? apakah masih bisa berjalan dg mulus, hee
BalasHapustemplate default blogger pasti selalu ada kode ini mas, ini kode share sosial editing, biasanya letaknya dibawah <b:widget........</b:widget>
BalasHapustetapi jika tidak ada mungkin sudah terhapus
saya masih belum paham
BalasHapuswahh terima kasih gan saya coba dan akhirnya berhasil bisa dilihat atau di ratinjau template saya www.syahdanshare.com
BalasHapushehe kan saya jujur, ga bisa kalau ga ada orang-orang yang mau berbagi seperti mbak devy.
BalasHapusketemu tp ga tau benerinya, spt: > , &, diganti sama apa, atau dihapus..?
BalasHapusvalidasi mbak, sekarang template blogger sudah sangat dianjurkan untuk menggunakan versi yang terakhir yaitu HTML-5, jadi kode & sudah tidak dianggap valid lagi oleh W3C,
Hapusjangan dihapus mbak, tetapi ganti menjadi seperti ini:
[pre]&am;[/pre]
yoo berhasil hehe.. kalo yang > ganti sama apa mba...
BalasHapusPungsi Kode dan Penghapusan di atas saya hanya mendapatkan kode No 1 saja mbak di hapus saja ya..??? tapi takut gak ea..!!!
BalasHapusgak ada yang marah dan tidak bakalan ditangkap POLISI kok mas kalau dihapus, tetapi kalau masih takut, ntar aja hapusnya, tunggu sampai mas berani menghapusnya..
Hapusuntuk kode III dan IV sepertinya sudah jarang muncul di template, kode I dan II masih ada. Makasih infonya mbak
BalasHapus