37 Template Blog Simple (Sederhana) Gratis dan Terbaik Versi Peringkatblogger

Tampilan sebuah blog merupakan salah satu elemen terpenting yang harus diperhatikan dalam dunia blogging, tak heran, para blogger selalu berusaha mendesain blog mereka agar mendapatkan tampilan terbaik dan paling menarik.

Salah satu template blog paling banyak dipakai para blogger untuk mendesain blog mereka adalah model template simple atau sederhana dan mungkin kamu juga termaksuk blogger yang seperti ini.

Nah, jika kamu sedang mencari-cari dan ingin mendownload template blog dengan kriteria simple atau sederhana untuk desin template blogmu, tidak ada salahnya untuk membaca postingan saya ini sampai selesai.

Karena postingan ini merupakan referensi template blog sederhana (simple) terbaik versi Peringkatblogger yang bisa kamu download secara gratis. Berikut daftarnya :

1. Blogku

Fitur Template

• Responsive
• SEO Ready
• Related Post
• SEO Meta Tags
• SEO Breadcrumbs
• Flat Design
• Fast Loading

2. Brosense

Fitur Template

• Responsive
• SEO Ready
• Related Post
• SEO Meta Tags
• SEO Breadcrumbs
• Flat Design
• Fast Loading

3. Simple White

Fitur Template

• SEO Friendly
• Simple and Clean
• Elegant
• Autoreadmore
• SEO Meta Tags
• SEO Breadcrumbs
• Related Post
• Social Share

4. Thesis For Blogger

Fitur Template

• SEO FriendlyUser Friendly
• Quicklink ke kotak komentar
• Auto Readmore
• Fast Loading
• Minimalis & simple

5. Seofastblogger

Fitur Template

• Responsive Design
• Custom Mobile
• Mobile Friendly
• Valid Scheme.org
• Valid CSS3
• Valid HTML5
• Valid Feed
• Fast Load Performance
• Disqus Comment
• High CTR
• Adsense Ready
• Popular post

6. Marble

Fitur Template

• Fully Responsive Design
• SEO Optimized
• Easy Admin Panel
• Unlimited Colors
• Ads Ready
• Recent Posts Widget
• Subscribe box
• Related Posts
• Social Share Buttons
• Author Bio Box (Auto from Google+ profile)
• Google Comment
• Search Box
• Custom 404 Error page

7. Rosemary

Fitur Template

• Fully Responsive Design
• Advance Search Engine Optimization
• Pin it button on images
• Instagram widget
• Pinterest widget
• Auto resize thumbnail image
• Well Documentation
• Threaded Comment
• Recent Post By Label
• Related posts support
• Ads Ready
• Auto Author Image
• Newsletter Subscription
• Custom Error 404 Page
• Minimalist style
• Compatible with major browsers (IE8+,Mozilla,Chrome,Safari)
• Professional admin layout, help you easy work with blog layout.

8. Spike

Fitur Template

• 100% Pure Responsive
• SEO Ready
• Google Validation
• Mobile Friendly
• Loading Speed
• Related Post
• Dropdown Menu
• Inbuilt Search Menu
• Author Box
• 4 Column Footer
• Social Buttons
• More Awesome Features

9. Takis Theme

Fitur Template

• Mobile Friendly
• Fully Responsive Design
• Validated Structured Data
• High CTR
• HTML5 Type Design
• CSS3 Type Design
• Fastest loading
• Advance Search Engine Optimization
• Auto resize thumbnail image
• Disqus Comments
• Related Post With Thumbnail
• Search Column Responsive
• 2 Column Template Layout
• 3 Column Footer
• Valid Schema.org
• Breadcrumbs SEO
• Ads Ready
• Respsive Ad Slot
• Newsletter Subscription
• Custom Error 404 Page
• Compatible with major browsers (IE8+,Mozilla,Chrome,Safari)

10. Seo Fix Blogger Template

Fitur Template

• Current version: 1.0
• 100% Responsive
• Valid HTML5
• Fastload pages
• Auto resize thumbnail image
• Optimize SEO
• Blogger Comment System
• Dropdown Menu
• Ads ready
• Auto Readmore
• Breadcrumbs
• Related Post
• Social Share Button
• Compatible with major browsers Simple admin layout 

11. GoGreen

Fitur Template

