"DEMAS"~drj7: Tips dan Trik Berbagai Cara Menuliskan dan Menyimpan Kode HTML (xHTML, kode CSS, Javascript) di Blog-Template

Catatan BloGgeR kali ini saya dapatkan saat saya berkunjung ke Gubhug nya Cah ndeso Kluthuk tentang cara-cara menyimpan kode HTMl di template blogger-blogspot secara khusus dengan harapan bahwa para blogger yang masih dalam tahap belajar memodifikasi blog (seperti saya!) dapat melakukan proses penyimpanan kode HTML dengan benar.

Penyimpanan kode HTML oleh beberapa blogger, terutama kode CSS, hingga detik ini masih terjadi bannyak kekeliruan pada penggunaan tag style (<style type="text/css"> dan </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 tersebut di atas kode ]]<>/b:skin> justru akan merusak desain yang telah direncanakan (di buat).

Selain hal tersebut di atas catatan ini juga mempunyai manfaat lain saat sebuah blog memberikan tutorial tentang kode HTML.

Lebih mengefektifkan halaman posting.
Menghemat waktu posting.
Memberi tutorial penyimpanan kode HTML secara komprehensif.

Menyimpan Kode CSS

Ada 4 cara dan tempat menyimpan kode CSS:

Menyimpan kode CSS di atas kode ]]></b:skin>.
Menyimpan kode CSS di bawah kode ]]></b:skin>.
Menyimpan kode CSS di tag body (antara tag pembuka body - <body> dan tag penutup body - </body>.
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://...../drj7/kode-csss.css" rel="stylesheet" type="text/css" />).

Agar kode dapat di simpan di halaman "Edit HTML", baik di atas kode ]]></b:skin>, maupun di bawah kode ]]></b:skin>, maka lakukan prosedur berikut:

Login : Login ke Blogger.
- Tuliskan User Name (Nama Pengguna) atau Email Address.
- Masukkan Password (Sandi).
- KLIK "Login". Tunggu beberapa saat hingga halaman "Dasboard" terbuka.
Dasboard : Cari dan klik link "Design (Rancangan)". Kembali tunggu beberapa saat.
Design (Rancangan) : Bagian pertama yang akan anda jumpai adalah "Page Elements (Elemen Laman)". Bukan di sini proses penyimpanan yang akan dilakukan.
Cari dan klik link "Edit HTML". Setelah halaman ini terbuka, maka anda akan melihat halaman yang dipenuhi kode HTML. Disinilah semua kode HTML tersimpan yang berfungsi sebagai pembangun blog. Kode ]]></b:skin> terletak di atas tag pembuka body yang berbentuk <body>. Anda dengan cepat dapat mencari kode-kode di halaman "Edit HTML" ini dengan menggunakan "Ctrl+F". Klik bersamaan di keyboard kemudian tuliskan kode yang akan di cari pada box pencarian kode yang disediakan tiap-tiap browser. Lanjutkan dengan klik "Find".
Lanjutkan dengan copy paste kode CSS. Letakkan dengan benar, kemudian klik "SAVE Templates" atau "Simpan Template".

Cara menyimpan kode CSS di atas kode ]]></b:skin>

Untuk menyimpan kode CSS di atas kode ]]></b:skin> anda tidak perlu menggunakan tag style.

Cara menyimpan yang salah

Perhatikan penggunaan tag style!

.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 ]]></b:skin>

Untuk menyimpan kode CSS di bawah kode ]]></b:skin>, silahkan lakukan penyimpanan dengan menggunakan tag style.

Contoh cara penyimpanan kode CSS di bawah ]]></b:skin>

]]></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 <body> dan tag </body> (lewat Add a Gadget)

Untuk melakukan penyimpanan kode CSS seperti ini, kita harus melakukannya melalui Add Gadget dengan cara :

