Sebelumnya silakan cek dulu untuk mengetahui valid tidaknya blog buka situs https://validator.w3.org/
dan untuk mengetahui ukuran berat blog silakan buka situs: klik disini
(tidak termasuk/sebelum postingan ini)
Template yang saya gunakan beberapa jam yang lalu sebelum postingan ini memang sebelumnya sudah responsive tersesuai dengan tampilan seluler, Johny Ajaib namanya Karya Maskolis Creating Website.
Kalo pengen download silakan klik link dibawah bagian foter blog ini, bahkan template ini belum saya apa-apai, begitu selesai download langsung buat praktek ngetest memvalidkannya, dan ternyata berhasil , yach hitungan satu gelas kopi separo bungkus rokoklah selesai atau memang bawaan template dibuat mudah. setelah beberapa jam kemudian saya coba postingkan cara-nya. Ketika saya cek sebelumnya template Johny Ajaib lewat demonya, hasilnya: ukuran berat johny-ajaib.blogspot.com = 55.66 KB dan 29 Errors, 3 warning(s), berbeda dengan template pendahulunya Johny-Wusss yaitu : ukuran berat johny-wusss.blogspot.com = 45.41 KB dan 3 Errors, 1 warning(s). karena responsivenya saya coba menggunakan johny ajaib.
Untuk melihat klik Johny Wusss
Mungkin ini merupakan bukti pentingnya template Valid HTML5, menjadikan template lebih fast ringan loadingnya karena ukuran beratnya berkurang, lebih nyaman jika terlebih dahulu blognya responsive, sehingga pengguna ponsel mudah berkunjung kan sekarang pengguna internet banyak pake handpone.
Mungkin ini merupakan bukti pentingnya template Valid HTML5, menjadikan template lebih fast ringan loadingnya karena ukuran beratnya berkurang, lebih nyaman jika terlebih dahulu blognya responsive, sehingga pengguna ponsel mudah berkunjung kan sekarang pengguna internet banyak pake handpone.
Padahal template ini mau saya bagikan kembali mungkin lain kali bila ada waktu, soalnya newbie, ini postingan baru yang kedua kali, mungkin termasuk test posting seperti postingan sebelumnya yang cuma satu gambar doang Banjarbaru Regency
Okey kembali kepokok pembahasan.
Cara Membuat Blog Valid HTML5:
1. Pertama, buka edit template kayanya sekarang klik expant widget sudah gak ada lagi, jangan lupa amankan template simpan dinotepad kemudian cari kode paling atas template seperti dibawah ini atau seperti:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns='https://www.w3.org/1999/xhtml' xmlns:b='https://www.google.com/2005/gml/b' xmlns:data='https://www.google.com/2005/gml/data' xmlns:expr='https://www.google.com/2005/gml/expr'>
2. Kedua, Hapus kode tersebut dan gati dengan kode dibawah ini:
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<HTML>
<head>
<meta charset='utf-8'/>
Dan ganti kode </html> terletak paling bawah dengan kode </HTML> (huruf besar).
3. Ketiga, Cari <b:include name='nextprev'/> kemudian ganti dengan:
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<!-- navigation -->
<b:include name='nextprev'/>
</b:if>
Catatan: Untuk pengguna template Johny Ajaib sepertinya langkah ketiga ini tidak perlu.
4. Kempat, Cari kode <b:skin><![CDATA[ ganti dengan:
<link href='//www.blogger.com/static/v1/widgets/3950009988-widget_css_bundle.css' rel='stylesheet' type='text/css'/>
<style type="text/css"> <!-- /*<b:skin><![CDATA[*/]]
<style>
5. Kelima, Cek dulu tampilan blog, biasa langkah keempat bila kurang pas bawaan template bisa merubah keadaan tampilan. Kalo sudah lanjut cari kode <body> bila ketemu letakkan kode berikut diatasnya:
<!-- <body><div></div> -->
6. Keenam, Cari dan hapus semua kode: <b:include name='quickedit'/> kode ini termasuk penyumbang error terbanyak biasa disebabkan gonta-ganti tambah widget.
7. Ketujuh, Setelah itu cari kode javascript tambahkan code type='text/javascript' pada tag <script> dan untuk CSS tambahkan type='text/css' pada tag <style> sehingga menjadi seperti di bawah ini:
<script type='text/javascript'> dan <style type='text/css'>
8. Kedelapan, Pada gambar jangan lupa tambahkan tag title="titel gambar" dan img alt="kode gambar".gambar kecil sebaiknya gunakan format gif atau png. pada gambar hapus kode border="0" dan imageanchor="1" .
Contoh:
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrNrSn88cZP1Zm9ojW3TnVVRpTW7B6lfSmtqjdYQ6ad8qGQN8c078VWHM975-8t6f_qy066iTlHyOZCoGEYOgd4pF9OFIbN-cwOjdlQVh6Klx7yK-P9PIJbn9rpnULBzlQfm0rIgxftFE/s1600/valid+html5.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="93" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrNrSn88cZP1Zm9ojW3TnVVRpTW7B6lfSmtqjdYQ6ad8qGQN8c078VWHM975-8t6f_qy066iTlHyOZCoGEYOgd4pF9OFIbN-cwOjdlQVh6Klx7yK-P9PIJbn9rpnULBzlQfm0rIgxftFE/s400/valid+html5.jpg" width="400" /> </a>
Sehingga menjadi:
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrNrSn88cZP1Zm9ojW3TnVVRpTW7B6lfSmtqjdYQ6ad8qGQN8c078VWHM975-8t6f_qy066iTlHyOZCoGEYOgd4pF9OFIbN-cwOjdlQVh6Klx7yK-P9PIJbn9rpnULBzlQfm0rIgxftFE/s1600/valid+html5.jpg" style="margin-left: 1em; margin-right: 1em;"> <img alt="valid+html5" height="93" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrNrSn88cZP1Zm9ojW3TnVVRpTW7B6lfSmtqjdYQ6ad8qGQN8c078VWHM975-8t6f_qy066iTlHyOZCoGEYOgd4pF9OFIbN-cwOjdlQVh6Klx7yK-P9PIJbn9rpnULBzlQfm0rIgxftFE/s400/valid+html5.jpg" title="valid+html5" width="400" /> </a>
9. Kesembilan, cari tanda ----------------------- */ atau tanda /* ------------------------------ hapus garis-garisnya contoh:
/* Header------------------- */ sehingga menjadi pendek atau seperti: /* Header*/
10. Kesepuluh, Cari kode <center> ganti dengan <div style='text-align:center;'> dan pada penutup elemennya </center> ganti dengan </div>
11. Kesebelas, Cari kode: onClick ganti dengan onclick (huruf C ditengah menjadi huruf kecil)
12. Keduabelas, Jika perlu, cari kode b:include data='blog' name='all-head-content'/> hapus dan ganti dengan meta tag manual, dan hapus semua meta tag yang dianggap error oleh Markup Validation Service.
13. Ketigabelas, Cari kode :
4. Kempat, Cari kode <b:skin><![CDATA[ ganti dengan:
<link href='//www.blogger.com/static/v1/widgets/3950009988-widget_css_bundle.css' rel='stylesheet' type='text/css'/>
<style type="text/css"> <!-- /*<b:skin><![CDATA[*/]]
<style>
5. Kelima, Cek dulu tampilan blog, biasa langkah keempat bila kurang pas bawaan template bisa merubah keadaan tampilan. Kalo sudah lanjut cari kode <body> bila ketemu letakkan kode berikut diatasnya:
<!-- <body><div></div> -->
6. Keenam, Cari dan hapus semua kode: <b:include name='quickedit'/> kode ini termasuk penyumbang error terbanyak biasa disebabkan gonta-ganti tambah widget.
7. Ketujuh, Setelah itu cari kode javascript tambahkan code type='text/javascript' pada tag <script> dan untuk CSS tambahkan type='text/css' pada tag <style> sehingga menjadi seperti di bawah ini:
<script type='text/javascript'> dan <style type='text/css'>
8. Kedelapan, Pada gambar jangan lupa tambahkan tag title="titel gambar" dan img alt="kode gambar".gambar kecil sebaiknya gunakan format gif atau png. pada gambar hapus kode border="0" dan imageanchor="1" .
Contoh:
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrNrSn88cZP1Zm9ojW3TnVVRpTW7B6lfSmtqjdYQ6ad8qGQN8c078VWHM975-8t6f_qy066iTlHyOZCoGEYOgd4pF9OFIbN-cwOjdlQVh6Klx7yK-P9PIJbn9rpnULBzlQfm0rIgxftFE/s1600/valid+html5.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="93" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrNrSn88cZP1Zm9ojW3TnVVRpTW7B6lfSmtqjdYQ6ad8qGQN8c078VWHM975-8t6f_qy066iTlHyOZCoGEYOgd4pF9OFIbN-cwOjdlQVh6Klx7yK-P9PIJbn9rpnULBzlQfm0rIgxftFE/s400/valid+html5.jpg" width="400" /> </a>
Sehingga menjadi:
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrNrSn88cZP1Zm9ojW3TnVVRpTW7B6lfSmtqjdYQ6ad8qGQN8c078VWHM975-8t6f_qy066iTlHyOZCoGEYOgd4pF9OFIbN-cwOjdlQVh6Klx7yK-P9PIJbn9rpnULBzlQfm0rIgxftFE/s1600/valid+html5.jpg" style="margin-left: 1em; margin-right: 1em;"> <img alt="valid+html5" height="93" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrNrSn88cZP1Zm9ojW3TnVVRpTW7B6lfSmtqjdYQ6ad8qGQN8c078VWHM975-8t6f_qy066iTlHyOZCoGEYOgd4pF9OFIbN-cwOjdlQVh6Klx7yK-P9PIJbn9rpnULBzlQfm0rIgxftFE/s400/valid+html5.jpg" title="valid+html5" width="400" /> </a>
9. Kesembilan, cari tanda ----------------------- */ atau tanda /* ------------------------------ hapus garis-garisnya contoh:
/* Header------------------- */ sehingga menjadi pendek atau seperti: /* Header*/
10. Kesepuluh, Cari kode <center> ganti dengan <div style='text-align:center;'> dan pada penutup elemennya </center> ganti dengan </div>
11. Kesebelas, Cari kode: onClick ganti dengan onclick (huruf C ditengah menjadi huruf kecil)
12. Keduabelas, Jika perlu, cari kode b:include data='blog' name='all-head-content'/> hapus dan ganti dengan meta tag manual, dan hapus semua meta tag yang dianggap error oleh Markup Validation Service.
13. Ketigabelas, Cari kode :
<span class='post-icons'>
<!-- email post links -->
<b:if cond='data:post.emailPostUrl'>
<span class='item-action'>
<a expr:href='data:post.emailPostUrl' expr:title='data:top.emailPostMsg'>
<img alt='' class='icon-action' height='13' src='https://img1.blogblog.com/img/icon18_email.gif' width='18'/>
</a>
</span>
</b:if>
<!-- quickedit pencil -->
<b:include data='post' name='postQuickEdit'/>
</span> <div class='post-share-buttons'>
<b:include data='post' name='shareButtons'/>
</div> </div>
Kemudian ganti dengan:
<span class='post-icons'>
<!-- email post links -->
<b:if cond='data:post.emailPostUrl'>
</b:if>
</span>
</div>
14. Keempatbelas, diicek terjadi kesalahan duplikat ID, maka pada kode css: "# " ganti dengan "." contoh: #artigo ganti dengan .artigo dan pada html : <div id='artigo'> ganti dengan <div class='artigo'>
15. Kelimabelas, Jika setelah posting terjadi error valid padahal isi postingan tidak ada yang error, maka coba pada settingan bahasa pilih bahasa Inggris dan non aktifkan translate.
16. Keempatbelas, Cari dan hapus kode berikut: <a expr:name='data:post.id'/>
Selesai. Silakan cek kembali di www.w3.org, tinggal berapa errornya dan berapa ukuran beratnya.
15. Kelimabelas, Jika setelah posting terjadi error valid padahal isi postingan tidak ada yang error, maka coba pada settingan bahasa pilih bahasa Inggris dan non aktifkan translate.
16. Keempatbelas, Cari dan hapus kode berikut: <a expr:name='data:post.id'/>
Selesai. Silakan cek kembali di www.w3.org, tinggal berapa errornya dan berapa ukuran beratnya.
Langkah berikutnya: adalah khusus pengguna template Johny Ajaib kecuali buat acuan.
17. Kelimabelas, Cari kode: <div class='menusearch'> seperti gambar dibawah,
Mungkin arti garis keterangannya kode div tidak diperbolehkan menimpa kode ul.
Sehingga kode harus dipindah posisinya maka tarik kebawah dari kode <div class='menusearch'> hingga sebelum kode </ul> tandai kode keseluruhannya:
<div class='menusearch'>
<form action='/search' class='searchform' method='get'>
<input class='searchfield' id='q' name='q' onblur='if(this.value=='')this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=''' type='text' value='Search here....'/>
<input class='searchbutton' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQDWlH0BNc-9gxH1WwJPXcbYl2do7clK2kE4byR9oFS0tcS1TOgWAstcIKmwP6G96Fx_DDxA23lJpde2SFJDE_j7rEetbmSeTk0fhjlCLr8_cW9rH1MTpB02DstcNQOwL56F9eAWp5pLg/s1600/tombolcari.gif' style='cursor:pointer;vertical-align:top' type='image' value='Go'/>
</form>
</div>
Kemudian pindah keatas: posisi tepatnya menjadi seperti contoh dibawah ini:
<li><a href='/'>Home</a></li>
<li><a href='#'>Menu 1</a></li>
<li><a class='prett' href='#'>Drop Menu</a>
<ul class='menus'>
<li><a href='#'>Drop Menu 1</a></li>
<li><a href='#'>Drop Menu 2</a></li>
<li><a href='#'>Drop Menu 3</a></li>
</ul>
</li>
<li><a href='#'>Menu 2</a></li>
<li><a class='prett' href='#'>Drop Menu 1</a>
<ul class='menus'>
<li><a href='#'>Drop Menu 1</a></li>
<li><a href='#'>Drop Menu 2</a></li>
<li><a href='#'>Drop Menu 3</a></li>
</ul>
</li>
</ul>
</nav>
<div class='menusearch'>
<form action='/search' class='searchform' method='get'>
<input class='searchfield' id='q' name='q' onblur='if(this.value=='')this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=''' type='text' value='Search here....'/>
<input class='searchbutton' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQDWlH0BNc-9gxH1WwJPXcbYl2do7clK2kE4byR9oFS0tcS1TOgWAstcIKmwP6G96Fx_DDxA23lJpde2SFJDE_j7rEetbmSeTk0fhjlCLr8_cW9rH1MTpB02DstcNQOwL56F9eAWp5pLg/s1600/tombolcari.gif' style='cursor:pointer;vertical-align:top' type='image' value='Go'/>
</form>
</div>
<div class='page-menu'>
<b:section class='page' id='page' showaddelement='yes'>
<b:widget id='PageList1' locked='false' title='Pages' type='PageList'>
<b:includable id='main'>
<div class='widget-content'>
<ul>
<b:loop values='data:links' var='link'>
<b:if cond='data:link.isCurrentPage'>
<li class='selected'><a expr:href='data:link.href'><data:link.title/></a></li>
<b:else/>
<li><a expr:href='data:link.href'><data:link.title/></a></li>
</b:if>
</b:loop>
</ul>
Kode berwarna hijau kode pindahan
18. Keenambelas, Masih seperti kode diatas tadi yaitu:
<div class='menusearch'>
<form action='/search' class='searchform' method='get'>
<input class='searchfield' id='q' name='q' onblur='if(this.value=='')this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=''' type='text' value='Search here....'/>
<input class='searchbutton' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQDWlH0BNc-9gxH1WwJPXcbYl2do7clK2kE4byR9oFS0tcS1TOgWAstcIKmwP6G96Fx_DDxA23lJpde2SFJDE_j7rEetbmSeTk0fhjlCLr8_cW9rH1MTpB02DstcNQOwL56F9eAWp5pLg/s1600/tombolcari.gif' style='cursor:pointer;vertical-align:top' type='image' value='Go'/>
</form>
</div>
Kemudian hapus aja dah gambar kecil didalam menu pencarian atau kode berwarna biru diatas.
19. Ketujuhbelas, Cari kode dibawah dan hapus:
<b:if cond='data:top.showDummy'>
<script expr:src='data:top.dummyUrl'/>
</b:if>
20. Ketujuhbelas, untuk template umum, Saya sarankan sebaiknya non aktifkan aza tampilan selulernya tetapi jika ingin mengaktifkan pada setting template pilih tampilan seluler tersesuai. cara menampilkan tampilan widget pada tampilan seluler tinggal tambah kode mobil='yes'. misal untuk menampilkan sideba Popular Post, cari kode seperti dibawah ini:
<div class='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' showaddelement='yes'>
<b:widget id='PopularPosts1' locked='false' mobile='yes' title='Popular Posts' type='PopularPosts'>
Kode berwarna biru diatas merupakan tambahan kodenya.
21. Selesai.
<b:if cond='data:top.showDummy'>
<script expr:src='data:top.dummyUrl'/>
</b:if>
20. Ketujuhbelas, untuk template umum, Saya sarankan sebaiknya non aktifkan aza tampilan selulernya tetapi jika ingin mengaktifkan pada setting template pilih tampilan seluler tersesuai. cara menampilkan tampilan widget pada tampilan seluler tinggal tambah kode mobil='yes'. misal untuk menampilkan sideba Popular Post, cari kode seperti dibawah ini:
<div class='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' showaddelement='yes'>
<b:widget id='PopularPosts1' locked='false' mobile='yes' title='Popular Posts' type='PopularPosts'>
Kode berwarna biru diatas merupakan tambahan kodenya.
21. Selesai.
Kiranya cukup sekian dulu sedikit berbagi Cara Membuat Blog Valid HTML5 atau Cara Membuat Blog Valid HTML5 template Johny Ajaib karya Mascolis.
Mas Colis telah dikenal sebagai salah seorang blogger proporsional, dan seorang profesional bukan saja seorang ahli tetapi dinilai dari watak dan sikap rendah hatinya, semoga mascolis tidak berubah dan selalu menjadi yang terbaik.
Mas Colis telah dikenal sebagai salah seorang blogger proporsional, dan seorang profesional bukan saja seorang ahli tetapi dinilai dari watak dan sikap rendah hatinya, semoga mascolis tidak berubah dan selalu menjadi yang terbaik.
NB: "Seorang penipu sama pengecutnya dengan seorang pencuri".
Sekian semoga bermanfaat,
Label:
Cara Blogger