• Responsive
• Simple Material Design Search Box
• 2 column template
• Footer 3 Column
• Ads Ready
• Breadcrumbs
• Multi Tabs Sidebar Widget
• Recent Comments
• Mobile Friendly
• SEO Ready
• Documentation
• Material Design Effect
• Menu Navigation

12. Masign Simple

Fitur Template

• Responsive
• Google Testing Tool Validator
• Simple Material Design Search Box
• Footer 3 Column
• Ads Ready
• Unlimited Page Number (Script by Arlina, Design by Rio)
• Breadcrumbs
• Multi Tabs Sidebar Widget
• Recent Comments
• Mobile Friendly
• SEO Ready
• Documentation
• Material Design Effect
• Tiny Menu Navigation
• Menu Navigation

13. Pink steady

Fitur Template

• 100% Responsive
• Valid HTML5
• Fast Loading
• Auto resize thumbnail image
• Optimize SEO
• Dropdown Menu
• Ads ready
• Breadcrumbs
• Related Post
• Blogger Comment System
• Subscribe Button
• Social Share Button
• Compatible with major browsers Simple admin layout 

14. Vikka Theme

Fitur Template

• Seo Friendly
• Responsive
• Valid CSS3
• Valid HTML5
• High CTR
• Responsive Ad Slot
• Auto More With Thumbnail
• Light Base Theme Colour
• Simple Flat Design
• Search Box
• Smooth Scrooll Back to Top (Versi Jquery)
• Custom Subcribe Box Widget
• Related Post Thumbnail
• Sosial Share Button
• Contact From Widget
• ShortCodes
• Sitemap Widget

15. SmothGrid

Fitur Template

• Fully Responsive Design
• Mobile Friendly
• SEO Optimized
• Testing Tool Validator
• Easy Admin Panel
• Drop down menu
• Social Icons
• Unlimited Colors
• Ads Ready
• Numbered Page Navigation
• Breadcrumbs
• Related Posts
• Subscribe Box
• Author Box
• Sticky Widget
• Social Share Buttons
• Google Comment
• Search Box
• Custom 404 Error page
• Much more

16. Simple Seo

Fitur Template

• Fully Responsive Design
• Mobile Friendly
• SEO Optimized
• Fast Loading
• Drop down menu
• Social Icons
• Ads Ready
• Numbered Page Navigation
• Breadcrumbs
• Related Posts
• Subscribe Box
• Social Share Buttons
• Google Comment
• Search Box
• Custom 404 Error page

17. Nubie Banget

Fitur Template

• Responsive
• Google Testing Tool Validator
• SEO Friendly
• Mobile Friendly
• Dynamic Heading
• High CTR
• Personal Blog
• Custom Threaded Comment
• 2 Column
• Auto Read More with Thumbnail
• Responsive Ad Slot
• Breadcrumbs
• Related Posts with Thumb
• Search Box
• Social Share Button
• Responsive Dropdown Menu
• Social Links Widget
• Smooth Back to Top
• Custom Subscribe Box Widget
• Sitemap Widget
• Shortcodes
• Well Documentation

18. Simple Sanget

Fitur Template

• Responsive Design
• Custom Mobile
• Mobile Friendly
• Valid Scheme.org
• Valid HTML5
• Valid Feed
• Fast Load Performance
• High CTR
• 2 Kolom
• Adsense Ready
• Popular post
• Related post
• Snippet with thumbnail
• Breadcrumbs
• Responsive Video
• Responsive Image
• Responsive Table
• Responsive Dropdown Menu
• Flat button
• Search box
• CSS pre and kbd
• Custom Box Subscriber
• Social share button
• Label Widget
• List Link Widget

19. Simple Banget

Fitur Template

• Free Template
• Responsive
• SEO Friendly
• Valid Structured Data Testing Tool
• Mobile Friendly
• Personal Blog
• 2 Column
• Light Base Color
• Breadcrumbs
• Related Posts with Thumb
• Search Box
• Social Share Button
• Back to Top Button

20. Kompi Simple

Fitur Template

• Free Template
• Responsive
• SEO Friendly
• Fast Loading
• Valid Structured Data Testing Tool
• Mobile Friendly
• 2 Column
• Breadcrumbs
• Related Posts with Thumb
• Search Box
• Social Share Button
• Back to Top Button

21. G Vusion 2

Fitur Template

• Responsive
• SEO
• Mobile Friendly
• Personal Blog
• Custom Threaded Comment
• 2 Column
• Simple Flat Design
• Auto Read More with Thumbnail
• Responsive Ad Slot
• Breadcrumbs
• Related Posts with Thumb
• Search Box
• Social Share Button
• Sidebar Tab Widget
• Translation Ready
• Social Links Widget
• Smooth Scroll back To Top
• Recent Posts by Label
• Subscribe Box Widget
• Sitemap Widget

22. Arlina Theme

Fitur Template

• Responsive
• Google Testing Tool Validator
• Mobile Friendly
• SEO Friendly
• Dynamic Heading
• Menu Navigation
• Valid Schema.org
• High CTR
• 2 Column
• Breadcrumbs
• Related Posts
• Search Box
• Shortcodes
• Subscription Widget
• Disqus Comments
• Blogger Comments

23. Simplify 2

Fitur Template

• Responsive
• Google Testing Tool Validator
• SEO Friendly
• Mobile Friendly
• Dynamic Heading
• Adsense
• Valid Schema.org
• High CTR
• Personal Blog
• 2 Column
• Auto Read More with Thumbnail
• Responsive Ad Slot
• Breadcrumbs
• Footer Link
• Related Posts with Thumb
• Search Box
• Social Share Button
• Responsive Sticky Navigation
• Back to Top Button
• Shortcodes
• Unlimited Page Numbered
• Recent Post with Thumbnail
• Custom Contact Form Widget
• Responsive Sitemap Widget

24. Simplify 

Fitur Template

• Responsive
• Google Testing Tool Validator
• SEO Friendly
• Mobile Friendly
• Dynamic Heading
• Adsense
• Valid Schema.org
• High CTR
• Personal Blog
• 2 Column
• Auto Read More with Thumbnail
• Responsive Ad Slot
• Breadcrumbs
• Footer Link     True
• Related Posts with Thumb
• Search Box
• Social Share Button
• Responsive Sticky Navigation
• Back to Top Button
• Shortcodes
• Unlimited Page Numbered
• Recent Post with Thumbnail
• Custom Contact Form Widget
• Responsive Sitemap Widget

15. SimpleUp

Fitur Template

• Mobile Friendly
• Fully Responsive Design
• Validated Structured Data
• SEO Ready
• Support HTTPS (SSL)
• Validated Schema.org
• For Adsense
• High CTR
• Ads Ready
• Respsive Ad Slot
• Fast loading
• Advance Search Engine Optimization
• Responsive Menu
• Sidebar sticky widget
• Threaded Comments Hack (Blogger Comment)
• Hover event dropdown menu in Desktop
• Onclick event dropdown menu in Tablet/Mobile
• Elegant and Responsive Social Share Button
• Auto resize thumbnail image
• Related Post with with list titles
• Show-hide Search Column Responsive
• 2 Column
• Sidebar Right
• Breadcrumbs SEO
• Homepage Navigation with Number
• Dyamic Heading in all page
• Elegant Custom Error 404 Page
• Compatible with major browsers (IE8+,Mozilla,Chrome,Safari, Opera)

26. Flexzine

Fitur Template

• Responsive
• SEO Friendly
• Google Testing Tool Validator
• Mobile Friendly
• Custom 404 Page
• Fast Loading
• Minimal
• Fashion
• Elegant
• White
• Ads Ready
• Clean Layout
• Simple Design
• Drop Down Menu
• Social Sharing
• HTML5 & CSS3
• Browser Compatibility

27. Origin

Fitur Template

• 100% responsive (mobile friendly)
• Template designer compatible
• Minimalistic blogger theme for your blog
• 2 columns
• right sidebar
• 4 columns footer
• featured post section
• Google web fonts
• auto post summaries
• unlimited colors
• FontAwesome icon fonts
• background image support
• related posts with thumbnails
• social and sharing buttons
• top navigation menu

28. Light Gallery

Fitur Template

• 100% Responsive
• Search Engine Friendly
• Structured Data Included
• Unlimited Colors to Choose
• Hundreds of Fonts to Select
• Support for a Background Image
• Related Posts with Thumbnails
• Clean Admin Layout Page
• Different Layout Options for Posts and Pages
• 728x90 Header Ad Banner Area
• 4 Columns Footer Widgets Area
• Full Width Not Found 404 Page
• Top Multi-level Responsive Navigation Menu
• Multi Tabbed Widget Area
• Numbered Page Navigation
• Custom Post Navigation
• Beautiful Social Buttons
• Post Share Buttons
• Feedburner Email Subscription Box
• Facebook and Twitter Meta Data

29. Nonamp

Fitur Template

• Mobile Friendly
• Fully Responsive
• Validated Structured Data
• SEO Ready
• Fast loading
• Mini Blogger Template
• Support HTTPS (SSL)
• Validated Schema.org
• For Adsense
• Elegant one-page style
• High CTR
• Ads Ready
• Respsive Ad Slot
• Homepage Navigation Onload
• Advance Search Engine Optimization
• Responsive Menu with Dropdown
• Simple Most Recent Post Widget
• Elegant Social Share Button
• Auto resize thumbnail image
• Related Post with thumbnail
• Show-hide Search Column
• Breadcrumbs SEO Optimized
• Dyamic Heading in all page
• Elegant Custom Error 404 Page
• Compatible with major browsers (IE8+, Mozilla, Chrome, Safari, Opera)

30. Blend

Fitur Template

• Fully Responsive Design
• Mobile Friendly
• SEO Optimized
• Testing Tool Validator
• Easy Admin Panel
• Drop down menu
• Social Icons
• Unlimited Colors
• Ads Ready
• Numbered Page Navigation
• Breadcrumbs
• Related Posts
• Subscribe Box
• Author Box
• Sticky Widget
• Social Share Buttons
• Google Comment
• Search Box
• Custom 404 Error page
• Much more

31. SimpleON

Fitur Template

• Mobile Friendly
• Fully Responsive Design
• Validated Structured Datacheck
• SEO Ready
• Support HTTPS (SSL)
• Validated Schema.org
• For Adsense
• High CTR
• Ads Ready
• Respsive Ad Slot
• Respsive MiddlePost Ad Slot
• Fast loading
• Advance Search Engine Optimization
• Responsive Menu
• Sidebar sticky widget
• Colorful Most Recent Post Widget
• Facebook Comment
• Hover event dropdown menu in Desktop
• Onclick event dropdown menu in Tablet/Mobile
• Elegant and Responsive Social Share Button
• Auto resize thumbnail image
• Related Post with thumbnail
• Show-hide Search Column Responsive (inline header)
• 2 Column
• Sidebar Right
• Breadcrumbs SEO
• Homepage Navigation with Infinite Scroll
• Dyamic Heading in all page
• Back to top tool
• Elegant Custom Error 404 Page
• Compatible with major browsers (IE8+, Mozilla, Chrome, Safari, Opera)

32. Gampang

Fitur Template

• Mobile Friendly
• Fully Responsive Design
• Validated Structured Data
• SEO Ready
• Fast loading
• Support HTTPS (SSL)
• Validated Schema.org
• For Adsense
• High CTR
• Ads Ready
• Respsive Ad Slot
• Advance Search Engine Optimization
• Responsive Menu with Dropdown
• Sidebar sticky widget
• Simple Most Recent Post Widget
• Threaded Blogger Comment
• Onclick Comment Form
• Elegant Social Share Button
• Auto resize thumbnail image
• Related Post with thumbnail
• Show-hide Search Column
• Sidebar Right
• Breadcrumbs SEO Optimized
• Dyamic Heading in all page
• Elegant Custom Error 404 Page
• Compatible with major browsers (IE8+, Mozilla, Chrome, Safari, Opera)

33. OMagazine

Fitur Template

• Mobile Friendly - check
• Fully Responsive Design - check
• Validated Structured Data - check
• SEO Ready - check
• Support HTTPS (SSL)
• Validated Schema.org
• For Adsense
• High CTR
• Ads Ready
• Respsive Ad Slot
• Fast loading
• Advance Search Engine Optimization
• Responsive Menu
• Tabbed Sidebar (2 column)
• Adding Recent Disqus Comments
• Hover event dropdown menu in Desktop
• Onclick event dropdown menu in Tablet/Mobile
• Elegant and Responsive Social Share Button
• Auto resize thumbnail image
• Disqus Comment Permanently
• Related Post with Thumbnail, Date and Author Name
• Show-hide Search Column Responsive
• 2 Column
• Sidebar Right
• Breadcrumbs SEO
• Homepage Navigation with Number
• Dyamic Heading in all page
• Elegant Custom Error 404 Page
• Compatible with major browsers (IE8+,Mozilla,Chrome,Safari, Opera)

