Rabu, Oktober 13, 2010

Menyimpan kode CSS sepertinya hanya persoalan sepele. Sesuatu yang terkadang membuat kita tidak cermat dan berhati-hati. Masalah penempatan terutama. Masih banyak blogger yang belum mengetahui secara tepat bagaimana tempat dan cara yang paling tepat untuk menyimpan kode CSS di template, baik melalui halaman "Edit HTML" atau menggunakan Add a Gadget yang terletak di "Page Elements/Elemen Laman". Ketidak tahuan ini sebenarnya tidaklah berbahaya bagi desain blog, akan tetapi sering terjadi sebuah desain HTML baru yang sebenarnya hendak dipakai atau diterapkan di blog ternyata tidak berfungsi sebagaimana yang diharapkan. Persoalan ini sepanjang seluruh kode CSS sudah ditulis dengan benar, sebenarnya terjadi pada penggunaan tag style yang terdiri dari tag pembuka (<style type="text/css">) dan tag penutupnya (</style>).

Rahasia kecil penggunaan tag style


  • Gunakan tag style saat menyimpan kode CSS di bawah kode ]]></b:skin>.
  • Gunakan juga tag style saat penyimpanan kode CSS dilakukan melalui Add a Gadget/Tambah Gadget (Widget HTML/Javascript).
  • Jangan gunakan tag style saat kode CSS disimpan di atas kode ]]></b:skin>.
  • Untuk kode CSS yang telah di upload di file hosting, gunakan kode seperti berikut untuk menyimpan di template. <link href="URL CSS" rel="stylesheet" type="text/css" />. Penyimpanan bisa dilakukan di atas kode <head> atau melalui Add a Gadget/Tambah Gadget.

Cara Menyimpan Kode CSS di atas ]]></b:skin>


  • Login : Login ke Blogger/Login to Blogger.
    • Tulliskan User Name/Nama Pengguna pada box yang telah disediakan. Selain User Name anda dapat juga menggunakan Alamat Email/Email Address.
    • Lanjutkan dengan menuliskan Password/Kode Rahasia/Sandi.
    • Setelah semua di isi dengan benar, KLIK Login
  • Dasboard/Dasbor : Halaman dasbor ini akan terlihat sesaat setelah klik login. Temukan link Design/Rancangan. KLIK lin tersebut, kemudian tunggu beberapa saat hingga terlihat halaman baru "Page Elements/Elemen Laman yang merupakan bagian dari Design/Rancangan.
  • KLIK link Edit HTML.
  • Di depan anda akan terlihat deretan kode HTML. Disinilah kode ]]></b:skin> tersimpan. Cari kode tersebut dengan menggunakan Ctrl+F. Jika mengalami kesulitan tentang penggunaan Ctrl+F, silahkan buka tutorial tentang masalah ini dengan membuka link berikut: Panduan cara Mencari Kode HTML di Template
  • Letakkan kode CSS tepat di atas kode ]]></b:skin>.
  • KLIK SAVE Templates/Simpan Template..

Contoh penempatan kode CSS di atas ]]></b:skin>
.post-body {
height: 400px;
overflow: auto;
overflow-x: hidden;
margin: 0;
padding: 0 10px 0 0;
}

]]></b:skin>


Cara Menyimpan Kode CSS di bawah ]]></b:skin>


Penyimpanan kode CSS di bawah kode tersebut harus menggunakan tag style, sedang langkah untuk melakukan proses penyimpanan kode seperti langkah di atas.

Contoh posisi kode CSS saat di simpan di bawah kode ]]></b:skin>:
]]></b:skin>

<style type="text/css">
.post-body {
height: 400px;
overflow: auto;
overflow-x: hidden;
margin: 0;
padding: 0 10px 0 0;
}
</style

Cara Menyimpan Kode CSS melalui Add a Gadget (Tambah Gadget)


Untuk menyimpan kode kode CSS melalui Add a Gadget, langkah yang harus ditempuh sama dengan di atas.
  • Setelah login hingga terlihat "Page Elements/Elemen Laman". Di halaman ini terdapat beberapa box yang sebagian bergaris putus-putus dengan tulisan Add a Gadget/Tambah Gadget. KLIK pada bagian tersebut dan tunggu hingga terbuka window baru.
  • Add a Gadget : Ada beberapa widget yang disediakan Blogger. Cari dan klik widget HTML/Javascript.
  • Setelah box penyimpanan kode terlihat, pastekan kode CSS di sini. Apabila kode CSS yang akan disimpan belum menggunakan tag style, anda harus menambahkannya sehingga bentuknya akan seperti di bawah ini.
  • KLIK SAVE/Simpan setelah kode ditulis dengan benar

Contoh penyimpanan kode melalui Add a Gadget:
<style type="text/css">
.post-body {
height: 400px;
overflow: auto;
overflow-x: hidden;
margin: 0;
padding: 0 10px 0 0;
}
</style>

Kode CSS dalam bentuk link (telah di upload di file hosting)


Anda dapat menyimpan file kode CSS ini melalui Add a Gadget atau di atas kode <head> yang terletak di bagian teratas template. Untuk mencari kode tersebut anda juga bisa memanfaatkan "Ctrl+F". Pproses penyimpanan seperti cara yang sudah dilakukan di atas.

Di atas <head>


Contoh penempatan link kode CSS:
<link href="http://stashbox.org/958324/file.css" rel="stylesheet" type="text/css" />

<head>

Untuk penyimpanan melalui Add a Gadget, anda langsung masukkan link ke dalam box dan lanjutkan KLIK SAVE/Simpan.
Contoh bentuk file kode CSS:
<link href="http://stashbox.org/958324/file.css" rel="stylesheet" type="text/css" />

Semoga bermanfaat!

Happy Blogging ....!


Tutorial Menarik Lain


Anda bisa mengikuti tutorial blogger yang super lengkap dan berisi ratusan tutorial dengan bahasa yang gampang dipahami lengkap dengan berbagai desain cantik CSS3 dengan membuka link di bawah ini:

Related Posts

6 komentar:

  1. 1 cara manggil css yg udh disimpen di bawah b:skin
    gimana ?, soalnya caranya ada yg macem2.
    maunya yg paling praktis
    2 utk yg import css apa hrs hosting yg berbayar ?
    ada yg gratis nggak ?
    utk yg import css, supaya nggak bentrok sama
    yg di template gimana ya ?

    thx

    BalasHapus
  2. thx kawan atas updatean knowladgex
    moga manfaat
    slamat berkreasi dan berinovasi
    sukses bwat kita kawan

    BalasHapus
  3. Bagus juga neh posting, lumayan nambah ilmu blogging. jarang ada tutorial kaya gini, cewek lagi yg punya, hehehe. Terus berkarya SistER.

    BalasHapus
  4. terimakasih buat tips-tipsnya sob, sangat membantu

    http://tokoonlineobat.com/

    BalasHapus

 
Tantytm | Edited by | Tanty Template Modification