Dalam posting ini kita akan belajar tentang CSS Definisi Variabel untuk Warna dan Font yang dapat ditemukan di bagian atas style sheet dari sebuah blog Blogger. Nilai untuk definisi variabel dapat dimodifikasi langsung melalui Designer Template Blogger mana pengaturan untuk warna, latar belakang, font dan ukuran font.Kebanyakan standar Blogger template, seperti Template Minima, gunakan pengaturan ini untuk CSS, yang membuatnya mudah untuk memodifikasi variabel tersebut melalui dashboard Blogger, dengan menggunakan "Template Designer "( Template > Customize ) editor dan mengakses ke " Lanjutan "bagian.
Jika definisi yang sudah ditetapkan dalam CSS, kita akan dapat mengubah warna latar belakang, warna font, gaya atau ukuran, langsung dari dashboard Blogger kita tanpa harus menyentuh kode HTML template kita. Jika nilai-nilai ini tidak diatur, kita dapat mendefinisikan mereka dengan menciptakan variabel kita sendiri. Semakin banyak variabel yang dibuat, semakin besar akan menjadi kemudahan mengubah warna dan font dari Elemen Halamandengan pergi ke " Template Designer "dan mengakses" Lanjutan "tab.
Jika definisi yang sudah ditetapkan dalam CSS, kita akan dapat mengubah warna latar belakang, warna font, gaya atau ukuran, langsung dari dashboard Blogger kita tanpa harus menyentuh kode HTML template kita. Jika nilai-nilai ini tidak diatur, kita dapat mendefinisikan mereka dengan menciptakan variabel kita sendiri. Semakin banyak variabel yang dibuat, semakin besar akan menjadi kemudahan mengubah warna dan font dari Elemen Halamandengan pergi ke " Template Designer "dan mengakses" Lanjutan "tab.
Dalam beberapa kasus, kita tidak bisa mengubah warna atau font template tertentu jika desainer belum menerapkan variabel dalam template dan tidak didefinisikan dan ditentukan nilai tertentu langsung ke properti, dan jika tidak ada definisi untuk nilai-nilai ini, kita mungkin tidak dapat menyesuaikan melalui Blogger Template Designer. Ada dua jenis variabel: 1) Warna Variable:
Di sini saya telah menciptakan variabel jenis " warna ", dengan" variablecolor " nama . Nilai warna ( # DDF2FF ) dapat diterapkan untuk semua perbatasan blog saya dan setiap kali saya ingin menerapkan gaya warna ke perbatasan tertentu, saya akan ketik seperti ini:
Setelah kami telah menciptakan variabel, kita dapat menerapkannya pada setiap properti (tidak hanya perbatasan) pemilih setiap (halaman element) di mana dimungkinkan menerapkan warna yang dipilih. Sebagai contoh, jika saya ingin menambahkan warna ini di main-inner background (sidebar dan posting area), saya akan menambahkan hanya setelah "main-batin" selector class , seperti ini:
Sekarang bahwa variabel baru telah dibentuk, menyimpan dan kembali ke dashboard blogger dengan mengklik "Customize "tombol> Lanjutan tab. Anda akan melihat bahwa ada variabel baru yang disebut " Variabel dengan warna biru muda "- untuk mengubah warna, hanya menggunakan alat color picker.
Sekarang kita telah diberi variabel baru, Simpan template dan kembali ke dashboard Blogger dengan mengklik pada Template > Customize tombol dan mengakses Lanjutan tab. Gulir ke bawah dan Anda akan melihat bahwa ada variabel baru bernama " Gadget Title Font "- jika Anda ingin mengubah jenis font atau ukuran, Anda dapat melakukannya secara langsung dengan menggunakan panel ini.
Setelah Anda memutuskan apa huruf gaya harus diterapkan, klik pada Terapkan untuk blog tombol di sisi kanan.
Ketika Anda bekerja pada desain template Anda, Anda dapat menambahkan banyak variabel untuk warna dan font yang berbeda, namun, untuk jenis atribut CSS, ada tidak perlu untuk menciptakan variabel. Jenis lainnya (seperti margin, padding) dapat dimasukkan dalam (di atas HTML template ]]> </ b: skin> )
<Nama Variabel = " body.background.color "description =" Outer Background "type =" color "default =" # 66bbdd "value =" # 66bbdd "/>Merah adalah nama variabel. Di sini Anda dapat menempatkan nama yang Anda inginkan, namun harus tidak mengandung spasi, itu sebabnya kita dapat melihat beberapa nama variabel menggunakan titik "." antara setiap kata. Dalam hijau adalah deskripsi yang akan muncul di Font dan Warna panel (dapat berisi spasi). Dalam biruadalah variabel jenis, yang dalam hal ini adalah "warna" Dalam ungu adalah nilai default, yang berjalan di . tidak adanya nilai lain dalam jeruk adalah nilai warna yang dipilih. 2) Variabel Font:
<Nama Variabel = " body.font "description =" Font "type =" font yang "default =" 12px biasa yang normal Arial, Tahoma, Helvetica, FreeSans, sans-serif "value =" 12px biasa yang normal Arial, Tahoma, Helvetica, FreeSans , sans-serif "/>Merah nama variabel tanpa spasi. Dalam hijau deskripsi variabel, mungkin berisi spasi Dalam biru adalah jenis variabel, yang dalam hal ini adalah font. Dalam ungu font default. Dalam orange adalah font yang Anda pilih.Kita dapat menemukan variabel definisi di <head> bagian dari kami Template dengan mengakses kode HTML (klik pada Edit HTML tombol). Di sana kita akan melihat sepasang <b:skin> .. </ b: skin> tag. Deklarasi CSS style akan pergi di antara tag tersebut, bersama dengan nama variabel.
Cara Membuat Variabel dengan tipe Warna
Sekarang, mari kita lihat bagaimana kita dapat membuat type = " warna " variabel dalam template kita.silahkan copy di bawah potongan dan mengganti nama dan jenis yang Anda inginkan, kemudian paste kode di bawah komentar ini:/ * Variable definitionsKode untuk menyalin:
====================
<Nama Variabel = " NAME "deskripsi =" DESCRIPTION "type =" color "default =" # xxxxxx "value =" # xxxxxx"/>Untuk pemahaman yang lebih baik, mari kita lihat contoh ini dengan variabel jenis " warna ":
<Nama Variabel = " variablecolor "description =" Variabel dengan warna biru muda "type =" color "default =" # DDF2FF "value =" # DDF2FF "/>
Di sini saya telah menciptakan variabel jenis " warna ", dengan" variablecolor " nama . Nilai warna ( # DDF2FF ) dapat diterapkan untuk semua perbatasan blog saya dan setiap kali saya ingin menerapkan gaya warna ke perbatasan tertentu, saya akan ketik seperti ini:
border: 1px solid $ variablecolor ;Perhatikan bahwa saya telah menambahkan "$ "simbol sebelum nama variabel yang harus ditambahkan setiap kali Anda ingin menerapkan definisi variabel baru.
Setelah kami telah menciptakan variabel, kita dapat menerapkannya pada setiap properti (tidak hanya perbatasan) pemilih setiap (halaman element) di mana dimungkinkan menerapkan warna yang dipilih. Sebagai contoh, jika saya ingin menambahkan warna ini di main-inner background (sidebar dan posting area), saya akan menambahkan hanya setelah "main-batin" selector class , seperti ini:
. Main-inner { background-color: $ variablecolor ; }
Sekarang bahwa variabel baru telah dibentuk, menyimpan dan kembali ke dashboard blogger dengan mengklik "Customize "tombol> Lanjutan tab. Anda akan melihat bahwa ada variabel baru yang disebut " Variabel dengan warna biru muda "- untuk mengubah warna, hanya menggunakan alat color picker.
Cara Membuat Variabel jenis Font:
Sekarang katakanlah saya ingin membuat variabel baru type = "Font" yang saya ingin menerapkan pada judul gadget sidebar. Saya akan menambahkan dengan cara ini:<Nama Variabel = " gadgetstitlefont "description =" Gadget Title Font "type =" Font "default =" 16px biasa yang normal Arial, Verdana, 'Trebuchet MS', Trebuchet, Sans-serif "value =" biasa yang normal 20px Cambria "/>Dalam variabel ini bahwa saya hanya dibuat, standar font yang akan dicari oleh browser web harus Arial , dan dalam ketiadaan, Verdana dan sebagainya. Jika tidak, menerapkan Cambria huruf yang sebenarnya adalah font yang kita inginkan dan yang dapat dengan mudah diubah dengan mengakses Template Blogger Designer.Setelah variabel font yang telah dilaksanakan, kita dapat menambahkannya ke setiap properti dari setiap pemilih di mana kita ingin mendefinisikan gaya font ini. Untuk menentukan mana variabel ini harus diterapkan (yang, dalam contoh saya, adalah judul dari gadget sidebar), saya akan perlu untuk memasukkan nilai-nilai secara langsung dalam " h2 "milik" sidebar "( sidebar-kanan-1 ) pemilih, dengan menciptakan aturan CSS berikut:
# sidebar-kanan-1 h2 {Dan saya akan menambahkan ini di atas ]]> </ b: skin> tag dari Template (jangan lupa untuk menambahkan "$" simbol sebelum nama variabel, jika tidak maka tidak akan bekerja).
font yang: $ gadgetstitlefont ;
}
Sekarang kita telah diberi variabel baru, Simpan template dan kembali ke dashboard Blogger dengan mengklik pada Template > Customize tombol dan mengakses Lanjutan tab. Gulir ke bawah dan Anda akan melihat bahwa ada variabel baru bernama " Gadget Title Font "- jika Anda ingin mengubah jenis font atau ukuran, Anda dapat melakukannya secara langsung dengan menggunakan panel ini.
Setelah Anda memutuskan apa huruf gaya harus diterapkan, klik pada Terapkan untuk blog tombol di sisi kanan.
Ketika Anda bekerja pada desain template Anda, Anda dapat menambahkan banyak variabel untuk warna dan font yang berbeda, namun, untuk jenis atribut CSS, ada tidak perlu untuk menciptakan variabel. Jenis lainnya (seperti margin, padding) dapat dimasukkan dalam (di atas HTML template ]]> </ b: skin> )
EmoticonEmoticon