Cara merubah template blogger

Designer Template Blogger memungkinkan Anda untuk menyesuaikan hampir semua aspek dari
penampilan blog Anda dengan menggunakan cascading style sheet (CSS). Untuk menambahkan
potongan CSS kustom ke template Anda, cukup buka Desainer Template dan menambahkan kode Anda
ke lapangan yang berlokasi di Advanced | Tambah CSS tab.Perubahan yang Anda buat akan
mencerminkan langsung di live preview di bawah editor.

Catatan: Mengedit CSS memungkinkan Anda untuk mengubah tampilan dan nuansa blog Anda. Untuk
perubahan konten yang sebenarnya dari blog Anda, termasuk penambahan gadget atau perubahan tata
letak, silahkan gunakan kolom Edit HTML yang terletak di tab Layouts. Juga ingat bahwa, seperti
kustomisasi lainnya, CSS Anda akan dihapus jika Anda mengubah desain.

Sedangkan CSS memungkinkan untuk hampir tidak terbatas jumlah kustomisasi gaya, di sini kami hanya
akan pergi selama beberapa tweak CSS paling populer sehingga Anda bisa mendapatkan rasa
bagaimana perubahan ini dapat dibuat. Untuk daftar yang lebih komprehensif dari berbagai CSS tweak,
silakan lihat "Apa yang bisa saya lakukan dengan CSS 'artikel di Pusat Bantuan kami.

Perubahan CSS pertama kita akan pergi ke pusat adalah bagaimana teks header di blog Anda. Kepala
ke lapangan CSS terletak di Advanced | Tambah CSS Designer tab di Template.Sesampai di sana,
cukup drop di baris kode berikut:

. Header {
text-align: center;
}

Setelah Anda menambahkan kode, Anda akan melihat bahwa gambar header teks anda langsung akan
berubah menjadi keselarasan terpusat. Jika Anda menyukai apa yang Anda lihat, cukup klik jeruk
Terapkan untuk tombol Blog dan gambar header Anda akan disimpan. Jika Anda pernah memutuskan
untuk menghapus atau mengubah gambar header pada suatu titik kemudian, itu semudah menghapus
atau menukar keluar kode gambar dari lapangan.

Perubahan CSS kedua kita akan membahas bagaimana menambahkan gambar latar belakang Anda
sendiri ke blog Anda.Demi yang komprehensif, kita akan mengasumsikan bahwa gambar Anda belum di-
host di web, dan pergi ke instruksi untuk bagaimana meng-upload gambar Anda ke filehost sehingga
Anda dapat link ke sana. Berikut adalah semua langkah yang diperlukan untuk mengambil gambar Anda
sendiri dari komputer Anda dan menggunakannya sebagai gambar latar belakang untuk blog Anda:

Kompres gambar Anda.

Anda harus memastikan filesize gambar Anda di bawah 250K, maka langkah pertama adalah pergi ke
dalam editor foto pilihan Anda dan kompresi citra ke bawah agar muat ke dalam batas itu.Atau, gambar
beberapa host seperti Imgur memberikan pilihan untuk kompresi citra Anda ke filesize tertentu sebelum
upload.

Upload gambar Anda ke sebuah filehost. Agar Anda untuk menambahkan gambar latar belakang melalui
CSS, Anda akan butuh link bekerja untuk gambar Anda. Jika tidak sudah di web, Anda harus meng-
upload dari komputer ke sebuah host yang akan melayani gambar. Album Web Picasa, Imgur, dan
Photobucket semua pilihan handal untuk gambar Anda hosting. Cukup arahkan ke host pilihan Anda, dan
ikuti petunjuk mereka untuk upload.

