Cara Penulisan dan Menyimpan Kode HTML di blogspot

Pembahasan cara-cara menyimpan kode HTML di template blogger-blogspot secara khusus dengan harapan bahwa para blogger yang masih dalam tahap belajar memodifikasi blog dapat melakukan proses penyimpanan kode HTML dengan benar.
Kekeliruan pada penggunaan tag style (). Bukan cara menuliskannya tetapi ketika kode CSS di simpan di atas kode ]]></b:skin>. Kasus yang banyak terjadi adalah melakukan penyimpanan kode CSS di atas kode tersebut dengan tetap mengikutsertakan tag style. meskipun kelihatannya seperti hal yang teramat sederhana, namun penggunaan tag style tersebut di atas kode ]]></b:skin> justru akan merusak desain yang telah direncanakan (di buat).

Menyimpan Kode CSS

Ada 4 cara dan tempat menyimpan kode CSS:

1. Menyimpan kode CSS di atas kode ]]>.
2. Menyimpan kode CSS di bawah kode ]]>.
3. Menyimpan kode CSS di tag body (antara tag pembuka body - dan tag penutup body - .
4. Menyimpan kode CSS dalam bentuk link. Kode CSS dalam bentuk link adalah kode CSS telah di upload terlebih dahulu di file Hosting (contoh: <link href="http://...../goodude/kode-css.css" rel="stylesheet" type="text/css" />).

Cara menyimpan kode CSS di atas kode ]]>

Untuk menyimpan kode CSS di atas kode ]]> anda tidak perlu menggunakan tag style.
Cara menyimpan yang salah
Perhatikan penggunaan tag style!

<style type="text/css">
.box {
width: 400px;
height: 200px;
padding: 10px;
border: 2px solid green;
margin: 20px auto;
overflow: auto;
color: white;
background: black;}
</style>
]]></b:skin>

Cara Menyimpan yang benar

.box { width: 400px;
height: 200px;
padding: 10px;
border: 2px solid green;
margin: 20px auto;
overflow: auto;
color: white;
background: black; }
]]></b:skin>

Menyimpan Kode CSS di bawah kode ]]> 

Untuk menyimpan kode CSS di bawah kode ]]>, silahkan lakukan penyimpanan dengan menggunakan tag style. Contoh cara penyimpanan kode CSS di bawah ]]>

]]></b:skin>
<style type="text/css">
.box { width: 400px; height: 200px; padding: 10px; border: 2px solid green; margin: 20px auto; overflow: auto; color: white; background: black; }
</style>

Cara menyimpan kode CSS di bagian body di antara tag dan tag (lewat Add a Gadget.
Contoh Penyimpanan Kode CSS yang BENAR pada Elemen Laman

<style type="text/css">
.box { width: 400px; height: 200px; padding: 10px; border: 2px solid green; margin: 20px auto; overflow: auto; color: white; background: black; }
</style>

Contoh Penyimpanan Kode CSS yang SALAH pada Elemen Laman
Perhatikan kode CSS ini di simpan melalui Add a Gadget tanpa tag style

.box { width: 400px; height: 200px; padding: 10px; border: 2px solid green; margin: 20px auto; overflow: auto; color: white; background: black; }

Menyimpan kode CSS berbentuk link. Kode CSS dalam bentuk link seperti contoh berikut:

<link href="http://wimg.co.uk/53P/tooltip.css" rel="stylesheet" type="text/css" media="all" />

dapat disimpan di atas kode , di bawah kode ]]>, di atas tag penutup body ("") atau melalui Add a Gadget --> HTML/Javascript.. Silahkan pilih tempat yang paling anda suka.

Cara Menyimpan javascript
Javascript dapat di simpan di atas kode (paling sering/umum dilakukan), di bawah , di bawah ]]>, di bawah , di atas (paling sering/umum dilakukan) atau melalui Add a Gadget --> HTML/Javascript (juga banyak dilakukan dengan cara ini).

Contoh penulisan javascript-1

<script type="text/javascript">
function show_alert() { alert("Hello, world! whats are u doing ?"); }
</script>

Contoh penulisan javascript-2

<script type="text/javascript"> //<![CDATA[ /* kode khusus - pembuka*/
function show_alert() { alert("Hello, world! whats are u doing?"); }
//]]> /* kode khusus - penutup */
</script>

Apabila javascript telah di upload di file/javascript hosting, penyimpanan dapat dilakukan di atas , di atas atau lewat Add a Gadget (tergantung sifat javascript-perhatikan perintah tutorial!). Javascript yang telah di upload dituliskan sebagai sebuah link dengan cara seperti ini:

<script src="http://wimg.co.uk/k8W/goodude/js/anima.js" type="text/javascript"></script>

atau

<script src="http://wimg.co.uk/k8W/goodude/js/anima.js" language="javascript"></script>

atau

<script src="http://wimg.co.uk/k8W/goodude/js/anima.js" type="text/javascript" language="javascript"></script>

Penulisan xHTML
xHTML disimpan dalam tag body diantara tag pembuka body - dan tag penutup body - baik dilakukan secara langsung di template (Edit HTML) atau melalui Add a Gadget dan di halaman posting

Contoh penulisan xHTML

<div style="width: 400px; height: 200px; background: #000; color: #eee; font-size: 14px;
border: 2px solid red">
welcome to goodude,semoga anda menikmati berita dan tutorial dari kami!
welcome to goodude,semoga anda menikmati berita dan tutorial dari kami!
welcome to goodude,semoga anda menikmati berita dan tutorial dari kami!
</div>

Posted in: