Cara Mempercantik Tampilan Blog Dengan CSS Pada Tema Blog

Mempercantik tampilan blog dengan menambah pernak pernik css itu mudah

Masalah utamanya adalah apakah desain website kita sudah memenuhi elemen penting yang dipersyaratkan oleh google?

Berikut ini adalah hal hal yang harus didahulukan sebelum kita mulai berfikir pernak pernik :

1. Performance (website harus tampil cepat dan aplikasi aplikasi yang dibawa didalamnya tidak membuat web menjadi lemot).
2. Accessibility (apakah web bisa diakses dan digunakan dengan mudah? mobile friendly, navigasi, interaksi, mudah dibaca, dll)
3. Search Engine Optimization

Bila ketiga checklist diatas telah terpenuhi, maka tidak ada salahnya kita mempercantik tampilan blog agar terlihat professional dan keren.

1. Tampilan Blog

Pada dasarnya tampilan blog maupun website semuanya sama, terdiri atas header bagian atas, content di tengah, sidebar di samping, dan footer di bagian bawah

Yang membedakan tampilan blog kita dengan blog lain mungkin hanya sebatas jumlah dan letak sidebar, serta pilihan kombinasi warna theme (tema / template).

Tampilan Header Blog

Header berada di bagian paling atas sebuah website, biasanya disana terdapat 2 elemen yaitu logo dan navigasi.

Tampilan header gurublogger sendiri sangatlah simpel dengan kombinasi sebagai berikut:

• Huruf berwarna hijau kodenya adalah  #2bce8d,
• Huruf oranye kodenya #fe741c,
• Warna background hitam kebiruan #1d2b35, dan
• Box shadow 0 2px 6px 2px rgba(0, 0, 0, 0.2)

Menggunakan tema blog standar buatan blogger ataupun platform lain semuanya sama, tampilan blog adalah kombinasi pilihan warna.

Tampilan Sidebar Blog

Sidebar bisa diletakkan di sebelah kanan maupun di kiri konten utama (tempat artikel) tergantung strategi pemilik blog.

Hal ini terkait dengan optimasi sistem penulisan LTR (left to right) atau RTL (right to left).

Karena bahasa indonesia yang kita gunakan menggunakan sistem LTR maka lebih baik bila sidebar diletakkan di sebelah kanan.

Efeknya adalah pengunjung melihat konten utama terlebih dahulu (membaca dari kiri ke kanan)

Baru kemudian screening menu menu yang kita letakkan pada sidebar di sisi sebelah kanan.

Dan karena sidebar sifatnya adalah sebagai navigasi pelengkap (selain menu navigasi utama) dan  akan turun ke bawah bila website dilihat menggunakan mobile phone, maka sebaiknya tidak didesain terlalu berlebihan.

Prinsip desain sidebar adalah jangan sampai menu menu yang kita letakkan di sidebar menurunkan performa website.

Menggunakan aneka widget seperti recent post, most populer, feature post memiliki kekurangan dan kelebihan tersendiri.

• Menggunakan widget most popular post membuat pesaing kita mudah mengetahui keyword dan rahasia rahasia lain terkait isi konten andalan, belum termasuk penggunaan javascript yang menurunkan performa website.
• Menggunakan widget related post memudahkan navigasi blog sesuai tema konten yang dibaca oleh pembaca, namun sifatnya yang auto membuat postingan yang tampil di sebelah kanan menjadi acak

Bila dihitung untung rugi penggunaan widget otomatis pada sidebar, secara pribadi gurublogger menilai lebih banyak ruginya.

Solusinya adalah menggunakan fake popular post dan fake recent post, toh terlihat sama.

Dengan menempatkan link link secara manual maka kita bebas mengatur web flow

…. setelah pembaca melihat konten ini…. kemudian akan melakukan klik disini ….  membaca lagi konten ini . . klik disini dst

kita suguhkan kue kue terenak kepada pengunjung blog agar mereka merasa nyaman dan betah membaca artikel kita satu demi satu.

Terkait tampilan dari sisi desain, gurublogger sendiri hanya bermain warna oranye pada judul, memberikan box shadow dan sebuah sticky sidebar.

Sementara isi menu dibuat manual dengan menambahkan beberapa link sesuai dengan strategi workflow.

Tampilan Footer Blog

Pertanyaan awal dari gurublogger adalah, kapan terakhir kali teman teman melakukan klik pada menu di bagian footer?

Tidak pernah?

Footer adalah bagian website yang paling “tidak banyak dilakukan optimasi”, karena memang bagian ini kurang bermanfaat.

Setelah netizen selesai membaca artikel di blog / website, maka kita memberi opsi untuk melakukan navigasi di bagian atas.

Kemudian kita berikan alternatif untuk melakukan klik di sidebar, dan bila tidak terlalu tertarik dengan isi sidebar maka kita suguhkan menu footer.

Tujuannya adalah agar pengunjung tetap berada di blog, membaca artikel lain dan tidak menutup blog.

