Showing posts with label Blog Tutorials. Show all posts
Showing posts with label Blog Tutorials. Show all posts

Sunday, March 26, 2017

Tips: How to Blog Like A Pro



Adakah di antara kamu yang ingin jadi blogger terkenal? *Ayo, cung!

Siapa yang nggak mau jadi blogger terkenal sekelas Diana Rikasari, Stella Lee, atau Andra Alodita. Saya juga mau! Bagi saya, kamu nggak harus jadi artis selebgram atau rajin ngendorse dulu agar menjadi seorang blogger terkenal. Membuat tulisan yang banyak 'dicari' juga bisa jadi salah satu cara kamu agar blog kamu (dan kamu tentunya) lebih mudah dikenal sama orang lain. Jadi berbahagialah buat kamu yang suka banget nulis karena hal ini akan jadi stepping stone untuk menjadi seorang blogger terkenal. 

Eh tapi kali ini saya nggak mau ngebahas soal tips menjadi seorang blogger terkenal *karena saya juga bukan seorang blogger terkenal, hehe*, tapi saya akan membagikan tips mengenai cara agar blog menjadi lebih menarik oleh pembaca. Salah satunya adalah dengan membuat blog kamu naik level satu tingkat dengan membuat blogmu seperti sebuah blog yang profesional. Yes, everyone now can blog like a pro. Beberapa situs di internet bisa menjawab segala kebutuhanmu untuk membuat blogmu one step ahead. Tips saya berikut mungkin bisa membantu kamu agar bisa ngeblog seperti seorang pro. Yuk, disimak!


Mempercantik judul blogpost dengan Canva

Kalau yang suka main ke blog saya beberapa waktu terakhir, mungkin sering mendapati saya menggunakan gambar untuk tiap blogpost yang saya tulis. Atau kamu yang suka mencari inspirasi di Pinterest, pasti suka lihat gambar-gambar thumbnail blog yang bagus-bagus. Nah, saya mau kasih bocoran nih. Kamu tidak perlu menggunakan Adobe Photoshop ataupun software untuk desain yang lain. Kamu bisa membuat hal yang sama seperti yang saya buat cukup dengan menggunakan Canva. Canva termasuk salah satu situs favorit saya. Saya tidak hanya menggunakan Canva untuk membuat blogpost image, tetapi juga keperluan desain lainnya, seperti desain hamper, header dan sebagainya. Meskipun bukan murni free online website, tapi Canva masih memiliki fitur gratis yang bisa kamu manfaatkan. Kamu bisa bebas mendesain dengan ukuran yang kamu inginkan. Canva memberikan berbagai pilihan mulai dari ukuran gambar untuk social media hingga ukuran kertas umum seperti A4 atau kwarto (Q). Selain itu, kamu juga bisa berkreasi dengan memilih berbagai template gambar yang sudah disediakan oleh Canva di bagian layouts. Kamu pun tinggal mengganti jenis font yang kamu sukai serta mengganti gambar melalui fitur uploads. Mudah 'kan? Jika kamu tidak memiliki gambar yang bagus untuk dijadikan latar judul blogpost kamu, kamu bisa mengunduh secara gratis di situs free stock photos. Dua situs yang selalu saya gunakan antara lain Pexels dan Pixabay. Semua foto yang disediakan di kedua situs tersebut benar-benar free atau berlisensi CC0 (Creative Common Zero license). Artinya, kamu bebas menggunakannya baik untuk tujuan yang personal atau komersial tanpa harus menyebutkan sumbernya. Tertarik mencoba?   


