Translate to your language

CARI ARTIKELMU DI SINI


3.4 Menyesuaikan tag CSS untuk tata letak

Untuk menggunakan perancang template dengan CSS template blog Anda, ada beberapa panduan untuk diikuti.

Menyiapkan variabel



Pada bagian <head> kode, Anda akan perlu memiliki sepasang tag <b:skin> </b:skin>.
Deklarasi gaya CSS akan diletakkan di antara tag tersebut, bersama dengan nama-nama variabel yang membuat desain Anda bekerja dengan laman Font dan Warna.



Contoh
<head>

...
<b:skin>
 <style type='text/css'>
 /*
  * Variable definitions:
  *  <Variable name='bgcolor' description='Page Background Color'
      type='color' default='#fff'/>
  */
 body {
   background: $bgcolor;
   margin: 0;
   padding: 40px 20px;
 }
 </style>
</b:skin>
</head>
Kode CSS yang diapit oleh tag komentar /* dan */ tidak akan ditampilkan di blog Anda.
Akan ada daftar variabel di sini, satu untuk setiap font atau warna yang Anda inginkan agar dapat diedit dari tab "Font dan Warna".

Setiap variabel perlu memiliki informasi sebagaimana yang ditampilkan dalam contoh di atas dan dijelaskan berikut ini:
  • name - Dapat terdiri dari huruf atau angka. Setiap nama dalam template Anda harus unik.
  • description - Tambahkan deskripsi untuk ditampilkan pada bagian "Font dan Warna".
  • type - "Font" atau "warna".
  • default - Nilai default. Warna harus berupa kode warna heksadesimal, misalnya  #FF0066. Font akan berupa daftar bentuk font-style font-weight font-size font-family (gaya font, ketebalan font, ukuran font, jenis font).



Menggunakan variabel

Setelah variabel ditetapkan, bila Anda ingin menggunakan nilai variabel, masukkan $variable_name dalam css b:skin.
Jenis variabel
Perancang template memiliki dukungan pengeditan untuk kumpulan tertentu dari jenis variabel CSS. Untuk menyetel jenis variabel:
  • variabel warna akan menyediakan palet warna untuk pilihan di perancang template.


  • variabel font akan menyediakan pilihan font, dengan opsi ukuran dan ketebalan atau kemiringan, di perancang template.
Dalam contoh di atas, terdapat variabel yang disebut bgcolor, yang disetel menjadi putih (#fff). Dalam kode berikutnya, dinyatakan: background: $bgcolor. Ini akan mengganti latar belakang menjadi putih, dan Anda dapat mengubahnya pada bagian "Font dan Warna".



Catatan: Anda tidak perlu membuat variabel untuk jenis atribut CSS lain. Ini dapat disertakan dalam CSS sebagaimana biasanya (seperti pada atribut margin: dan padding: dalam contoh di atas).

Subscribe to: Posts (Atom)