ELEMEN BLOG YANG WAJIB PUNYA!

Assalamu'alaikum.

Beberapa hari ini saya lagi semangat mendesain ulang blog saya. Hmm, biasa nih, saya orangnya suka penasaran. Habis berburu pelajaran gratis tentang blog design di internet, akhirnya saya praktekkan juga. Alhamdulillah, sekarang blog saya sudah tampil lebih chic dan simple. Meskipun ada beberapa perombakan yang tergolong sulit, tapi hasilnya tetap terlihat memuaskan. 

Kalau menurut teman-teman sendiri, sebenarnya apa aja sih yang perlu kita tampilkan di dalam blog  agar blog kita terlihat bagus dan memikat pembaca? Well, tidak hanya tulisan yang menarik, tetapi desain dan tata letak setiap elemen juga sangat berpengaruh terhadap penampilan blog kita.

Jadi, ada beberapa elemen blog (atau biasa disebut widget) yang wajib kamu punya jika kamu ingin blogmu terlihat lebih menarik oleh pembaca, dan tentunya, akan meningkatkan jumlah pembaca setiamu. Berikut saya share daftar elemen blog dan tautan halaman web yang bisa kamu gunakan sebagai rujukan dalam mendesain ulang blogmu!

KOLOM PROFIL

Tak kenal maka tak sayang. Nah, biar para pembaca tahu bahwa kamu adalah pemilik blogmu, tentu saja, kamu perlu menampilkan kolom profil di dalam blogmu. Selain itu, pembaca tentu saja juga dapat berinteraksi denganmu, dan yang tidak kalah penting, kamu bisa memiliki koneksi jejaring yang lebih luas saat para pembacamu tahu apa latar belakangmu, aktivitas keseharianmu dan kegiatan favoritmu.

Kamu dapat menampilkan kolom profil pada bagian sidebar atau pada halaman tersendiri untuk lebih lengkapnya. Mau buat kolom profil sidebar seperti yang ada di blog saya, kamu bisa ikuti tutorial berikut ini.

POPULAR POSTS

Jika kamu ingin tulisan atau artikelmu go viral, maka kamu harus menampilkan widget yang satu ini. Popular posts tentunya akan memberi tahu kepada pembaca, tulisan atau artikel mana saja yang sudah sering dibaca oleh pengunjung sebelumnya. Dengan begitu, pembaca lain akan ikutan penasaran. 

Kini, di internet sudah tidak susah lagi untuk mencari tutorial bagaimana cara menampilkan popular posts yang nggak biasa. Beberapa bentuk kolom popular posts yang bisa kamu tiru, bisa kamu lihat di sini atau di sini.

KONEKSI MEDIA SOSIAL

Siapa yang hari gini nggak punya media sosial seperti Facebook, Twitter atau Instagram? Media sosial ternyata punya banyak peranan yang penting untuk meningkatkan statistik kunjungan blog kamu. Media sosial tidak hanya membantu menghubungkan blogmu dengan semua jejaring pertemananmu di dunia maya, tetapi juga memudahkan pembaca untuk membagi informasi yang mereka dapatkan dari blogmu, sehingga blogmu akan lebih cepat dikenal oleh banyak orang, di luar jejaring pertemananmu.

Koneksi social media bisa kamu tampilkan ke dalam dua bentuk, satu berfungsi sebagai sharing button, atau tombol untuk membagi tulisan atau artikel blogmu ke semua jenis social media (--- biasanya tombol ini muncul di bagian bawah masing-masing tulisan atau artikel blog); dua berfungsi sebagai tombol media sosial pribadi yang dengan mudah akan menghubungkan pembaca pada akun-akun media sosialmu, sehingga mereka akan mudah menfollownya. 

Kamu tentu saja bisa menampilkan koneksi media sosial di dalam blogmu. Sekarang sudah banyak situs yang menyediakan layanan penyedia social media widget secara gratis untuk blog. Beberapa tombol koneksi media sosial bisa kamu tambahkan di bawah masing-masing artikel yang kamu tulis menggunakan situs addthis atau shareaholic, yang memudahkan pembaca share tulisanmu di akun-akun media sosial mereka. Sementara itu, link ini bisa membantu kamu menginstal ikon dari akun-akun media sosial kamu di dalam blog.

KOLOM KONTAK

Namanya juga mau berinteraksi, gimana caranya kalau pemilik blog nggak mencantumkan alamat email yang bisa dihubungi pembaca sewaktu-waktu? Jika kamu ingin pembacamu bisa dengan mudah berkomunikasi denganmu, jangan segan untuk mencantumkan alamat emailmu di dalam blogmu. Kamu bisa meletakkannya di halaman profil atau membuat halaman kontak terpisah yang dapat membantu pembaca mengisi kolom kontak yang telah kamu sediakan. Tentunya, pertanyaan yang dikirimkan oleh pembaca akan langsung kamu terima melalui emailmu.  Mudah kan? Biar nggak bingung, kamu bisa lihat kok tutorial mudahnya membuat halaman kontak terpisah di sini.

