Tips dan trik mengubah desaign template blog menggunakan CSS

Blogger

Tips dan trik mengubah desaign template blog menggunakan CSS

Template blog dapat diubah dengan menggunakan CSS yang kita buat sendiri, berikut ini tips dan trik mengubah desaign template blog menggunakan CSS :

Menyiapkan CSS

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.
Penjelasan kode :

background: $bgcolor;
Mengubah warnabackground ( latar belakang )blog menjadi warna yang kita inginkan($bgcolor;).
Contoh :background: #fff;
Menjadikan background menjadi warnaputih.
Margin: 0;
Margin adalahspasi atau ruang yang membatasi sebuah element dengan element lain.
padding: 40px 20px;
Paddingadalahspasi atau ruang diantara konten dan border.

Cara menggunakan CSS

Bagaimana cara menggunakan CSS yang sudah kita siapkan atau kita buat, kita masukkan $variable_name dalam css b:skin.

Jenis variabel

Perancang template memiliki dukungan pengeditan untuk kumpulan tertentu dari jenis variabel CSS. Berikut ini cara 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.

Tips : Masih banyak lagi variabel CSS lainnya yang bisa kita gunakan untuk mempercantik template blog di blogger, contoh : variabel font untuk mengubah jenis huruf yang di inginkan, border untuk ketebalan border, font-size mengubah ukuran huruf, shadow menambahkan efek bayangan di huruf, box-shadow untuk menambah efek bayangan di elemen htlm seperti div, table, dll. Selamat berkreasi dengan menggunakan CSS.