34. Simple Tech

Fitur Template

• Responsive
• SEO Friendly
• Google Testing Tool Validator
• Mobile Friendly
• Custom 404 Page
• Fast Loading
• Ads Ready
• Clean Layout
• Simple Design
• Drop Down Menu
• Featured Images
• Multi Author Supported By Google+
• Social Sharing
• Font Awesome
• HTML5 & CSS3
• Browser Compatibility

35. Renovate

Fitur Template

• Responsive
• SEO Friendly
• Google Testing Tool Validator
• Mobile Friendly
• Custom 404 Page
• Fast Loading
• Magazine Blogger Template
• Tech Blogger Template
• News Blogger Template
• ColourFul Blogger Template
• Ads Ready Blogger Template
• Clean Layout Blogger Template
• Simple Design Blogger Template
• Drop Down Menu Blogger Template
• Social Sharing Blogger Template
• HTML5 & CSS3 Blogger Template
• Browser Compatibility Blogger Template

36. Simplest Simple

Fitur Template

• Responsive - Check Here
• SEO Friendly - Check Here
• Google Testing Tool Validator
• Mobile Friendly
• Custom 404 Page
• Fast Loading
• Magazine Blogger Template
• Tech Blogger Template
• News Blogger Template
• ColourFul Blogger Template
• Ads Ready Blogger Template
• Clean Layout Blogger Template
• Simple Design Blogger Template
• Drop Down Menu Blogger Template
• Social Sharing Blogger Template
• HTML5 & CSS3 Blogger Template
• Browser Compatibility Blogger Template

37. B.Behavior

Fitur Template

• Responsive
• SEO Friendly
• Mobile Friendly
• 2 columns with one Right sidebar
• 3 columns footer
• clean coded with Responsive designs Ads ready
• Slideshow and Background navigation Navigation menu
• Breadcrumb navigation ready
• Vertical Drop down menu
• Auto post thumbnails

Read More

17 Kesalahan Fatal Dalam Mendesain Website/Blog Serta Contoh Membuat Desain Website/Blog yang Baik dan Benar

Bagaimana cara mendesain website atau blog yang baik dan benar?, lalu seperti apa sih desain website atau blog yang bagus itu?, Kemudian, apakah desain website atau blog milik saya ini sudah betul atau salah ya?.

Pasti ketiga pertanyaan itu pernah terlintas dipemikiran orang yang sedang mendesain website atau blog.

Maka dari itu, di postingan ini saya akan berbagi tentang kesalahan fatal dalam mendesain website/blog yang sering dilakukan oleh pemula.

Serta contoh membuat desain website/blog yang baik dan benar.

Bukan bermaksud untuk menggurui, akan tetapi hanya sekedar berbagi dan mencoba membantumu dalam mendesain website atau blog agar mendapatkan hasil yang terbaik.

Tanpa berlama-lama berikut ini daftarnya.

1. Layout/tata letak yang berantakan

Bayangkan, kamu mengunjungi sebuah situs dan mendapati jika desain layout/tata letaknya yang tidak rapi, lalu apa yang kamu lakukan?.

Tentunya hal itu sangatlah menggangu, mungkin kamu juga menyesal telah mengunjungi situs tersebut, bisa jadi itu adalah kunjungan pertama dan terakhirmu di situs tersebut.

Bercontoh dari kasus diatas, jadi jika kamu mendesain website atau blog pertamakali yang harus benar-benar dipertimbangkan yaitu pemilihan layout/tata letaknya.

Nah rekomendasi dari saya alangkah baiknya kamu menggunakan desain layout/tata letak sederhana seperti pada gambar diatas, yaitu header di posisi atas, content wrapper dibagian kanan, sidebar dibagian kiri dan terakhir footer di paling bawah.

Namun perlu diperhatikan menurut saya pemilihan layout/ tata letak sebuah website atau blog harus disesuaikan dengan topik dari website/blog itu sendiri.

2. Kebanyakan dan salah dalam memilih warna

Sebuah website atau blog jika didesain dengan mengunakan terlalu banyak warna maka hasilnya akan jelek.