Bagaimana? Sudah tahu 'kan elemen blog apa saja yang wajib kamu masukkan ke dalam blogmu jika kamu ingin menarik lebih banyak minat pembaca terhadap blogmu? Coba cek, sudahkah elemen tersebut ada di dalam blogmu? Jika belum, kini saatnya kamu mendaur ulang blogmu. Oh ya, jangan segan untuk kasih pendapatmu melalui komentar di bawah ini ya, kira-kira adakah elemen lainnya yang perlu ditampilkan selain elemen-elemen di atas?

Happy blogging! ;)

TIPS MEMBUAT HEADER

Assalamualaikum.

Dear all, 

Alhamdulillah saya bisa mewujudkan keinginan saya yang sudah lama belum kesampaian. Saya akhirnya bisa memberikan tips dan tutorial seputar blog. Yup, tutorial tentang bagaimana mempercantik halaman blog atau personal website. Jujur lho, saya bukan lulusan desain grafis ataupun ahli komputer, tapi kecintaan saya akan desain grafis membuat saya senang belajar secara mandiri alias otodidak. Alhasil saya bisa membuat personal blog yang menurut saya sudah sangat lumayan dan menarik. Sudah banyak juga teman yang meminta kepada saya agar diberi tahu cara-cara membuat blog dan bagaimana mempercantiknya. Well, here it comes. 

Tutorial yang pertama tentu saja bagaimana membuat header. Header itu menurut saya hal pertama yang harus diperhatikan para blogger atau pemilik situs, karena header adalah hal pertama yang dilihat oleh pengunjung situs. Sebisa mungkin buatlah yang eye-catchy. Tidak harus sophisticated atau bagus sekali, kalau menurut saya yang penting header itu menampilkan ciri khas blog atau situs kita. Header dibuat sesuai dengan isi dari blog kita. 



Header blog saya di atas sederhana kalau menurut saya. Tapi saya sengaja memberikan ilustrasi diri saya yang kebetulan saya buat sendiri. Menurut saya, dengan meletakkan gambar ilustrasi saya tersebut, header di atas sudah cukup menampilkan ciri khas saya.

Bagaimana? Sudah siap membuat header untuk blogmu? Tanpa panjang lebar, yuk disimak tips berikut.

1.  Tentukan ukuran halaman blog

Pertama kita harus mengetahui besar pixel halaman blog kita. Caranya mudah. Cukup masuk ke halaman template designer. Pada contoh di bawah, saya menggunakan ukuran halaman standar (default), yaitu lebar (width) keseluruhan 960 pixel dan 310 pixel khusus untuk sidebar atau bagian kolom di sebelah kanan yang biasa digunakan untuk menaruh widget atau link.

Setelah sudah merasa yakin dengan ukuran halaman blog kita, tahap selanjutnya adalah menyesuaikan warna yang akan digunakan dalam keseluruhan tampilan blog.

2.   Sesuaikan warna header dengan keseluruhan warna pada blog

Mengapa sebelum membuat header kita perlu tahu warna apa saja yang akan digunakan, termasuk warna untuk seluruh tampilan blog (warna tulisan pada judul postingan, judul widget, tanggal, dll)? Karena pada dasarnya kita ingin header kita bisa senada dengan keseluruhan warna pada tampilan blog. Istilahnya, kita tidak mau 'kan kalau warna yang kita gunakan untuk memperindah blog kita malah justru jadi tidak karuan dan saling bertabrakan. Percaya deh, mengetahui sedikit tentang teknik ini akan membuat kita makin asyik memperindah blog kita. 

Untuk menyesuaikan warna yang akan digunakan, saya biasa menggunakan color swatches atau color palette. Jadi, istilahnya seperti kombinasi warna. Misal, hijau tosca itu bagusnya digunakan bersama warna seperti ungu, putih susu, dll. Mau lebih mudahnya, cek ke colourlovers.com. Kamu tinggal klik kombinasi warna yang kamu suka, kemudian nanti akan muncul detail masing-masing warna termasuk kodenya yang penting saat kamu membuat header.

Untuk situs yang lebih lengkap, kamu bisa baca di artikel berikut ini.

3.   Membuat header 

Waktunya membuat header!! Untuk membuat header kamu perlu memiliki software photo editor dan design seperti Adobe Photoshop. Kamu mungkin mengenal banyak software lain yang sejenis, tapi sementara ini, saya cuma bisa memberikan tutorial dengan menggunakan Photoshop, he he he. Oya saya menggunakan Adobe Photoshop 7.0. Kalau teman-teman ada yang menggunakan versi yang lebih up to date akan lebih baik :)

Oke, pertama kita perlu membuat dasar (background) dari header kita dengan membuat image baru.

Sesuaikan ukuran lebar gambar header kita dengan lebar halaman blog kita. Ukuran panjang (height) kita buat 350 pixel. Perlu diperhatikan untuk pilihan contents, jika warna dasar blog kita putih (seperti blog saya), lebih baik warna dasar untuk header (contents) pun dibuat putih. Tapi jika tidak, ganti dengan warna transparan.

Selanjutnya, aktifkan Ruler untuk memudahkan meletakkan tiap objek dalam header. Caranya dengan klik View dan Ruler.