Memilih ukuran desain gambar (http://canva.com/)

Fitur layouts untuk memudahkan mencari desain (http://canva.com/)


Menambahkan pop-up subscribe widget 

Supaya blog kamu terlihat lebih profesional, mulailah untuk menyingkirkan widget yang hanya berfungsi untuk tampilan estetika saja, misal jam, kalender, gambar flash dan lain sebagainya. Kamu sebaiknya mulai memikirkan untuk menggunakan widget yang lebih berguna, misalnya widget yang berfungsi sebagai navigasi pembaca dalam menemukan artikel blog yang mereka butuhkan. Buat kamu pengguna platform Blogger seperti saya, kamu bisa menggunakan beberapa widget, salah satunya subscribe form atau formulir berlangganan. Widget ini berfungsi untuk mengirimkan artikel blog kamu pembaca langsung ke email mereka. Namun, mereka harus memasukkan alamat email mereka terlebih dahulu di formulir berlangganan yang kamu sediakan. Kamu bisa menggunakan form statis yang biasanya muncul di bagian sidebar, atau kamu juga bisa mengaktifkan pop-up subscribe widget seperti yang saya gunakan dalam blog ini. Widget ini bagus banget buat meningkatkan pengunjung ke blog lho! Setiap kamu meng-update artikel blog, maka pemberitahuan akan masuk ke email pembaca dan tidak menutup kemungkinan mereka juga akan membuka email dan mampir ke blog kamu. Karena saya bukan seorang desainer grafis atau ahli IT, saya lebih senang membuat versi yang instan. Kamu cukup meng-instal formulir berlangganan dari beberapa situs seperti AddThis, MailChimp atau GetSiteControl. Kamu hanya perlu melakukan registrasi, kemudian kamu diarahkan untuk mendesain subscribe widget dari berbagai pilihan yang sudah disediakan oleh situs tersebut. Namun, sebelum itu jangan lupa untuk memastikan widget terinstal di blog kamu dengan memasukkan kode html ke bagian Blogger template.

Tampilan home pada situs GetSiteControl (http://getsitecontrol.com/)

Membuat subscribe widget (http://getsitecontrol.com/)

Cara mengaktifkan widget di blog (http://getsitecontrol.com/)


Memasukkan profil singkat penulis pada tiap artikel blog

Hal lain yang bisa membuatmu terlihat seperti seorang blogger profesional adalah dengan menambahkan profil singkat penulis di bawah postingan blog. Meskipun cara ini lebih cocok digunakan untuk blog yang ditulis oleh lebih dari satu penulis, namun buat kamu yang memiliki sebuah personal blog, nggak ada masalah kok untuk memasang fitur ini. Dalam profil tersebut, penulis biasanya menampilkan foto dan deskripsi singkat tentang dirinya, atau bisa juga deskripsi tentang blognya tersebut. Selain berisi deskripsi singkat profil penulis, fitur ini juga bisa digunakan untuk mencantumkan acknowledgement atau ucapan terima kasih kepada pembaca karena telah mampir dan membaca artikel blogmu. Tutorial berikut mungkin bisa membantumu membuat kolom profil penulis.


Menulis artikel blog yang SEO friendly


Kalau tiga tips di atas berhubungan dengan desain blog, maka tips saya kali ini lebih menitikberatkan pada konten. Mungkin banyak dari kamu yang tahu cara menulis secara lancar, namun saat ini kamu perlu tahu apakah artikel yang kamu tulis tersebut tergolong SEO friendly atau tidak. Istilah apa sih itu? SEO merupakan singkatan dari Search Engine Optimization, sedangkan yang dimaksud dengan SEO friendly adalah artikel yang 'bersahabat' dan berkualitas di mata mesin pencari, seperti Google, Yahoo, Bing dan masih banyak lagi. Nah, kalau artikel blog kamu masuk kategori artikel yang SEO friendly tandanya artikel kamu mudah menempati halaman pertama search engine berdasarkan kata kunci yang diketikkan ke mesin pencari. Atau lebih sederhananya, blog kamu akan lebih mudah dan cepart terindeks di mesin pencari. Jika kamu ingin artikel blogmu lebih SEO friendly, maka ada beberapa hal yang mesti kamu perhatikan, di antaranya menggunakan keywords yang banyak dicari, memperbaiki penulisan judul yang lebih menarik, menuliskan konten yang relevan, membuat link antar artikel yang saling berkaitan (internal linking) serta tips-tips lain. Berikut adalah beberapa blog dan situs yang menjelaskan secara detail tentang bagaimana cara menulis artikel yang SEO friendly. Monggo dicek.
1. Menulis Artikel yang SEO Friendly Terbukti Berhasil (http://www.caraspot.com/menulis-artikel-yang-seo-friendly-terbukti-berhasil.html)
3. 15 Cara Ampuh Menulis Artikel SEO Friendly yang Belum Anda Tahu (http://www.rohadiright.com/cara-menulis-artikel-seo-friendly)


Membeli domain 

Mungkin tips terakhir dari saya ini sedikit membutuhkan effort dari kamu. Memiliki domain sendiri (custom domain) kerap menjadi keinginan banyak blogger, apalagi buat mereka yang sudah melanglang buana cukup lama di dunia blogging. Tapi adakah di antara kamu yang justru bertanya seperti ini,
"Buat apa beli domain? Wong sudah ada yang gratis, tinggal pake..."
Hmm, iya sih gratis, tapi bagi kamu yang ingin serius ngeblog, tentunya memiliki domain sendiri akan membuatmu jadi terlihat lebih profesional. Selain itu, menggunakan custom domain memungkinkanmu untuk menerima berbagai tawaran kerjasama dengan pihak lain, baik itu berupa tawaran pemasangan iklan dari perusahaan advertising hingga tawaran menulis beberapa produk sponsor. Hal pertama yang tentu harus kamu lakukan adalah mendaftarkan nama domain barumu ke penyedia nama domain. Salah satu situs penyedia nama domain yang memiliki kualitas baik dan terpecaya adalah Rumahweb.com. Saya pun membeli domain untuk blog ini di situs tersebut. Meskipun kamu perlu membayar sejumlah uang untuk membeli domain yang telah disediakan, jumlah biaya yang ditawarkan berlaku untuk satu tahun. So, it's worth trying! Cek artikel blog berikut untuk tahu tentang cara mengganti domain lama kamu (blogspot.com) dengan domainmu sendiri, contohnya .com, .net atau .id.

Tampilan muka Rumahweb (http://www.rumahweb.com)

***

Bagaimana tips-tips di atas? Semoga bisa dipraktekkan ya, sehingga mudah-mudahan sebentar lagi kamu akan jadi seorang blogger profesional. Good luck! :)

Sunday, July 12, 2015

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! ;)

Saturday, June 27, 2015

MENAMPILKAN FOTO INSTAGRAM DALAM BLOG



A photo posted by Anissa Rizkianti (@anissarizki) on


Assalamu'alaikum.

Rekan blogger,

Seperti kita ketahui, Instagram kini menjadi salah satu media sosial yang banyak digemari oleh berbagai lapisan masyarakat. Melalui Instagram, kita dapat memposting segala macam jenis foto atau gambar, mulai dari hasil fotografi, masakan, tempat-tempat wisata atau hang-out seru, bahkan produk-produk jualan bisa dengan mudah diunggah ke dalam Instagram.  Tahukah kamu kalau kamu bisa dengan mudah menampilkan postingan foto dari akun Instagrammu ke dalam blog? 

Pertama kamu harus membuka akun Instagram kamu melalui PC atau laptop. Pilih foto yang akan kamu tampilkan dalam blog.

























Pada bagian pojok kanan bawah foto, klik tanda tiga titik kemudian pilih embed.


















































Setelah itu, akan muncul kode html yang harus dicopy dan pastekan pada halaman blog kita. Kita dapat memasukkan tiap caption foto yang akan kita tampilkan dengan mengklik pilihan include caption. Ketika copy embed code telah diklik maka kode akan otomatis tercopy

Untuk memasukkan kode tersebut ke dalam halaman new post, maka kamu perlu paste kode ke dalam halaman html-nya. Jangan dipaste pada bagian compose








































Saat kamu kembali ke menu compose, kamu akan sadar, bahwa gambar belum muncul, namun informasi Instagram sudah tertulis. Tidak perlu khawatir karena ketika kamu publikasikan postingan tersebut, foto akan muncul pada halaman blog. 

Selamat mencoba!

Sunday, June 14, 2015

MEMBUAT HALAMAN KONTAK PADA BLOG


Assalamualaikum.


Sahabat blogger, tahukah kamu kalau sekarang kamu bisa membuat halaman kontak pada blog dengan menggunakan Google Form yang disediakan pada Google Drive? Tutorial ini khusus buat kamu pengguna Blogger ya.

Pertama, kamu perlu membuat format form kontak pada aplikasi Google Drive. Sign in menggunakan akun Google. Setelah masuk, arahkan kursor pada tombol Newkemudian pilih Google FormsKemudian kamu akan diminta untuk membuat form baru. Buat tiap pertanyaan pada isian form dengan mulai membuat pertanyaan tentang nama atau “Your name”. Isikan pada kolom Question Title. Kemudian untuk tipe pertanyaan (Question Type) pilih Text

Untuk membuat kolom pertanyaan atau isian form yang baru, klik Add Item  lalu pilih Text. Ulangi terus hingga selesai membuat kolom isian alamat e-mail atau “Your e-mail” dan kolom isian pesan atau “Your message”.

Khusus untuk kolom isian pesan atau “Your message”, pilih Paragraph Text pada pilihan Question Type. Kamu dapat membuat validasi data isian pesan yang dimasukkan oleh pembaca dengan membatasi jumlah karakter, misalnya 100 karakter. Terakhir, jangan lupa untuk mengklik Required question pada pertanyaan nama dan alamat e-mail yang menandakan bahwa kedua pertanyaan tersebut wajib diisi.

Jika format form kontak sudah dibuat, maka selanjutnya adalah memberikan kalimat konfirmasi yang muncul setelah pesan telah diisi dan dikirim ke alamat e-mail kamu. Pada bagian Confirmation Page, tulis kalimat konfirmasi tersebut sesuai yang kamu inginkan. Kemudian uncheck pilihan Show link to submit another response. Jika sudah, maka kirim form kontak yang telah jadi dengan mengklik Send Form.

Untuk meletakkan form kontak pada blog, kamu harus menyalin atau mengkopi HTML form tersebut. Setelah mengklik Send Form, pilih Embed. Copy HTML yang ada lalu paste pada page baru. Caranya, pada halaman Dashboard Blogger, klik Page. Kemudian klik New Page. Pada bagian HTML, paste-kan HTML kemudian pilih “Don’t allow, hide existing” pada Options Reader comments. Hal ini mencegah munculnya kolom komentar di bawah isian form pada page tersebut. Jangan lupa beri judul page. Jika sudah klik publish, maka page Contact akan muncul.

Selamat mencoba!

NB: Tutorial secara lengkap dapat kamu lihat dan unduh di bawah ini.



Saturday, May 30, 2015

MENGGANTI NAVIGASI "OLDER POSTS" DENGAN JUDUL POSTINGAN

Assalamu'alaikum.

Teman blogger mungkin sering melihat sebuah blog yang menampilkan navigasi untuk postingan lama dan baru dengan judul postingan. Hal ini tentu saja akan mempermudah pengunjung blog untuk melihat postingan sebelum dan sesudahnya, 'kan. Lalu, bagaimana ya caranya?

Tidak perlu khawatir. Setelah menemukan tipsnya dari hasil pencarian di internet, saya akan berbagi tips bagaimana cara merubah teks navigasi postingan lama dan baru dalam blog kalian hanya dengan beberapa langkah berikut ini.
Menambahkan kode jQuery
Pertama-tama, kita perlu menambahkan kode jQuery atau JavaScript pada template blog.

1.  Template  >  Edit HTML

2.  Cari kode </head> kemudian paste-kan kode berikut tepat di atas kode </head> 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

Menambahkan kode di Widget HTML
Setelah itu, kita perlu menambahkan kode JavaScript tertentu dengan memasukkan widget HTML pada laman Layout.

1.  Layout  >  Add a Gadget

2.  Pilih HTML kemudian masukkan kode berikut

<!-- Replacing Older and Newer post Start -->
<!-- crawlist.blogspot.com -->
<style type="text/css">
#blog-pager-newer-link {font-size:85%;width:200px;text-align:left;}
#blog-pager-older-link {font-size:85%;width:200px;text-align:right;}
</style>
<script type="text/javascript">
$(document).ready(function(){
var newerLink = $("a.blog-pager-newer-link").attr("href");
$("a.blog-pager-newer-link").load(newerLink+" .post-title:first", function() {
var newerLinkTitle = $("a.blog-pager-newer-link").text();
$("a.blog-pager-newer-link").text("<< " + newerLinkTitle);
});
var olderLink = $("a.blog-pager-older-link").attr("href");
$("a.blog-pager-older-link").load(olderLink+" .post-title:first", function() {
var olderLinkTitle = $("a.blog-pager-older-link").text();
$("a.blog-pager-older-link").text(olderLinkTitle + " >>");//rgt
});
});
</script>
<!-- Replacing Older and Newer post End -->



Widget HTML tersebut dapat diletakkan di bawah postingan blog atau diletakkan pada tempat yang kalian kehendaki.



















Setelah selesai, silahkan lihat di bawah kolom postingan terakhir atau kolom komentar di blog kalian. Selamat mencoba!

Monday, November 3, 2014

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! :)

Tips Untuk Membuat Tamu Rumah Liburan Merasa Senang Di Rumah Anda

Pernahkah Anda memiliki perasaan tidak pasti bepergian ke suatu tempat untuk tinggal bersama keluarga yang tidak Anda kenal dengan baik? ...