Kenapa saya bilang jelek? Karena hal itu bisa membuat tidak nyaman dan mengangu mata orang yang sedang mengunjungi website atau blog tersebut.

Jadi berapa banyak warna yang bagus digunakan untuk web desain?

Saran saya gunakanlah maksimal 3-4 warna saja dalam mendesain website/blog.

Idealnya gunakan saja 3 warna dengan komposisi 60-30-10.

Dan hal penting lainnya yaitu pilihlah warna yang nyaman dimata.

Warna yang nyaman dimata itu seperti apa?

Yaitu yang tidak terlalu terang maupun gelap, contoh seperti warna-warna pastel, palet, monokrom dan lainnya.

Kemudian kombinasikan warna terbaik agar desain buatanmu membuahkan hasil yang maksimal.

Jika kamu kebinggungan dalam menentukan perpaduan warna yang bagus dan cocok untuk web desain, saran saya coba kunjungi situs berikut ini agar kamu mendapatkan referensi :

colourlovers.com, color.adobe.com, coolors.co, colorhunt.co dan  materialpalette.com    

Dan inilah poin penting lainnya yang wajib diperhatikan :

• Pilihlah warna background/latar belakang yang berbeda (kontras) dengan warna tulisan.

• Warna gelap seperti hitam atau abu-abu adalah pilihan paling tepat untuk menjadi warna tulisan/text pada bagian konten.

• Warna link harus lebih mencolok dibandingkan warna lain terutama bagian text serta background/latar belakang.

• Bedakan warna link aktif yang sudah dikunjungi dengan yang belum, biasanya warna link yang sudah dikunjungi lebih gelap dari pada yang masih aktif.

3. Menggunakan font yang buruk dan terlalu banyak jenis

Font buruk yang saya maksud adalah yang susah dibaca, contohnya seperti berikut ini :

Arial, Comic Sands MS, Lobster, Impact, Papyrus, Times New Roman dan Courier new.

Kemudian hal haram yang tidak boleh kamu lakukan dalam mendesain website/blog yaitu menggunakan terlalu banyak jenis font dalam satu desain.

Kenapa harus begitu, karena menggunakan banyak font membuat desain website/blogmu terlihat jelek dan amatir.

Maka saran saya gunakanlah 2 jenis font saja, yaitu satu jenis font untuk judul dan satu lagi untuk teks konten.

Lalu seperti apa jenis font yang enak dibaca dan paling cocok digunakan untuk desain website/blog?. 

Inilah jenis font terbaik untuk desain website/blog sekaligus yang paling enak dibaca :

Roboto, Lato, Inconsolata, Open Sans, Montserratt, PT Serif dan Merriweather.

Baca Juga : 37 Template Blog Simple (Sederhana) Gratis dan Terbaik Versi Peringkatblogger

 4. Ukuran font terlalu kecil atau kebesaran

Saya sering sekali menjumpai suatu website atau blog yang ukuran fontnya kekecilan atau malah kebesaran.

Jujur hal itu membuat saya jadi malas untuk membaca isi kontennya dan langsung saja pergi dari situs tersebut.

Kenapa demikian, karena perlu diketahui, tidak semua penguna internet memiliki kondisi mata normal dan salah satunya adalah saya sendiri.

Lalu ukuran font yang ideal dan paling pas itu sebesar apa?

Menurut saya ukuran font paling tepat digunakan dalam desain website atau blog yaitu 16-18 pixel dibagian konten dan 18-20 pixel untuk bagian header. 

5. Jarak antar baris teks terlalu dekat atau kejauhan

Yang saya maksud disini adalah barisan teks antara atas dengan bawahnya yang terlalu dekat atau kejauhan contohnya seperti gambar diatas.

Nah persegi panjang berwarna merah diatas dalam dunia web desain hal itu disebut dengan istilah line-height.

Berapa ukuran paling tepat untuk memisahkan antar barisan teks(line-height)?

Pendapat saya adalah 1.4em atau 22px (pixel).

 
6. Jumlah karakter dalam satu baris teks yang kurang ideal 

Jumlah karakter dalam satu baris teks di dunia web desain sangat berpengaruh terhadap nyaman atau tidaknya tulisan tersebut saat dibaca.

