Menyimpan kode CSS dalam template blogger (Blogger Template Designer -Perancang Template Blogger) dapat dilakukan di beberapa bagian template dan dengan beberapa cara. Anda
tak harus selalu meletakkan kode css di atas kode
]]></b:skin> atau melalui box penyimpan kode CSS yang tersedia di fitur "
Perancang Template (Template Designer)" atau melalui
Add a Gadget yang terdapat di
Page Elements (
Elemen Laman) saja. Satu hal yang penting saat menyimpan kode css adalah selalu di antara tag pembuka head (
<head>) dan tag penutupnya (
</head>) serta di antara tag pembuka body (
<body>) dan tag penutup body (
</body>). Beberapa yang perlu diperhatikan adalah penggunaan tag style (
<style type="text/css"> dan
</style>). Agar lebih jelas kita akan membahasnya satu persatu.
Menyimpan Kode CSS di atas kode ]]></b:skin>
Kode
]]></b:skin> adalah kode yang paling penting berkaitan dengan penambahan dan penyimpanan kode CSS baru di template blogger.
Letaknya sedikit di atas kode (tag)
</head>. Pada umumnya kode CSS baru diletakkan dan disimpan di atas kode ini. Untuk menyimpan kode css
di atas kode
]]></b:skin> ada dua cara yang bisa dilakukan.
- Melalui Box Edit Template.
- Melalui Box Tambahkan CSS ubahsuaian (Add custom CSS).
Menambah dan Menyimpan Kode CSS Melalui Box Edit Template
Box Edit Template merupakan box yang didalamnya berisi kode html (Kode CSS, xHTML dan Javascript). Di dalam box inilah desain dasar blog dibangun. Untuk menyimpan kode css di atas kode
]]></b:skin> (dalam box
Edit HTML), silahkan ikut panduan berikut:
- Login ke Blogger. Untuk login klik di sini !
- Halaman Dasbor (Dasboard).
- Klik Design (Rancangan).
- Klik Edit HTMl.
- Cari kode kode ]]></b:skin>.
- Letakkan kode css di atas kode ]]></b:skin>
- Klik Simpan Template (Save Template).
- Selesai! Kode CSS yang baru telah tersimpan di template. Untuk melihat hasil yang diperoleh setelah menambah kode css baru, silahkan buka blog!
Menambah dan Menyimpan Kode CSS Melalui Box Tambahkan CSS ubahsuaian (Add custom CSS).
Menambah dan menyimpan kode CSS melalui cara ini akan membuat kode CSS juga tersimpan di atas kode ]]></b:skin> Jadi pada intinya "dua cara berbeda dengan hasil yang sama." Tentu saja akan lebih bermanfaat dengan cara yang pertama karena secara tidak langsung anda akan mengenal secara lebih dekat susunan kode pembentuk blog (template).
Langkah penyimpanan kode CSS sama seperti di atas, hanya saja langkah berbeda terjadi saat masuk (
klik) "Design (Rancangan). Silahkan ikuti panduannya di bawah ini:
- Setelah login dan masuk halaman dasboard (dasboard) kemudian klik "Rancangan (Design)", cari fitur "Perancang template (Template Designer)".
- Anda akan masuk ke halaman "Perancang Template Blogger, klik Tingkat Lanjut (Advanced)
- Klik Add CSS (Tambahkan CSS)
- Letakkan kode CSS dalam box "Add Custom CSS"
- Klik "Apply to blog (Terapkan ke Blog".
- Klik Back to Blogger (Kembali ke Blogger).
Catatan/Keterangan:
- Dalam Blogger Template Designer (Perancang Template Blogger), tag pembuka body (<body>) bentuk kodenya seperti berikut:
<body expr:class='"loading" + data:blog.mobileClass + " " + data:blog.pageType'>
atau juga bisa seperti ini:
<body expr:class='"loading" + data:blog.mobileClass'>
- Saat anda menyimpan kode CSS di atas kode ]]></b:skin> atau dalam box Add Custom CSS jangan gunakan tag pembuka dan penutup style (<style type="text/css"> dan </style>) box penyimpan kode css tersebut telah menggunakan tag pembuka dan penutup style.
- Setiap teks link yang berwarna kuning berisikan tutorial dalam bentuk gambar (image). Klik untuk memperjelas tutorial!
Menyimpan link kode CSS di bawah tag <head>, di atas tag </head>, di bawah tag <body> atau di atas tag </body>
Selain menyimpan CSS dalam bentuk kode css, anda dapat menyimpan kode css yang sudah dalam bentuk link. Kode CSS berbentuk link sebenarnya adalah kode css yang telah diupload ke file hosting. Kode CSS ini kemudian disimpan ditemplate dalam bentuk link seperti ini:
<link href="URL.css" rel="stylesheet" type="text/css" />. URL.css adalah alamat kode css disimpan.
Contoh:
http://sites.google.com/gubhugreyot/jquery-slide-show.css Bentuk kode:
<link href="http://sites.google.com/gubhugreyot/jquery-slide-show.css" rel="stylesheet" type="text/css" />
Link kode CSS dapat disimpan
di bawah tag <head>,
di atas tag </head>,
di bawah tag <body> atau
di atas tag </body> . Jika kode css yang tersimpan difile hosting dipandang sangat penting anda dapat menyimpan di tag body, baik di atas tag </body> ataupun di bawah tag <body>. Perlu anda ketahui bahwa
kode css yang akan dibaca dan kemudian diutamakan/digunakan untuk menjalankan fungsi desain html adalah kode css yang letaknya semakin di bagian bawah template. Anda dapat melihat contoh kode di bawah ini:
.box{
width:200px;
width:400px;
height:100px;
}box di atas akan mempunyai lebar (width) sebesar 400px karena 400px berada di bawah width:200px;
.box{
width:200px;
height:100px;
}.box{
width:400px;
height:500px;
}Dengan kode di atas maka yang digunakan oleh browser adalah kode yang di bawah sehingga box akan mempunyai tinggi 500px (height) serta lebar 400px (width).
Langkah untuk menyimpan link kode CSS di Box Edit HTML.
- Login ke Blogger. Untuk login klik di sini !
- Halaman Dasbor (Dasboard).
- Klik Design (Rancangan).
- Klik Edit HTMl.
- Cari kode kode <body>, </body>, <head> atau </head>.
- Letakkan link kode css pada posisi yang anda inginkan. Di bawah tag <head>, di atas tag </head>, di bawah tag <body> atau di atas tag </body> .
Lihat contoh penempatan link kode css di sini!
- Klik Simpan Template (Save Template).
- Selesai! Link kode CSS yang baru telah tersimpan di template. Untuk melihat hasil yang diperoleh setelah menambah kode css baru, silahkan buka blog!
Langkah untuk menyimpan link kode CSS di Box Widget HTML/Javascript.
Menggunakan box Widget HTML/Javascript utnuk menyimpan kode CSS sama arinya dengan menyimpan kode CSS di tag body. Kode CSS ini akan terletak di antara tag pembuka body (<body>) dan tag penutup body (</body>).
- Login ke Blogger
- Halaman Dasbor (Dasboard).
- Klik Design (Rancangan).
- Klik Add a Gadget (Tambah Gadget). Anda bebas memilih yang manapun!
- Cari dan klik Widget HTML/Javascript.
- Letakkan kode CSS dalam box Mengonfigurasi HTML/JavaScript.
- Klik SIMPAN (SAVE).
Catatan/Keterangan:
- Selain untuk menyimpan kode CSS dalam bentuk link, Widget HTML/Javascript bisa juga digunakan untuk menyimpan kode CSS dalam tag style. Contoh kode seperti berikut:
.box{
width;500px;
height:300px;
padding:20px 10px 10px;
margin:20px 0;
overflow:auto;
border:1px solid #000;
background:#000;
}
- Anda dapat juga menyimpan Javascript atau xHTML.
- Title pada Widget bisa dituliskan atau tanpa title.
- Agar CSS lebih ringan bebannya, anda bisa melakukan compress css. Ini adalah contoh hasil compress CSS pada contoh di atas:
.box{width;500px;height:300px;padding:20px 10px 10px;margin:20px 0;overflow:auto;border:1px solid #000;background:#000;}