Login : Login ke Blogger.
- Tuliskan User Name (Nama Pengguna) atau Email Address.
- Masukkan Password (Sandi).
- KLIK "Login". Tunggu beberapa saat hingga halaman "Dasboard" terbuka.
Dasboard : Cari dan klik link "Design (Rancangan)". Kembali tunggu beberapa saat.
Design (Rancangan) : Bagian pertama yang akan anda jumpai adalah "Page Elements (Elemen Laman)". Di sinilah kode CSS akan di simpan (Catatan: melalui cara ini dapat juga dilakukan penyimpanan xHTML dan javascript).
Akan terlihat beberapa box dengan tulisan "Add a Gadget".Silahkan klik salah satu "Add a Gadget" (yang terdapat di box dengan garis putus-putus), d tempat yang anda inginkan (semua tempat bisa digunakan). Tunggu beberapa saat!
Add a Gadget (Tambahkan sebuah Gadget) : Jika sudah terlihat window baru dengan tulisan seperti di atas, silahkan cari sebuah widget yang bertuliskan "HTML/Javascript".
Silahkan klik "HTML/Javascript" dan tunggu hingga box tempat penyimpanan kode HTML terlihat.
Simpan kode CSS di dalamnya dengan mengikutsertakan tag style. Bila dalam sebuah tutorial hanya di berikan kode CSS tanpa tag style, maka anda harus menambahkan sendiri.
klik "SAVE/Simpan". Dengan langkah terakhir tadi maka selesai sudah proses penyimpanan kode CSS. Akan lebih sempurna jika setelah klik "SAVE/Simpan", anda melanjutkan dengan klik "SAVE/Simpan" yang terdapat di ujung kanan atas "Elemen Laman". Setelah itu "Refresh" "Page Elemen". Langkah khusus ini dilakukan supaya tidak terjadi perpindahan/pergeseran posisi widget yang telah kita gunakan (misalnya tadinya di pasang di Add Gadget teratas bagian sidebar, tiba tiba setelah kita kembali buka Elemen Laman, e ... si widget sudah berpindah di bagian bawah sidebar).

Contoh Penyimpanan Kode CSS yang BENAR

.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

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://h1.ripway.com/demas2010/Album%20Image%20dan%20Diskripsi%20Tersembunyi.css" media="all" />

dapat disimpan di atas kode <head>, di bawah kode ]]></b:skin> atau di atas kode ]]></b:skin> (paling sering/umum dilakukan), di atas tag penutup body ("</body>") atau melalui Add a Gadget --> HTML/Javascript. Silahkan pilih tempat yang paling anda suka. Proses penyimpanan seperti halnya cara yang telah digunakan di atas (login ...dst).

Cara Menyimpan javascript

Javascript dapat di simpan di atas kode <head> (paling sering/umum dilakukan),di bawah kode <head>, di bawah kode ]]></b:skin> atau di atas kode ]]></b:skin> (paling sering/umum dilakukan), di bawah <body>, di atas </body> (paling sering/umum dilakukan) atau melalui Add a Gadget --> HTML/Javascript (juga banyak dilakukan dengan cara ini).

Contoh penulisan javascript-1

function show_alert()

{

alert("Gimana, Mbul! Sudah othak-athik template!?");

}

</script>

Contoh penulisan javascript-2

Penggunaan kode khusus di javascript ini untuk mengatasi kesulitan karena penolakan oleh blogger saat dilakukan penyimpanan javascript. Javascript dengan kode tertentu di dalamnya (seperti misalnya "&" biasanya ditolak blogger saat proses penyimpanan dilakukan di "Edit HTML". Persoalan ini dapat diatasi dengan kode khusus ini.

function show_alert()

{

alert("Gimana, Mbul! Sudah othak-athik template!?");

}

//]]> /* kode khusus - penutup */
</script>

Contoh penulisan javascript-3

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

Penulisan xHTML

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

Contoh penulisan xHTML

<div style="width: 437px; height: 140px; background: #000; color: #eee; font-size: 14px; border: 2px solid red">
SimsalabimAbrakadabraTolongDibantuYa....BantuYa....hehehehehehhehe!
SimsalabimAbrakadabraTolongDibantuYa....BantuYa....hehehehehehhehe!
SimsalabimAbrakadabraTolongDibantuYa....BantuYa....hehehehehehhehe!
</div>

Semoga menolong dan memberi manfaat bagi sobat BloGgeR yang suka othak-athik template!