Beberapa website atau blog didesain tanpa memperhitungkan unsur sepele seperti ini, akan tetapi dari pandangan saya hal ini sangat perlu untuk diperhatikan.

Jadi berapa banyak karakter dalam satu baris itu?

Sebaiknya gunakan saja 70 sampai 90 karakter perbaris (spasi juga termasuk dan dihitung).

7. Kualitas gambar yang buruk atau berukuran kebesaran

Menggunakan gambar/foto dengan kualitas buruk dalam desain website atau blog merupakan sebuah kesalahan.

Tapi juga perlu diingat, menggunakan gambar dengan kualitas terlalu baik juga tidaklah baik dan tidak saya rekomendasikan, kenapa?.

Karena gambar yang berkualitas terlalu baik akan memperlambat loading website atau blog.

Kemudian berapakan ukuran atau format gambar untuk keperluan web desain yang paling ideal?.

Untuk menentukan ukuran atau format gambar terbaik untuk keperluan web desain aturannya kurang lebih seperti ini.

Ukuran gambar menyesuaikan dengan runag kosong tempat menempelkan gambar yang tersedia, semisal jika lahan/ruang yang disediakan untuk menampilkan gambar sebesar 1280x760 pixel.

Maka ukuran gambarnya juga harus sama yaitu 1280x760 pixel.

Kenapa harus begitu?, cara ini dilakukan agar gambar tidak tampil melebihi atau kurang dari ruang yang disediakan, dan tentunya supaya kualitas gambar tetap utuh seperti semula sehinga tidak buram.

Dan satu poin lagi yang wajib di ingat, yaitu usahakan kualitas gambar tidak melebihi 100KB (Kilo Bite) per satu gambar.

Jika gambar yang ingin kamu gunakan lebih dari ukuran segitu, saran saya gunakan software kompres untu memperkecil ukuran gambar.

Nah salah satu software kompres gambar terbaik yang wajib kamu gunakan yaitu FILEminimalizer Pictures.

8. Widged pencarian yang susah ditemukan

Ini merupakan salah satu elemen yang cukup krusial dalam sebuh web desain yaitu widged pencarian.

Dari pengamatan saya banyak situs yang widged pencariannya kurang strategis dalam penempatannya dan itu adalah hal cukup menjengkelkan.

Dimanakah tempat meletakan widged pencarian paling bagus itu?.

Sebaiknya letakan saja di header atau bagian paling atas sidebar.

9. Memasang terlalu banyak widged dan fitur yang tidak berguna 

Memasang wdged yang tidak dibutuhkan fiturnya itu adalah tindakan yang mubazir.

Jadi gunakanlah widged yang memang diperlukan saja, contohnya seperti widged kotak pencarian, profil author/about blog, social media, label, postingan terbaru dan entri terpopular.

Jangan sekali-kali memasang widged sebagai berikut yaitu jam, tanggal dan lainnya yang tidak penting.

10. Menambahkan animasi

Menambahkan animasi didalam website atau blog merupakan sebuah tindakan yang saya rasa kurang tepat. Kenapa saya bilang seperti itu?

Karena animasi itu selain akan memperlambat loading juga sangat mengangu pengunjung diakibatkan gerakannya itu.

Akan tetapi akan berbeda kasus jika animasi yang ditambahkan itu memang untuk mendukung dan memperkuat suatu halaman atau postingan tertentu.

Sebagai contoh jika sebuah website atau blog terdapat halaman tentang cara mengosok gigi yang benar dan dihalaman tersebut dtambahkan animasi/gambar bergerak untuk memperjelas tutorial tersebut.

Maka kasus seperti ini masih di perbolehkan asal ukuran animasinya tidak terlalu besar.

11. Memasang musik backsound otomatis

Memasang musik backsound secara otomatis di website atau blog adalah tindakan bodoh yang tidak boleh dilakukan.

Alasannya selain membuat loading website/blog kamu semakin berat, suara yang ditimbulkan dapat menggangu pengunjung situsmu.

Mungkin karena ia memang tidak suka sama lagunya atau ia sedang malas saja mendengarkan musik.

Jadi jangan sekali-kali memasang pemutar musik otomatis di website/blog kamu ya!.

12. Form komentar yang ribet

Inilah salah satu hal yang sangat saya benci dari sebuah desain website/blog, yaitu form komentarnya ribet.

