Bani Cyber Blog – Sebelumnya kita telah membahas cara modifikasi template agar jadi responsive←. Supaya dapat memaksimalkan kinerja blog, kamu perlu modifikasi template blog kamu dengan mengubah tampilan pada blog kamu.
Terbaru! Cara Agar Blog Berada Di Halaman Pertama Google
Dalam pertemuan kali ini, kamu akan diajarkan [Bagi yang
belum tau] cara modifikasi template
yang kamu pakai di blog kamu. Tentunya dengan panduan dari saya, yang akan saya
bagikan tipsnya adalah cara mengubah warna dan ukuran pada blog sesuai dengan
selera masing masing. 😊
Tidak terlalu susah untuk memodifikasi tampilan blog, kamu
hanya perlu mengerti kode css. Seperti kode warna HTML, font,dll.
Tapi ada juga blogger yang tidak mau susah susah, maunya langsung
ada dan bisa pakai [gratis]. Namun sudah dibuatkan template gratis pun gak ada
rasa terima kasihnya, credit link yang ada di bagian footer pun dihapus.
Sebelum lanjut ke tahap pengerjaan, kamu perlu mengenal kode
kode dalam dunia HTML. Sebagai berikut:
Body • Wrapper • Header • Post-Wrapper • Content-Wrapper •
Sidebar Wrapper • Footer-Wrapper
Di artikel ini saya tidak sempat
menambahkan tips modifikasi margin/padding [Pengaturan Letak], Mungkin
kapan kapan kalau ada waktu luang akan saya tambah. Baiklah, tanpa berlama lama
lagi. Inilah panduan lengkap mengenai cara
modifikasi tampilan blog, kita mulai dari yang pertama.
1.Modifikasi Body & Wrapper
Body adalah bagian latar belakang dari blog atau bisa
dibilang Sampul, Kamu bisa mengganti
warna body menurut seleramu. Cara menggantinya tidak susah, kamu mau tahu
caranya? Silahkan dibaca:
Mengganti Warna pada Body.
- Seperti biasa, masuk dulu ke Blogger.com
- Buka Template, lalu klik Edit Html
- Cari body { menggunakan [CTRL+F]
body {background:#b1b1b1;margin:0 auto;padding:0 auto;}
- Info Kode:
background: #b1b1b1 » Warna
Background pada Bagian Luar blog/Body
- Save Template
Bantuan Tips
Sebaiknya kamu jangan menggunakan warna yang mencolok agar
tidak menganggu konsentrasi pengunjung yang sedang membaca postingan blog kamu.
Seperti warna merah, orange, kuning dll.
Mengganti background warna dengan gambar pada body.
Seperti pada judul diatas, Sengaja saya selipkan tips ini
agar kamu mengerti cara mengganti warna
dengan background gambar di body [sampul] blog. Ok lah, inilah tips memberi
gambar pada body, silahkan catat:
- Seperti biasa, masuk dulu ke Blogger.com
- Buka Template » Edit Html
- Cari body { menggunakan [CTRL+F]
- Misal contohnya: body {background:#b1b1b1;margin:0 auto;padding:0 auto;color:#232323}
- Tambahkan Url didepan kode Background
- Hasilnya
body {background:#b1b1b1 url(url gambar background kamu) no-repeat;margin:0 auto;padding:0 auto;color:#232323}
- · Save Template
Mengganti warna dan ukuran pada Wrapper
Berikutnya adalah bagian wrapper. Wrapper merupakan pembungkus
dari isi blog kita, biasanya pada bagian ini diberi warna putih atau sesuai
dengan warna background konten. Jika kamu tertarik untuk mengubah warna wrapper, silahkan catat:
- Log in ke akun blogger mu
- Buka Template » Edit Html
- Cari Kode #wrapper { dengan [CTRL+F]
#wrapper {background: #fff;width:1020px;margin:0 auto;padding:0}
Info Kode:
background: #fff » Warna
Background pada Wrapper
width:1020px » Ukuran pada
Wrapper
- Save Template
Bantuan Tips
Sebaiknya gunakan warna putih polos #FFF agar tampilan blog
tidak terlalu mencolok.
2.Modifikasi Header.
Mengubah warna background, font pada Header
Header adalah tempat kamu meletakkan judul dari blog kamu
ataupun logo blogmu. Namun ada juga yang meletakkan judul artikel nya di bagian
header blog. Itu semua tidak terlepas dari namanya SEO. Sekarang marilah kita
bahas bersama cara modifikasi header
yang benar.
- Langsung saja ke Template » Edit Html
- Cari kode #header-wrapper dengan [CTRL+F]
#header-wrapper {background:#fff;padding:0;margin:0 auto;color:#008080}
Info Kode
background:#fff » Warna
Backgound
color:#008080 » Warna Font
- Bisa kamu ganti warnanya, menurut seleramu.
- Save Template.
Mengubah jenis font pada header
Tanpa banyak bacot lagi, langsung saja inilah cara yang benar menambahkan dan mengubah
font pada header judul blog:
- Log In Blogger
- Template » Edit HTML
- Cari header h1.title { [CTRL+F], Jika tidak ada silahkan buat baru
- Tambahkan jenis font yang anda suka.
header h1.title {font:normal bold 28px Arial, sans-serif}
- Save Template
SELANJUTNYA
Nah itulah panduan lengkap untuk memodifikasi template blog pastinya agar terlihat keren, jika ada yang kurang paham silahkan berkomentar.
Al Bani HR Wednesday, November 23, 2016 Blogging
Berlangganan via Email
Berlangganan artikel via email agar kamu mendapatkan info mengenai update artikel dari blog ini via email.
Post a Comment