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]
Misal contohnya:
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]
Misal contohnya:
#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]
Misal Contohnya:
#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.
Contoh nya:  
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.

Berlangganan via Email

Berlangganan artikel via email agar kamu mendapatkan info mengenai update artikel dari blog ini via email.


0 Tanggapan untuk "Cara Mengubah Tampilan Blog Agar Keren [Blogger.com]"

Post a Comment