Bagaimana menerapan HTML 5 pada Blog Mania ?
Assalamu'alaikum warakhmatullahi wabarakatuh. Sahabat Bloggers yang selalu segar dan berbahagia, ada pengalaman saya setelah bereksperimen dalam menerapkan HTML 5 Canvas intuk diterapkan pada HTML Bloggers cukup menarik dan menjadi tantangan masa depan yang perlu mendapatkan perhatian. Saya telah melakukan penerapan HTML 5 canvas pada Bloggers sebagaimana ditulis oleh para netters yang lain seperti di tulis Saudaraku Amdas ternyata tidak mudah begitu saja ditulis dan blog menjadi OK, tapi ada effek yang menyebabkan design layout kita di blogger berubah susunannya dan tidak seperti aslinya. Mungkin ini hanya pengalaman saya saja, namun perlu menjadikan perhatian bagi para netters yang bermaksud menerapkan HTML 5 Canvas pada template bloggers, agar tetap berhati-hati atau dipertimbangkan masak-masak apakah template kita memang cocok untuk diterapkan perubahan atau tidak ke HTML 5 Canvas.
Adapun penerapan HTML Canvas seperti dituliskan Saudraku Amdas sebagai berikut:
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<title>HTML5 Tutorial | Belajar HTML5 Canvas</title>
</head>
<body>
</body>
</html>
Tag HTML diatas adalah dasar pemikiran untuk berlatih bagi Anda sebelum menerapkan HTML 5 ke dalam blogger, silahkan sobat mencobanya dengan langkah-langkah sebagai berikut :
- Buka editor teks seperti notepad atau wordpad, bukan Ms Word
- Ketikan kode di atas kedalam notepad atau wordpad.
- Simpan file sebagai file teks dasar dan beri nama yang berakhiran .html (pastikan itu sesuatu seperti namafile.html dan tidak namafile.html.txt. Jika itu terjadi maka kita perlu untuk mengubah nama dan membukanya lagi dalam editor teks).
- Sebelum kita menyimpan file kita harus membuat save As type menjadi All files.
- Bukalah data tersebut melalui editor Komodo atau sejenisnya, Sobat akan melihat penampilan tentang apa yang kita tulis diatas.
Setelah berlatih silahkan Anda mengedit blog dengan teliti namun saran saya jika ANda tertarik untuk memodifikasi HTML template silahkan pertimbangkan terlebih dahulu :
- Jika Anda menggunakan fasilitas internal template blogg baik versi lama atau versi baru akan menghasilkan sesi negatif terhadap serp seacrh engine;
- Karena perubahan yang ANda lakukan akan berakibat pada struktur keseluruhan posting karena adanya tag HTML yang tidak diharapkan oleh HTML5;
- Jika Anda masih menggunakan css versi 1 atau dibawah versi css3, maka akan berpengaruh pada penampilan blog yang tidak menyenangkan bahkan lebih fatal dari itu;
- Solusinya adalah silahkan Anda pergi ke template versi HTML5 yang Anda suka karena sekarang telah banyak tempalte HTML5 yang tersedia dan gratis ataupun yang berbayar, hal tersebut hanya beda pada fasilitas yang digunakan (anatara full dan tidak full);
- Perubahan yang ceroboh akan berakibat pada error template;
- Pelajari terlebih dahulu dasar-dasar tag css dan dasar-dasar HTML;
Apabila Anda sudah mempertimbangkan perihal tersebut atau ada hal lain yang mungkin akan terjadi telah dipertimbangkan yang intinya Anda sudah siap untuk melakukan perubahan silahkan ikuti dengan cermat bagaimana cara menerapkan perubahan template HTML versi 1 tahun 1999 atau pengembangan versi 2005 silahkan ikuti cara berikut ini sebagaimana yang ditulis oleh sahabat saya di "parsell.blogspot.com" yang akan saya infokan dibawah ini.
- Masuklah ke menu dasboard blogger Anda;
- Pilih rancangan >> edit template >> download template lengkap untuk backup;
- Klik expand widget template;
- Lakukan perubahan sebagai berikut;
- Pilihlah Template Jason Sutter (Simple II) yang berada di paling bawah lihat gambar dibawah;
- Kemudian klik simpan perubahan template;
- Perhatikan gambar berikut ini untuk memperjelas info yang saya maksudkan :
- Perubahan Anda telah disimpan dan lihat template setelah itu tutup dan kembali ke template Anda;
- Anda yang telah memiliki template dari pihak luar atau eksternal Blogger (meskipun meskipun desainernya Blogger), maka tindakan tersebut tidak usah dilakukan tapi langsung lakukan perubahan seperti berikut dibawah ini;
- Perhatikan struktur template dari sisi atas sekitar <head> seperti berikut ini;
- Setelah Anda menemukan tag tersebut diatas (catatan bagi Anda yang telah memasukkan dan memodifikasi template maka tidak akan speperti tersebut diatas silahkan menyesuaikan);
- Maksud perubahan ini karena HTML5 lebih simpel sebagaimana diakui oleh pihak W3C sebagai pihak autentifikasi atau yang telah diakui/kompeten dalam hal verifikasi HTML;
- Silahkan ambil tag HTML berikut ini yang sesuai dengan seperti diatas untuk diganti seperti tag HTML berikut ini;
- Selanjutnya carilah tag HTML </head>;
- Setelah ditemukan, silahkan tempatkan tag HTML berikut ini tepat diatasnya hingga berbentuk seperti berikut ini;
- Selanjutnya berikan tag HTML berikut ini <!-- <body><div></div> --> berada tepat dibawah tag </head> sebagai upaya mengurangi error bagi pihak W3C;
- Selanjutnya klik tombol simpan untuk perubahan template Anda;
- Jika terjadi peringatan setelah Anda menekan tombol simpan/save seperti ini:
- Proses penyimpanan berhasil, kemudian silahkan buka blog Anda semoga tampilan blog Anda akan lebih baik;
- Sejauh saya melakukan action tersebut, termasuk pada template ini yang lama (perlu diketahui bahwa blog ini telah dirubah dengan sekian macam template gratis yang memungkinan untuk diterapkan dari template model lama maupun template versi baru blogger) selama itu saya melakukan perubahan termasuk mutasi template ke versi HTML5 seperti sekarang ini, tidak pernah terjadi error paling hanya acak pada posisi widget dan ini tidak fatal.
- Persoalannya adalah perubahan template dari versi lama atau versi baru ke template versi HTML5 akan menyebabkan lambatnya loading blog meskipun telah dilakukan kompresi.
Hal ini telah saya coba pada lima blog saya yang lain dengan jenis template versi lama atau versi baru blogger di blogger. - Oleh karena itu pertimbangkan dengan masak untuk melakukan perubahan seperti saran saya diatas, semoga Anda juga akan berhasil untuk melakukannya.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml'
xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data'
xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'/>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>
<script
src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<!--[if lte IE 7]>
<script src="js/IE8.js"
type="text/javascript"></script><![endif]-->
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" media="all"
href="css/ie6.css"/><![endif]-->
</head>
Peringatan : Template baru Anda tidak berisi widget berikut
.navbar
Ingin mempertahankan widget ini di blog Anda atau menghapusnya?
Penghapusan widget tidak dapat diurungkan.
Pilihlah dengan menekan tombol : HAPUS WIDGET
Demikian tulisan saya yang sedikit ini semoga menjadikan pengalaman baru untuk pengembangan template masa depan. Apakah HTML 5 ? ini akan kita bahas dari situs aslinya sebagai berikut tetaplah bersama saya di info toko surya62 untuk tukar informasi dan imajinasi.
Bisnis terpercaya di Joko Susilo.com dan Stop Dreaming in action Info Toko Surya62. Bisnis spektakuler Best Marketing place, Konten Islami, Bisnis click-bank, Blakblakan Marketing Online, Smart Machine System V 2.0, submit terbaik, MobiGarda-Iphone. Mari cari Uang di Internet bersama dengan klik berikut ini di Info Toko Surya62
No comments:
Post a Comment
Terimakasih Anda telah silaturakhim keblog ini dengan misi didaktik metodik pembelajaran di SMK, sehingga setiap saat dapat berubah sesuai kompetensi Pembelajaran. Silahkan berikan komentar yang sangat berharga demi kemajuan blog ini. Sehubungan dengan hak cipta apabila ada konten Anda disini dengan rendah hati saya mohon ijin memuatnya dan jika tidak berkenan mohon konfirmasinya, Mari berbagi untuk info yang manfaat dan belajar sepanjang hayat, salam sukses buat Anda dan keluarga!!! Klik gambar emoticon berikut jika Anda ingin menggunakannya.