Tips :Changing the Blog Color Scheme on New template
Ada sebuah tab di template editor yang bisa anda gunakan untuk merubah warna dan font yang blog anda gunakan. Tapi tahukah anda ada cara mudah untuk mengedit warna dan font anda secara cepat??
Variables
New tempate menggunakan variables untuk menghubungkan font dan warna blog anda ke css yang anda gunakan. Pada tutorial ini anda akan belajar bagainaa menambahkan sebuah variable ke dalam template anda, dan anda akan melihat bagiamana variable ini akan bekerja
Pada bagian atas template, anda akan meneumkan 2 tipe variable, satu untuk font dan satu untuk warna.
Colors atau Warna
Variable yang digunakan untuk warna adalah seperti ini :
<variable name="bgColor" description="Background Color" type="color" default="#efefef" value="#efefef"></variable>
keterangan :
Nama Varibale : bgColor
Deskripsi : warna background
Tipe variable : color / warna
Warna default : #efefef à warna ini adalah abu abu cerah, untuk warna bisa anda check disini
Nilai : #efefef à nilai untuk warna,
Sekarang, jika anda mengubah warna background dengan layout editor, nilai untuk warna anda juga akan berubah pada variable anda.(silahkan coba!!) click layout editor, lalu ubahlah warna background anda, setelah anda save maka anda akan melihat new value di variable anda
Sekarang, coba perhatikan semua css anda, coba hapus semua code untuk warna, dan gantilah dengan sebuah variable referensi, sebagai contoh kita gunakan $bgColor ( tanda dollar pada bagian depan menunjukkan variable mana yang akan anda akses css nya )
So if your template's content-wrapper uses the background-color, change the code:
contoh :
#content-wrapper {
background-color: #efefef; }
Menjadi :
#content-wrapper {
background-color: $bgColor; }
anda bisa menambahkan variable sebanyak yang anda suka. Hanya dengan menggunakan format warna untuk variable yang anda buat, lalu gantilah code warna dengan variable yang anda gunakan.
Anda bisa menggunakan sebanyak apapun warna yang anda suka, tapi juga tolong diingat perpaduan warna yang anda gunakana
Fonts
Sekarang, kita akan coba belajar tentang font, secara garis besar akan sama dengan warna diatas.
<variable name="bodyFont" description="Text Font" type="font" default="normal normal 100% Verdana, Arial, Sans-serif;" value="normal normal 100% Verdana, Arial, Sans-serif;"></variable>
nama variable : bodyFont
Deskripsi : Test Font
Tipe : Font
Font default : normal normal 100% dengan jenis font Verdana, Arial, Sans-Serif
Nilai : normal normal 100% dengan jenis font Verdana, Arial, Sans-Serif
Jika anda ingin merubahnya menjadi bold, maka ubahlah default dan nilainya menjadi “bold normal “, untuk italic atau tulisan miring ubah ke “normal italic “, dan untuk bold italic ubah menjadi “bolg italic”.
Anda bisa mengubah font sesuai dengan keingian anda sebanyak yang anda mau, tapi kembali ingat ; jangan terlalu berlebihan
Laptop review
Variables
New tempate menggunakan variables untuk menghubungkan font dan warna blog anda ke css yang anda gunakan. Pada tutorial ini anda akan belajar bagainaa menambahkan sebuah variable ke dalam template anda, dan anda akan melihat bagiamana variable ini akan bekerja
Pada bagian atas template, anda akan meneumkan 2 tipe variable, satu untuk font dan satu untuk warna.
Colors atau Warna
Variable yang digunakan untuk warna adalah seperti ini :
<variable name="bgColor" description="Background Color" type="color" default="#efefef" value="#efefef"></variable>
keterangan :
Nama Varibale : bgColor
Deskripsi : warna background
Tipe variable : color / warna
Warna default : #efefef à warna ini adalah abu abu cerah, untuk warna bisa anda check disini
Nilai : #efefef à nilai untuk warna,
Sekarang, jika anda mengubah warna background dengan layout editor, nilai untuk warna anda juga akan berubah pada variable anda.(silahkan coba!!) click layout editor, lalu ubahlah warna background anda, setelah anda save maka anda akan melihat new value di variable anda
Sekarang, coba perhatikan semua css anda, coba hapus semua code untuk warna, dan gantilah dengan sebuah variable referensi, sebagai contoh kita gunakan $bgColor ( tanda dollar pada bagian depan menunjukkan variable mana yang akan anda akses css nya )
So if your template's content-wrapper uses the background-color, change the code:
contoh :
#content-wrapper {
background-color: #efefef; }
Menjadi :
#content-wrapper {
background-color: $bgColor; }
anda bisa menambahkan variable sebanyak yang anda suka. Hanya dengan menggunakan format warna untuk variable yang anda buat, lalu gantilah code warna dengan variable yang anda gunakan.
Anda bisa menggunakan sebanyak apapun warna yang anda suka, tapi juga tolong diingat perpaduan warna yang anda gunakana
Fonts
Sekarang, kita akan coba belajar tentang font, secara garis besar akan sama dengan warna diatas.
<variable name="bodyFont" description="Text Font" type="font" default="normal normal 100% Verdana, Arial, Sans-serif;" value="normal normal 100% Verdana, Arial, Sans-serif;"></variable>
nama variable : bodyFont
Deskripsi : Test Font
Tipe : Font
Font default : normal normal 100% dengan jenis font Verdana, Arial, Sans-Serif
Nilai : normal normal 100% dengan jenis font Verdana, Arial, Sans-Serif
Jika anda ingin merubahnya menjadi bold, maka ubahlah default dan nilainya menjadi “bold normal “, untuk italic atau tulisan miring ubah ke “normal italic “, dan untuk bold italic ubah menjadi “bolg italic”.
Anda bisa mengubah font sesuai dengan keingian anda sebanyak yang anda mau, tapi kembali ingat ; jangan terlalu berlebihan
Laptop review
Komentar