Posting
kali ini memang denagn sengaja mengupas secara lengkap 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.
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 tutorial ini juga mempunyai manfaat lain saat sebuah blog memberikan tutorial tentang kode HTML.
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 tutorial 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://...../gubhugreyot/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 sampeyan 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 sampeyan 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>. Sampeyan 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". Akan lebih jelas jika sampeyan membaca tutorialnya dengan membuka tutorial yang terdapat di "Special Tutorials" (menu sebelah kiri atas).
- 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> sampeyan 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>
.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>
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>
<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 sampeyan 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 sampeyan 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 sampeyan 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", sampeyan 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
<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>
.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://wimg.co.uk/53P/tooltip.css" rel="stylesheet" type="text/css" media="all" />
dapat disimpan di atas kode <head>, di bawah kode ]]></b:skin>, di atas tag penutup body ("</body>") atau melalui Add a Gadget --> HTML/Javascript.. Silahkan pilih tempat yang paling sampeyan suka. Proses penyimpanan seperti halnya cara yang telah digunakan di atas (login ...dst).
<link href="http://wimg.co.uk/53P/tooltip.css" rel="stylesheet" type="text/css" media="all" />
dapat disimpan di atas kode <head>, di bawah kode ]]></b:skin>, di atas tag penutup body ("</body>") atau melalui Add a Gadget --> HTML/Javascript.. Silahkan pilih tempat yang paling sampeyan 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 <head>, di bawah ]]></b:skin>, 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
<script
type="text/javascript">
function show_alert()
{
alert("Hello, Jo! Lagi ngopo sampeyan?");
}
</script<
function show_alert()
{
alert("Hello, Jo! Lagi ngopo sampeyan?");
}
</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.
<script
type="text/javascript">
//<![CDATA[ /* kode khusus - pembuka*/
function show_alert()
{
alert("Hello, Jo! Lagi ngopo sampeyan?");
}
//]]> /* kode khusus - penutup */
</script>
//<![CDATA[ /* kode khusus - pembuka*/
function show_alert()
{
alert("Hello, Jo! Lagi ngopo sampeyan?");
}
//]]> /* 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:
<script src="http://wimg.co.uk/k8W/gubhugreyot/js/anima.js"
type="text/javascript"></script>
atau
<script src="http://wimg.co.uk/k8W/gubhugreyot/js/anima.js" language="javascript"></script>
atau
<script src="http://wimg.co.uk/k8W/gubhugreyot/js/anima.js" type="text/javascript" language="javascript"></script>
atau
<script src="http://wimg.co.uk/k8W/gubhugreyot/js/anima.js" language="javascript"></script>
atau
<script src="http://wimg.co.uk/k8W/gubhugreyot/js/anima.js" type="text/javascript" language="javascript"></script>
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: 400px; height:
200px; background: #000; color: #eee; font-size: 14px; border: 2px solid
red">
Abrakadabra, simslabimsemeleketekbuahpepayagedhedkalihehehehehehehehehehhehe!
Abrakadabra, simslabimsemeleketekbuahpepayagedhedkalihehehehehehehehehehhehe!
Abrakadabra, simslabimsemeleketekbuahpepayagedhedkalihehehehehehehehehehhehe!
</div>
Abrakadabra, simslabimsemeleketekbuahpepayagedhedkalihehehehehehehehehehhehe!
Abrakadabra, simslabimsemeleketekbuahpepayagedhedkalihehehehehehehehehehhehe!
Abrakadabra, simslabimsemeleketekbuahpepayagedhedkalihehehehehehehehehehhehe!
</div>
Semoga menolong dan memberi manfaat bagi sobat
blogger yang suka othak-athik template!
===== SETIAP POSTINGAN AKAN SELALU SAYA SERTAI FOTO SEXY SEBAGAI REFRESH =====
Tidak ada komentar:
Posting Komentar
jika anda suka dengan artikel yang ada di blog ini silahkan tinggalkan komentar di bawah postingan...
Salam BLOGGER