Halo teman-teman kali ini kita akan belajar membuat style untuk tema blog ya. kemarin saya sudah pernah membuat tutorial cara membuat tema blog sendiri kali ini kita akan mempercantik tampilan yang menggunakan CSS
Tutorial sebelumnya Cara Membuat Tema Blog Sendiri untuk pemula
Template blogger tersusun dari elemen-elemen pembentuk mulai dari elemen dasar sampai elemen khusus terstruktur. CSS digunakan untuk mengatur semua tampilan setiap elemen dari ukuran, posisi, sampai warna.
Dalam penyusunan atau pembuatan template blog penambahan CSS bisa kita lakukan dari elemen paling dasar yaitu standar element.
Kabar baiknya elemen paling dasar (standar element) setiap template umumnya sama. Oleh karena itu kita tidak perlu susah-susah memikirkan bagaimana mengatur CSS standar element, cukup copas dari yang sudah ada saja.
CSS Dasar Blogger
Langkah pertama masuk ke template editor terlebih dahulu
Tambahkan CSS Standar Element berikut sebelum ]]></b:skin>
|
|
Pembungkus
Selanjutnya kita akan membungkus semua elemen dari header sampai footer menggunakan sebuah elemen baru.
Copy kode berikut dan paste sebelum atau diatas kode <b:section class='header' id='header' maxwidgets='1' name='Header' showaddelement='no'>
|
|
CSS Elemen Dasar Kerangka Blogger
Setelah sudah menambahkan elemen baru untuk pembungkus, kita bisa langsung atur ukuran dan style lainya menggunakan CSS.
Elemen pertama yang akan diatur dengan CSS yaitu body karena merupakan elemen paling luar dalam struktur template
CSS untuk tag body kali ini akan diisi dengan background, ukuran font normal, word-wrap, dll.
Berikut kode CSS untuk tag body silahkan pasang sebelum ]]></b:skin>
|
|
Disini kita akan menggunakan ukuran standar dengan lebar secara keseluruhan yaitu 1024px
Tambahkan kode CSS berikut sebelum ]]></b:skin>
|
|
CSS Standar Heading
Tag heading (h1-h6) merupakan tag untuk judul meliputi judul blog, judul konten, dst.
Ukuran font dari heading biasanya lebih besar dan tebal dari text lain.
Untuk mengatur ukuran heading bisa ditambahkan CSS berikut sebelum ]]></b:skin>
|
|
Simpan template
Coba kita view blog maka tampilan kurang lebih menjadi seperti berikut.
Jika terdapat error atau kesulitan bisa ditanyakan ke Kolom komentar. Atau bisa cocokkan source code kalian dengan source kode punya saya.
Berikut bisa didownload hasil akhir source code pada artikel
hasil akhir
|
|
Atau juga bisa di lihat di sini
https://pastekan.cf/raw/B44slC9Ktm
Selanjutnya : cara meganti font Bloggers