Jika diperbesar, tampilan akan seperti di bawah ini. Tentukan unit pengukur (ruler), apakah dalam cm atau pixel. Untuk lebih mudahnya kita gunakan pixel. Double click skala ukuran (lihat tanda merah pada gambar di bawah). Kemudian pilih skala unit pixel. 

Setelah itu, buat garis tengah yang akan menjaga objek dalam header tetap seimbang. Caranya, dengan menampilkan garis petunjuk (guide). Klik View --> New Guide, kemudian pilih Vertical dan isi kotak lebar pixel dengan setengah dari ukuran header kita, yakni 480 pixel. Jika sudah, pada layar akan muncul garis tengah berwarna biru. 

Nah, tadi itu baru persiapan, sekarang kita mulai berkreasi membuat header-nya. Di sini, saya coba membuat header baru untuk blog saya. Kamu bisa memulai membuat tulisan dengan judul blog kamu. Gunakan jenis font seunik mungkin. Kamu bisa mengunduhnya dari situs penyedia font gratis seperti dafont.com. 

Jika sudah, sesuaikan besar dan warna tulisan sesuai dengan yang kamu inginkan. Untuk mengubah warna, klik dua kali kotak warna, kemudian pilih warna yang sesuai dengan keinginan kamu tersebut. Kamu bisa menggunakan color swatches yang telah disediakan oleh Photoshop atau kamu juga bisa menggunakan kombinasi warna yang sudah kamu cari di situs color palette. Kamu cukup copy kode warnanya, lalu pastekan pada kotak kode. 

Kita sudah buat tulisan dengan judul blog kita, sekarang saatnya memberikan objek gambar pada header. Di sini saya masukkan gambar ilustrasi yang saya unduh secara gratis. Kamu juga bisa mengunduhnya di sini. Jangan lupa sesuaikan ukuran gambar secara proposional dengan judul blog tadi. Cukup dengan menekan tombol ctrl T, maka kamu akan dengan mudah membesarkan atau mengecilkan ukuran objek. Atau untuk mudahnya, kamu bisa menentukan berapa persen ukuran objek akan dikecilkan (lihat baris atas dibawah Window). Misalnya pada tutorial ini, saya set 70% untuk panjang dan lebar objek.

Langkah selanjutnya, saya ingin memberikan sedikit sentuhan warna agar header tidak terlalu 'garing'. Sentuhan warna ini bisa diberikan dengan menggunakan brush. Pertama-tama, buat layer baru. Letakkan layer baru tersebut di antara tulisan judul blog dan objek gambar ilustrasi tadi. Jika sudah, klik tombol brush di kolom kiri kemudian atur ukuran brush dan warna yang kamu inginkan. Di sini saya menggunakan warna merah muda agar senada dengan ilustrasinya. Ukuran brush saya setting 130 dengan tipe no. 19, opacity saya buat 56 px. 

Setelah setting warna dan ukuran brush sudah siap, maka sapukan brush tadi di tengah-tengah header. Jangan khawatir jika bentuk pulasan yang akan dihasilkan sedikit tidak rapi. Jika sudah, jangan lupa set layer baru tersebut menjadi multiply (lihat gambar di bawah). Fungsinya agar pulasan brush tidak tumpang tindih dengan tulisan judul dan objek gambar. 

Sebagai final touch, rasanya kita perlu memberikan sedikit tulisan yang mungkin merupakan penjelasan dari judul blog kita tadi. Pada tutorial ini, saya hanya memberikan tambahan keterangan tulisan "A blog by Anissa Rizkianti". Detailnya bisa kamu lihat step-by-step pada gambar di bawah ini. 

Ingat, ini optional ya! Jadi, kalo menurut kamu tiga elemen tadi sudah cukup, kamu bisa selesai membuat headernya. :)

*Membuat garis pembatas untuk dua tulisan pada header

Jika kamu suka, kamu bisa menambahkan garis pembatas di antara dua tulisan dalam header kamu. Caranya pilih line tool, dengan ukuran tebal garis 1 px. Kemudian tentukan warna garis tersebut. Di sini saya pilih warna pink muda (lihat gambar di bawah).

4.  Menampilkan header pada blog 

Wah, headernya sudah selesai dibuat. Selanjutnya tentu saja menampilkan header tadi dalam blog kita. Sebelum itu, kita harus menyimpan header secara tepat. Simpan header menggunakan perintah Save for web. Mengapa? Kalau tidak salah, agar ukuran pixel tetap disesuaikan untuk tampilan web. 

File >> Save for web.

Lalu pilih Optimized  dengan tipe gambar .png dan transparan. Hal ini dimaksudkan agar header yang nanti akan dipasang tetap berwarna latar putih.

Setelah disimpan, kamu sudah bisa memasangnya pada bagian Layout, widget Header. 

Bagaimana? Susah-susah gampang ya? He he he. Yang pasti kamu bisa latihan membuatnya sendiri dari komputer atau laptop kamu. Sekian dulu tutorial pertama saya. Jika kurang jelas, silahkan komen di bawah artikel ini ya. Good luck! :)