Add CSS Function (Blogger)

The Add CSS function can be found at the bottom of the Advanced option in the Template Designer.
This function can be used with the Layout and Designer templates.
Basically this option overrides the existing template coding to allow modifications to the template.
This is a safe and easy way to edit the template coding without the fear of messing anything up. This
also allows a live view of what the modifying changes. You can also remove any added in coding by
simply going back to the Add CSS screen. Now this is not changing the template code but adding a
code to override the existing coding. This allowing your Template Designer functions to remain
working.
Note: All added CSS will be place above the <:b/skin> tag in the Edit HTML page. So you will not
find the added CSS coding in the element modified.

About Page Source:

Since the Designer templates are almost completely made up of /* Variable definitions it is best to
formalize yourself with the Page Source. The Page Source shows the interpreted coding after the /*
Variable definitions are added.
To access the Page Source you can right click and select "View Source" or "View Page Source"
depending on which browser you are using. For Fire Fox the hot keys Ctrl+U can pull up the source
as well. Other browsers you may need to go to the View in the top tools of your browser. In here you
can also locate the source.
Example of Page Source:
So in your Edit HTML page you may see a code like this below.
color: $(body.text.color);

But in the Page Source this code will display as something like this
color: #e1e1e1;

This above is the interpreted coding.

How to Use Add CSS:

When using the Add CSS function you must specify what element you wish to modify.
Examples of Elements:
body {
.content-inner {

#header-inner {
.header-inner {
.main-inner {

This is just some of many elements you can choose from. You will need to have some basic
knowledge of coding to understand what you looking for.
After you have assigned the area you will need to add in the modifying code and add the closing tag.
.header-inner {
padding: 20px 0 0;
}

Red is the modifying code and the Orange is my closing tag.

You do not need to enter in the full code you find in the Page Source. This is unneeded since the
code is already in the Edit HTML page. All you are doing is modifying the existing code.
So for a example if my Page Source displays this for the element.
#content-wrapper {
width: 980px;
margin: 0 auto;
padding: 0 0 5px;
text-align: left;
background-color: #000000;
border: 1px solid #02021b;
border-top: 0;
}

Now let say I want the text to be align to the center. I would only need to add this code below.
#content-wrapper {
text-align: center;
}

I hope this post was understandable and you can now begin experimenting with the Add CSS
function. This option was added by Blogger so we don't mess up the templates coding to the point
that the Template Designer options no longer work.

TERJEMAHAN INGGRIS KE BAHASA INDONESIA

Tambahkan CSS Fungsi (Blogger)

Fungsi CSS Tambahkan dapat ditemukan di bagian bawah pilihan Advanced di Template
Designer. Fungsi ini dapat digunakan dengan Layout dan Designer template.
Pada dasarnya pilihan ini mengesampingkan template yang ada coding untuk memungkinkan modifikasi
ke template. Ini adalah cara yang aman dan mudah untuk mengedit template coding tanpa takut
mengacaukan apa pun. Ini juga memungkinkan live view dari apa perubahan memodifikasi. Anda juga
dapat menghapus setiap ditambahkan dalam pengkodean hanya dengan kembali ke layar CSS
Tambah. Sekarang ini tidak mengubah kode template tetapi menambahkan kode untuk menimpa yang
ada coding. Template ini fungsi yang memungkinkan Anda untuk tetap bekerja Designer.
Catatan: Semua ditambahkan CSS akan menjadi tempat di atas <: b / skin> tag di halaman Edit
HTML. Jadi Anda tidak akan menemukan ditambahkan CSS coding di elemen dimodifikasi.
Tentang Sumber Page:
Sejak Designer template yang hampir seluruhnya terdiri dari / * definisi variabel yang terbaik adalah untuk
merumuskan diri dengan Page Source. Sumber Page menunjukkan ditafsirkan coding setelah * / definisi
variabel ditambahkan.
Untuk mengakses Page Source Anda bisa klik kanan dan pilih "View Source" atau "View Page Source"
tergantung pada browser yang Anda gunakan. Untuk Fire Fox kunci panas Ctrl + U dapat menarik
sumber juga. browser lain Anda mungkin perlu untuk pergi ke Tampilan dalam alat atas browser Anda. Di
sini Anda juga dapat mencari sumber.
Contoh Page Source:
Jadi pada halaman Edit HTML Anda Anda mungkin melihat kode seperti di bawah ini.
color: $ (body.text.color);
Tapi di Page Source kode ini akan ditampilkan sebagai sesuatu seperti ini
color: # e1e1e1;
Hal di atas adalah ditafsirkan coding.
Cara Menggunakan Tambahkan CSS:
Bila menggunakan fungsi CSS Tambahkan Anda harus menentukan apa elemen yang ingin Anda
modifikasi.
Contoh Elemen:
body {
konten. batin {
# Header-inner {
header-. batin {

utama-. batin {
Ini hanya beberapa dari banyak elemen yang dapat Anda pilih.Anda akan perlu untuk memiliki
pengetahuan dasar coding untuk memahami apa yang Anda cari.
Setelah Anda ditugaskan daerah Anda akan perlu menambahkan kode memodifikasi dan tambahkan tag
penutup.
header-. batin {
padding: 20px 0 0;
}
Merah adalah kode memodifikasi dan Orange adalah tag penutup saya.
Anda tidak perlu memasukkan kode lengkap yang Anda temukan di Page Source. Hal ini tidak diperlukan
karena kode tersebut sudah di halaman Edit HTML. Yang Anda lakukan adalah memodifikasi kode yang
sudah ada.
Jadi untuk contoh jika menampilkan Sumber saya Halaman ini untuk elemen.
# Content-wrapper {
width: 980px;
margin: 0 auto;
padding: 0 0 5px;
text-align: kiri;
background-color: # 000000;
border: 1px solid # 02021b;
Border-top: 0;
}
Sekarang katakanlah saya ingin teks yang akan align ke pusat.Saya hanya perlu menambahkan kode ini
di bawah ini.
# Content-wrapper {
text-align: center;
}
Saya harap posting ini bisa dimengerti dan sekarang Anda bisa mulai bereksperimen dengan fungsi CSS
Tambah. Opsi ini ditambahkan oleh Blogger agar kita tidak mengacaukan template coding ke titik bahwa
semua opsi Desainer Template tidak lagi bekerja.