Web Tutorial Indonesia 
Membuat tampilan blog menarik atau desain blog agar menarik adalah salah satu bagian yang paling penting untuk mengatur antarmuka website/blog kita. Dengan semakin menarik tampilan blog kita, maka akan semakin menambah kesan positif kepada pengguna (pembaca).
Pengalaman pengguna (user experience) adalah bagian yang penting untuk menjaga pembaca terlibat dalam optimasi mesin pencari yang baik karena bounce rate yang tinggi akan mengakibatkan efek negatif terhadap SEO. Buatlah blog dengan tampilan yang sederhana dan jangan terlalu mencolok atau berlebihan, maka dari itu nyekrip disini akan membahas tentang apa saja poin yang perlu diperhatikan dalam cara membuat tampilan blog agar semakin menarik, tetap sederhana dan yang paling penting adalah membuat nyaman pengunjung.
Jika belum mempunyai blog, silahkan mengunjugi tutorial ” Cara Membuat Blog di Blogspot Lengkap Gambar ” untuk blogspot atau blogger dan ” Cara Membuat Blog di WordPress Gratis Lengkap ” untuk wordpress.
Kebanyakan dari kita hanya disibukkan dengan mencari dan ganti template ketika berurusan tentang tata letak blog (layout blog), sebenarnya tata letak dan desain itu lebih dari sekedar ganti tema/template. Kita juga harus mempertimbangkan warna tema/template, navigasi, penempatan iklan, header, footer dan font. Kita juga harus mempertimbangkan tata letak untuk pengguna mobile atau smartphone, karena pengguna dengan perangkat ini juga merupakan bagian besar lalu lintas (trafik) blog.
Membuat Tampilan Blog Menarik: Warna Template dan Pengunjung Blog
Kita mungkin meremehkan tentang masalah warna, sebenarnya itu merupakan bagian penting ketika kita mempertimbangkan kenyamanan pengunjung. Setiap blog yang baik akan memiliki desain yang khas dan unik. Misalnya, jika kita memiliki sebuah blog tentang game, maka secara otomatis pembaca kita adalah gamer.
Gamer akan suka dengan latar belakang warna hitam dengan warna neon di bagian depan. Namun, jika blog kita mengenai kesehatan atau kecantikan, maka kombinasi warna ini tidak cocok untuk pembaca. Jika blog kita campur atau gado-gado maka carilah warna yang umum karena pengunjung kita juga orang umum. Untuk itu kita perlu mencari ide tentang desain blog dengan mengunjungi blog yang sudah populer dibidang-nya.
Flat UI Color Picker
Jika kita fokus pada desain flat maka pemilihan warna pada desain flat tidak boleh dipilih secara sembarangan, jika bingung dalam memilih warna yang pas, kita bisa menggunakan kumpulan warna untuk desain flat di halaman web Flat UI Colors.
Desain Tampilan Blog Menarik: Header dan footer
Bagian header adalah bagian atas dari blog kita yang berisi logo dan beberapa navigasi. Biasanya pengguna atau pengunjung akan melihat ke bagian atas untuk akses navigasi karena ingin menggali lebih dalam tentang blog yang dikunjungi-nya. Jika kita tidak mengatur header semaksimal mungkin (misalnya kita melepas navigasi pada bagian header), maka kita dapat membingungkan pengguna dan menyebabkan mereka untuk segera meninggalkan blog.
Footer memang tidak sepenting header pada situs, tetapi footer adalah bagian pelengkap blog. Footer bisa berisi halaman disclaimer dan beberapa link yang berguna bagi pengguna untuk menemukan informasi tambahan tentang blog seperti halaman ” About ” atau halaman ” Kontak “. Biasanya blogger atau pemilik blog akan menjejali footer dengan berbagai badge seperti pagerank atau lainnya (padahal pagerank sudah tewas), itu malah membuat footer kita jadi penuh. Ingat, pengunjung hanya akan membaca artikel atau tutorial anda bukan untuk melihat segala pernak-pernik blog anda, jadi fokuskan pada artikel atau tutorial bagi pembaca.
Merubah Tampilan Blog: Ukuran, Warna, Jenis atau Gaya Huruf (Font)
Ukuran font dan karakteristik-nya terus mengalami perubahan. Desain blog itu ibarat seperti busana, yang akan terus berubah dengan desain terbaru mulai dari tampilan kaku yang kuno sampai tampilan yang flat yang lebih modern. Begitu juga dengan desain font yang dulunya sering menampilkan dengan ukuran yang kecil, sekarang lebih trend menampilkan dengan ukuran besar dan menonjol sehingga mudah dibaca oleh pembaca. Font yang lebih besar membuat konten kita lebih mudah dibaca, meskipun demikian atur ukuran font jangan sampai terlalu besar.
Pemilihan gaya huruf (font style) juga bisa membuat blog lebih mudah atau malahan lebih sulit dibaca. Jika anda bingung untuk memilih, pilihlah font yang umum seperti ” Open Sans “. Di luaran sana terdapat ribuan font yang dapat dipilih, tetapi jika kita sampai memilih font yang salah dan sulit untuk dibaca oleh pembaca, itu bisa menjadi bencana bagi blog.
Berikut beberapa pilihan font yang bagus dan gratis tentunya. Jika ada font dalam daftar dibawah ini berbayar atau tidak bisa di-download, mungkin sang pengembang sudah merubah kebijakan-nya.
Lato Google Font
Hallo Sans
Open Sans Google Font
Aller Font
KIDOT Font
Membuat Tampilan Website Menarik: Mobile Desain dan Responsif Template
Mobile desain dan template web yang responsif harus dimiliki bagi pemilik blog, apalagi dengan munculnya algoritma google yang tebaru yang disebut mobilegeddon. Tablet dan smartphone merupakan sumber trafik yang terus meningkat, bukan tidak mungkin jika kedepannya akan mengalahkan pengguna desktop.
Desain yang responsif akan mengatur tata letak dan ukuran gambar sesuai dengan ukuran halaman browser, sekarang sudah semakin bertambah-nya peredaran smartphone dengan layar berbagai ukuran sehingga membutuhkan tingkat adaptasi yang lebih tinggi. Gunakan teknik media queries pada CSS dan jangan lupa untuk mengurangi size gambar.
Bootstrap
Kita dapat menggunakan Twitter Bootstrap yang merupakan perangkat gratis yang menyediakan CSS dan JavaScript untuk desain blog dan membuat query responsif. Meskipun bernama Twitter Bootstrap, perangkat ini tidak melibatkan Twitter, diberi nama Twitter karena diciptakan oleh pengembang Twitter. Twitter bootstrap dengan cepat menjadi cara yang populer untuk merancang tema blog dan layout. Untuk download, silahkan kunjungi halaman Getbootstrap.com.
Dengan memperhatikan poin-poin diatas, kita bisa memulai atau merubah tampilan blog agar menarik. Kita bisa menggunakan pedoman diatas ketika kita memilih template untuk blog atau website, jika tidak menemukan kriteria diatas, kita harus merubah atau mendesain sendiri template atau juga bisa menggunakan jasa desain website/blog.
Happy Nyekrip!
ane paling demen make lato dari google. thanks admin nyekrip
sama-sama :), kalau saya suka open sans…
bgus gan. kunjungi web ku jg dong rahmathide.blogspot.com :))
okey gan.. :)
Keren, warna untuk blog sepertinya perlu saya rubah menjadi lebih anggun dan menarik pengunjung. ^^d
Jangan lupa follow blogku ya. :)
Pingback: Cara Membuat Template Web Responsive HTML 5 | novarizakhairani
Pingback: Daftar CMS Website Terbaik dan Gratis HTML5 | novarizakhairani
keren nih banyak ilmu baruu
makasih infonya,keren banget
Kunjungi blog ku bro and sis..hehehe
semakin menarik saja blognya mas
bolehkah saya belaajar disini ?
terimakasih
silahkan.. :)
Sukurlah saya sudah melakukan seperti yang ada dalam artikel diatas…tapi soal font tidak banyak melakukan perubahan…tetep bawaan template yang saya unduh. Dan kebetulan juga templatenya dah responsive…hanya warna yg saya ubah sesuai saran diatas. Trimakasih.
wah, ini tipsnya beda dari yang lainnya, boleh dicoba nih.hehe
Thanks infonya follow blog saya yah
cara penerapannya gimana si, bisa dijelasin secara rinci ngga ???
Terimakasih tutorialnya bermanfaat banget
Articel yang kayak gini yang berkualitas. Trims brooooo
Gan, cara membuat widget “Tagged” itu bagaimana?
tagged disini udah dari wordpress gan.. :)
Udah baca beberapa artikel di blog ini bikin saya jadi betah sekaligus makin menggebu-gebu untuk bikin template sendiri :D
nice gan, jangan lupa mampir plus kasih sarannya gan. handsscript.wordpress.com
Halo faqih, saya sudah berkunjung ke web wordpress-nya, jika ingin saran, jangan sungkan untuk email di nyekripweb@gmail ya. :)
thanks gan … artikelnya berguna bget.. soalnya masih newbie nih.. masih hrs bnyak belajar..
nice info…..
terima kasih untuk informasinya gan, tapi saya sedang mengembangkan template untuk blog saya, nah menu bootstrap sedang saya cari untuk dipasang di blog saya.
terimakasih atas informasinya gan, template blog keren dapat membuat pengunjung blog betah berlama-lama
.
iyah juga yah gan, betul banget nih .. thx gan untuk sarannya :D
tampilan bagus juga demi pengunjung.. :)
Terima kasih tutorial nya :) ini membantu sekali. Saya masih cukup kebingungan buat nentuin warna apa yang cocok untuk blog saya, jadi supaya aman saya pilih warna black and white aja, atau admin ada saran gak? hehe :D
pakai metode color harmoni :) coba searching
wah, penting juga ya template di blog itu, lumayan buat nambah-nambah keindahan di blog =))
Mantab banget isinya, detail dan informasinya mudah dipahami. Lengkap banget dah.
thanks….coba dulu ya
font ini bisa digunakan untuk cepot kagak yah….?
bisa banget :) tinggal di include
Joss pokoknya.. Terimakasih atas sharenya…
Oh, ternyata cukup banyak ya langkah-langkah yang harus diterapkan. Btw informasinya kurang greget min, ditambah praktek donk.. hehe
gan, saya membuat pilihan menu seperti “konsultasi”, “sekolah ekonomi”, “ebook” dll, tapi saat di click kok gak ada linknya ya,,,mohon arahanya………imam hambali
pakai blogspot?
Saya admin dari Duniainformasikesehatan.com berterima kasih atas informasi yang anda berikan.. sangat bermanfaat sekali, saya memang sedang mencari cara bagaimana supaya tampilan blog saya terlihat lebih cantik dan fast loading pastinya..
Jika ada saran lain mohon share lagi.. thanks..
admin nyekrip,, kalo biar bisa kliatan profesionalnya gimana ya tuh blog.. apa sesuai template ya?
kelihatan profesional itu tergantung anda membangun kepercayaan dengan pembaca anda.. :) keep original :) kalau download template, usahakan kasih sesuatu biar unik
Saya senang sekali membaca artikel ini, namun karena saya sedang belajar membuat blog jadi agak bingung. Saya sudah membuat 2 blog dengan blogspot .
Yang ingin sy tanyakan, untuk membuat blog dari blogspot apakah bisa tampilannya seperti web jual beli yang online contohnya kaya lazada atau mungkin mataharimall itu??
its good, kunjungan ditunggu :)
Sangat bermanfaat. ini dia cara yang paling banyak dicari master bllogger. dengan tampilan website yang menarik. pastinya akan membuat pengunjung betah berlama-lama di dalam website kita. btw… saya juga punya 1 artikel yang menarik “cara mengganti template blogger agar mobile friendly” agar bisa di akses di smartphone dgn tampilan responsive. di tunggu kunjungan agan2 dan sista
Thanks Admin atas sharing nya, cara menggunakan font di website kita boleh tlg di share caranya? begini saya pernah baca kadang font bergantung pada OS oleh karena itu saya ingin menyediakan font nya dari web saya sendiri saya pernah baca ttg menggunakan css untuk meload font nya tapi krg jelas, mungkin Admin bisa share caranya.
Thanks,
Best & Regrads.
enak ngebacanya min,^_^ oiya… mampir juga ke blog ane ya,,,, masih newbie, butuh kritik dan saran
Menarik dari segi warna dan tulisan juga gak mudah buat pemula jadi lebih sering ikut ama bawaan thema yang digunakan. apalagi kalau terlalu banyak gambar malah semakin memberatkan akses.
sip mas bro mantap bgt artikelnya, jadi tambah wawasan ni..makasih banyak,salam sukses
Menarik dari segi warna dan tulisan juga gak mudah buat pemula jadi lebih sering ikut ama bawaan thema yang digunakan. apalagi kalau terlalu banyak gambar malah semakin memberatkan akses.
Min,klo mau ngubah tampilan pertama di hasil penelusuran agar ke home bukan ke postingan pertama gimana,makasih sebelumnya
Dari google?
mantap nih gan infonya, artikel yang sangat bermanfaat, semoga kedepannya lebih berkembang, ditunggu artikel selanjutnya
mantap banget gan info nya kunjungi juga jogja plakat