Tambahkan potongan gambar latar belakang CSS. Sekarang bahwa Anda memiliki gambar, dikompresi
upload Anda akan dapat menambahkan CSS untuk menggunakannya sebagai latar belakang untuk blog
Anda. Berikut adalah kode:
tubuh. fauxcolumn-luar {
background: url (http://www.example.com/image.png);
}
badan-fauxcolumn-luar div. {
background: none;
}

Terapkan untuk blog! Jika Anda menyukai apa yang Anda lihat, silakan klik tombol Apply to Blog, dan
Anda selesai! Tentu saja, Anda selalu bisa kembali dan menghapus atau swap keluar kode gambar latar
belakang jika Anda suka.
Catatan: Template dengan gradien (seperti Wikipedia # 1) sedikit mungkin bertentangan dalam
penampilan dengan menggunakan gambar latar belakang.

.body-fauxcolumn-outer { background: url(http://www.example.com/image.png);} .body-

fauxcolumn-outer div { background: none; }
Anda dapat mengubah hampir semua aspek dari penampilan blog Anda hanya dengan mengubah style
sheet dalam template Anda.Beberapa hal yang paling umum untuk melakukan terdaftar di sini.Untuk
tutorial yang lebih mendalam dan contoh-contoh, silakan lihat Sekolah W3 CSS Contoh dan Pendahuluan
W3C untuk CSS.

default template kami memiliki semua informasi CSS arah atas, antara <style> </ style> tags. Anda akan
melihat sekelompok garis sana yang terlihat seperti ini:

Garis disorot menunjukkan gaya yang diterapkan untuk setiap tag <h3> di blog Anda. Apa yang kami
akan jelaskan di sini adalah beberapa pilihan untuk bagaimana gaya itu. Setiap dari potongan-potongan
kode di bawah ini dapat dimasukkan antara {kurung kurawal} dalam style sheet.

Contoh Kode
Warna
warna: biru, Teks ini adalah biru.
background: kuning; ini memiliki latar belakang kuning.
Anda dapat memasukkan nama-nama warna yang umum banyak di sini (misalnya merah, hijau, kuning)
atau Anda dapat menggunakan kode heksadesimal untuk berbagai warna yang lebih besar (misalnya #
0033AA). Untuk informasi lebih lanjut tentang warna, silakan lihat Web Referensi Warna.
Perbatasan
border: 1px solid red;
Ini memiliki batas merah.
perbatasan bisa menjadi solid, putus-putus atau putus-putus. lebar di sini adalah ditentukan dalam pixel
(px). Warna bisa nama atau kode heksadesimal. Untuk hanya melakukan perbatasan di satu sisi,
gunakan perbatasan-top, border-bottom, border-kanan, atau batas-kiri.
Font
font-family: "Times New Roman", Serif; ini dalam font serif.
font-family: Verdana, Sans-Serif; ini dalam font sans-serif.
Anda dapat menentukan daftar pilihan font. Jika yang pertama tidak tersedia di komputer pembaca Anda,
berikutnya akan digunakan, dan sebagainya. Menunjukkan "Serif" akan menggunakan font serif yang
tersedia.
font-size: 24px; Teks ini adalah 24 piksel tinggi.
Satuan ukuran dapat piksel (px), poin (pt), inci (dalam) atau persen dari ukuran default (%).
font-weight: bold; Teks ini ditebalkan.
Pilihan yang berani dan normal.
text-decoration: underline; Teks ini digarisbawahi.
Dekorasi teks dapat diatur none, underline, overline, atau baris-through. Hal ini paling sering digunakan
untuk menghapus menggarisbawahi pada link.
text-align: right;
Teks ini benar selaras.
Penjajaran dapat diatur ke kiri, kanan, atau membenarkan.
Margin dan Padding
margin: 15px;
Ini memiliki margin 15px seluruh.
padding: 15px;
Ini memiliki padding 15px dari seluruh.
Margin dan padding baik menentukan jumlah ruang di sekitar sesuatu. Perbedaannya adalah bahwa
margin adalah di luar perbatasan dan padding di dalamnya. (Perbatasan di sini adalah hanya untuk
ilustrasi.)

Seperti perbatasan, Anda dapat menentukan satu sisi pada waktu dengan margin-left, padding-top, dll
Anda juga dapat mengatur sekaligus dengan margin: 1px 2px 3px 4px; mana urutan adalah atas, kanan,
bawah, kiri.

Catatan:
Anda juga dapat menggunakan gaya inline, jika Anda ingin melakukan format satu kali untuk sepotong
tertentu dari teks dalam sebuah tulisan. Berikut adalah format untuk menggunakan:
<span style="color:red;"> Teks ini akan merah. </ span>