Ribet seperti apa? Yaitu harus memasukan banyak identitas.

Atau harus melewati terlebih dahulu kode chaptcha, pendeteksi robot dan lainnya.

Sebenarnya form komentar yang baik itu seperti apa?.

Terbaik itu yang simpel atau sederhana saja contohnya seperti berikut ini yaitu hanya memasukan nama, alamat email dan isi komentar.

Serta tidak harus melewati proses konfirmasi terlebih dahulu.

Contohnya seperti melewati kode chaptcha, robot vertifikasi dan lain-lain.

13. Tidak menampilkan kontak

Tidak Mmenampilkan kontak adalah suatu tindakan yang terlihat amatir dan membuat desain website/blog kamu tidak profesional.

Jadi saya sangat mewajibkan kamu menampilkan kontak info didalam website/blogmu ya!.

Tips penting yang juga perlu kamu perhatikan adalah buatlah desain kontak yang lengkap dan sesuai kebutuhan.

Contohnya seperti berikut ini :

Alamat lengkap, Jam operasional, nomor telephon dan surel/alamat email, (Desain website/blog perusahaan/toko, bersifat formal).

Alamat (lengkap atau hanya nama kota/kabupaten), nomor telepon (opsional), surelalamat email (Desain website/blog personal, bersifat pribadi),

Jangan lupa juga menambahkan form pesan agar memudahkan pengunjung dalam  mengirim pesan.

14. Kebanyakan pasang iklan

Terkadang seseorang terlalu egois dengan memasang iklan dalam jumlah banyak di website/blog milik mereka.

Hal itu dilakukan tentu saja untuk mendapatkan banyak penghasilan dari iklan yang dipasang.

Namun perlu diketahui, menampilkan iklan dalam jumlah berlebih dalam suatu website/blog adalah blunder yang memperburuk reputasi.

Sebaiknya berapa banyak iklan yang dipasang?

Menurut saya maksimal hanya 2 buah saja.

Lalu dimana penempatkan iklan terbaik dan strategis itu?

Yaitu satu buah dibagian paling atas sidebar dan satu lagi di antara isi postingan.

15. Memasang Pop-up Window

Apa itu Pop-up window?, secara singkat artinya adalah jendela yang muncul secara otomatis tanpa permisi saat membuka sebuah halaman website/blog.

Jelas semua hal yang tanpa permisi itu  sangatlah menggangu, tapi kenapa  masih banyak saja website/blog yang menggunakan fitur ini.

Jadi saran saya jika kamu ingin website atau blogmu terlihat profesional jangan sekali-kali memasang fitur  seperti ini ya.

16. Terlalu banyak mengunakan javascript dan Jquery 

Secara singkat javascript dan jquery adalah salah satu bahasa pemrograman tingkat tinggi dan dinamis.

Biasanya digunakan dalam web desain dengan tujuan agar tampilannya semakin interaktif, contohnya untuk membuat fitur drop down pada header, slide show galeri foto.

Memang dengan mengunakan javascript dan jquery membuat desain semakin bagus dan interaktif, namun jika terlalu banyak dalam pengunaannya malah menimbulkan dampak negatif.

Seperti, proses memuat halaman menjadi berat dan lambat, terlalu banyak fitur yang bergerak menggangu pengunjung dalam mencerna informasi dalam website atau blog tersebut.

Saran saya gunakan javascript dan jquery seperlunya dan seefisien mungkin ya.

17. Desain tidak responsif

Di era semoderen ini pengakses internet tidak hanya mengunakan pc atau komputer saja untuk berselancar di dunia maya akan tetapi juga perangkat lainnya contohnya seperti ponsel,  tablet, notebook, laptop serta lainya yang memiliki resolusi layar berbeda-beda.

Maka dari itu jika kamu mendesain website atau blog usahakan untuk membuatnya menjadi responsif, tujuannya adalah agar website atau blogmu bisa diakses dari beragam perangkat elektronik dan browser tetapi tetap nyaman bagi pengunjung.


Nah itulah beberapa contoh kesalahan fatal dalam mendesain website/blog yang sering dilakukan pemula.

*Kesimpulan*
Intinya dalam mendesain website atau blog yang baik dan bagus itu kriterianya seperti berikut ini yaitu sederhana, bersih, rapi, cepat dan user friendly serta user interface.

Read More