.jpg)
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.
Ada 4 cara dan tempat menyimpan kode CSS:
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>
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 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>
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).
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<
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>
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>
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>
Semoga menolong dan memberi manfaat bagi sobat blogger yang suka othak-athik template!
Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :
» Happy Blogging - gubhugreyot «
saran...
BalasHapuskalo bisa dikasih print screen awal terus ke hasil na....
Komentar ini telah dihapus oleh pengarang.
BalasHapus