MODUL 2 TOT : MENGEDIT TEMPLATE SAGUSABLOG
Pada panduan ini, akan kita pelajari bagaimana mengganti warna dasar template blog.
1. Mengganti warna menu navigasi
Silahkan cari kode html: .menu-secondary-container dan pada kode background:, silahkan anda ganti kode warna seperti contoh ini: #1E73BE dengan kode warna lain yang anda inginkan.
Untuk memilih kode warna anda bisa menggunakan tool online disini:
https://www.w3schools.com/colors/colors_picker.asp
Perhatikan kode html sebelum diganti ubah yang dikolom merah
https://www.w3schools.com/colors/colors_picker.asp
Perhatikan kode html sebelum diganti ubah yang dikolom merah
Perhatikan perubahan warna background menu setelah diganti dengan kode warna yang lain
Silahkan rubah juga kode warna background pada baris kode berikutnya:
.menu-secondary li a:hover
.menu-secondary li li a
.menu-secondary li li a:hover
lihat perubahannya berikut ini
.menu-secondary li a:hover
.menu-secondary li li a
.menu-secondary li li a:hover
lihat perubahannya berikut ini
2. Mengganti warna tombol readmore
Silahkan cari kode: .readmore a
pada baris kode ini silahkan anda ganti juga kode warna untuk background sesuai selera anda.
Perhatikan warna tombol readmore dan kode html kode warna sebelum dirubah
gantilah kode html tombol readmore dengan kode warna yang lain.
lihatlah perubahannya
3. Mengganti warna footer Copyrights
Silahkan cari kode: #copyrights, pada baris kode ini silahkan anda ganti kode warna untuk background dengan kode warna sesuai selera anda.
Perhatikan warna footer Copyrights dan kode html kode warna sebelum dirubah
Perhatikan warna footer Copyrights dan kode html kode warna sesudah dirubah
4. Mengganti Gambar Background Body
Silahkan cari kode: body{background:url(
Pada kode tersebut terdapat alamat gambar yang bisa anda ganti dengan alamat gambar background sesuai keinginan anda.
Contoh alamat gambar saya sebelumnya:
background body sesudah diubah
Perhatikan warna footer Copyrights dan kode html kode warna sesudah dirubah
4. Mengganti Gambar Background Body
Silahkan cari kode: body{background:url(
Pada kode tersebut terdapat alamat gambar yang bisa anda ganti dengan alamat gambar background sesuai keinginan anda.
Contoh alamat gambar saya sebelumnya:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAWhUJxpS9ehfTbNE-fwdIB4-a5kmVXmiNTQVpDfe8gq0iyW8q8kJqZEcbxdICPdViEBe5xmXiNslGQHL1CBlrWjoZBfSmjui-vwJCjY6u8fK-_3r6gB_kNptITv2_Yl7QmHc3_fnlGLmrR57N0ujyFjvopOt4J93iwVvhY_m6SFX_TaSOioVt1olgiQ/s615/slide%203.jpg
background body dan kode html sebelum diubah
background body sesudah diubah
.jpeg)
0 komentar:
Posting Komentar