Namun fakta yang terjadi adalah menu menu pada footer tidak banyak membantu.

Gurublogger sendiri hanya menggunakan background untuk mempercantik tampilan website tanpa menu navigasi pada footer.

Tampilan Konten Utama

Kalau ada bagian blog yang harus dilakukan operasi plastik besar besaran agar terlihat cantik.

Maka bagian itu adalah main content “bagian konten utama”, tempat artikel didisuguhkan.

Optimasi konten yang sifatnya wajib :

• Font type (tipe font yang kita pakai)
• Font color (warna font)
• Font size (ukuran font)
• Line height (jarak baris sebuah kalimat …. 1 spasi 2 spasi dll)

Sebelum kita bermain dengan warna warni, baiknya perhatikan beberapa hal terkait font.

Enak dibaca atau tidak, apakah hurufnya kekecilan dan bikin pusing, apakah warnanya kurang jelas dll

Banyak blog / web yang terkena penalti search engine hanya karena tulisan yang dipakai tidak lolos uji accessibility bila dilihat menggunakan handphone.

(Beberapa kode CSS dan HTML untuk mempercantik isi konten bisa dilihat di akhir halaman ini)

2. Mengganti Tema Blog

Cara paling mudah untuk mempercantik tampilan blog adalah dengan mengganti tema blog (template), make over tampilan blog secara keseluruhan.

Terdapat ribuan tema blog baik itu yang berbayar maupun gratis, masalah utamanya adalah mencari tema blog yang cocok dengan selera kita.

Setelah ketemu tema yang cocok tantangan selanjutnya adalah memahami script yang tertulis didalamnya

Cara Mengganti Tema Blog

Setelah file template terdownload, cara mengganti tema blog kurang lebih seperti gambar dibawah ini :

1. Klik theme
2. Klik 3 titik di samping my theme
3. Pilih restore
4. Pilih Upload file

5. Pilih directory tempat template di download
6. Pilih file Guru Blogger V.1.1.0
7. Klik Open
8. Selesai

Selengkapnya terkait panduan cara mengganti tema blog dapat dibaca di ⇨ Cara memasang template blog

3. Trik CSS Untuk Mempercantik Tampilan Blog

Menambahkan widget serta aneka slide show kadang hanya berpengaruh negatif pada performa website.

Dan pada kenyataannya netizen berkunjung ke website kita karena membutuhkan informasi, bukan karena ingin melihat tampilan menu yang menawan.

Berikut ini adalah beberapa trik sederhana yang digunakan oleh gurublogger untuk memberi penekanan pada topik penting dalam artikel tanpa harus mengorbankan performa.

Dengan trik sederhana ini, tampilan blog terlihat lebih dinamis dan modern tanpa harus mengorbankan performa.

Sticky Element

Untuk membuat sebuah element menjadi sticky (tetap menempel pada saat dilakukan scroll), caranya sangat mudah :

Tambahkan kode css di template / theme yang teman teman gunakan, letakkan sebelum </style> atau sebelum ]]></b:skin> kemudian save template.

CSS Code:

Untuk memanggil kode sticky tinggal tambahkan class=’sticky’ pada element yang hendak di sticky.

Lihat tampilan sidebar paling bawah website ini ketika dilakukan scroll, gurublogger menggunakan mode sticky untuk menu tersebut.

HTML Code:

atau

Kode ini juga dapat digunakan pada elemen elemen lain seperti header, navigasi dll

Colorful Border

Teknik ini sederhana namun cukup ampuh dalam mempercantik tampilan blog.

Pada dasarnya hanya memberikan border berwarna warni ketika kita hendak menekankan sebuah topik pada artikel.

Contoh tampilan

CSS Code:

Html Code untuk memanggil element:

Box Shadow Elemen

Cara ketiga untuk mempercantik tampilan blog atau website dengan menambahkan box shadow / bayang bayang.

Contoh tampilan box shadow

CSS Code:

HTML Code untuk memanggil elemen:

Menambahkan Blocquote

Salah satu keuntungan menggunakan blockquote selain untuk memberi penekanan adalah membuat artikel lebih berwarna

Usahakan untuk selalu menggunakan blocquote dalam setiap artikel yang kita tulis

Contoh blockquote

 The truth is tah any good modern rifle is good enough

The determining factor is the man behind the gun

~Theodore Rosevelt

Setiap tema / template blog telah dilengkapi dengan design blockquote masing masing,

Bila berminat dengan kode blockquote yang digunakan oleh GuruBlogger, berikut ini adalah kodenya :

CSS Code:

Tips Mendesain Blog

Terakhir, tips dari gurublogger sebelum mendesain blog sesuai dengan selera masing masing :

1. Selalu lakukan backup sebelum memulai,
2. Dahulukan performance, accessibility, dan SEO,
3. Tidak perlu berlebihan.

Gurublogger sendiri ketika mendesain sebuah template blog biasanya hanya terkait dengan modifikasi border, box shadow, boder radius, sticky, warna, dan permainan gambar.

Selamat berexpresi