Contoh Kreatif Halaman Error 404 Responsive dengan Source Code

Halaman 404 atau halaman error yang berfungsi untuk memberitahu pengunjung blog anda bahwa halaman yang dicari tidak ada. Ada banyak faktor sehingga halaman 404 ini muncul pada blog atau website anda, diantaranya adalah; broken permalink dan postingan dihapus namun masih terindex di mesin pencari.

Mempunyai halaman 404 dengan desain yang cantik tentu bisa memberikan sentuhan yang beda pada pengunjung, dengan tidak menafikan tambahan fitur-fitur pada halaman 404 tersebut. Lalu apa keunggulan utama mempunyai halaman custom 404 dibanding dengan halaman error lainnya? Berikut bisa saya simpulkan beberapa keuntungannya:

  • memaksa pengunjung tidak lari dari blog/website anda
  • menyuguhkan konten menarik lainnya
  • mempunyai halaman 404 yang unik/beda dengan yang lain
  • menambah tampilan lebih cantik dan enak dipandang

Pada custom halaman error 404, anda bisa desain sedemikian rupa sesuai dengan niche blog/website anda. Hal ini biasa terjadi pada website-website perusahaan, misalnya perusahaan provider hosting/server, dimana pada halaman error 404 tersebut bisa ditambahkan background yang berhubungan dengan server yang terputus, server down dan lain sebagainya. Hal tersebut tentu untuk meningkatkan desain tampilan yang unik dan memberikan kesan kualitas website yang bagus dan enak dipandang.

Ok, langsung saja pada inti artikel ini. Berikut adalah beberapa contoh custom halaman 404 yang bisa menginspirasi anda untuk mempunyai halaman 404 yang bagus.

Beberapa Contoh Kreatif Halaman Error 404

Demo

Download

Membuat Tabs Vertical & Horizontal hanya dengan CSS tanpa jQuery

Fitur tabs baik vertical maupun horizontal sangat berguna khususnya bagi anda yang mempunyai konten yang sangat padat. Dengan adanya tabs dalam suatu konten akan membantu merapikannya. Dalam artian, anda hanya menampilkan konten tertentu pada satu tab sebagai tampilan utama, sedangkan yang lainnya disembunyikan untuk meminimalisir space/ruang konten yang bisa berpengaruh pada tampilan layout yang bersih dan rapi.

Bagaimana cara membuat Responsive Tabs hanya menggunakan CSS?

Kali ini saya akan membantu untuk membuat tabs hanya menggunakan CSS dan tidak memerlukan bantuan Jquery untuk menerapkannya. Tabs tersebut menggunakan <input> + <label> dengan bantuan styling CSS yang tidak akan memberatkan server tentunya.

Demo

Download

Struktur HTML dan Style di bawah adalah salah satu contoh dari 8 Tabs yang murni hanya menggunakan CSS tanpa bantuan jQuery, yakni;

  • 4 Horizontal Tabs
  • 4 Vertical Tabs

Struktur HTML

Pertama kita harus membuat struktur HTMLnya untuk menentukan kerangka Tabsnya.

Pada judul masing-masing Tabs di atas, saya menggunakan nama kota, perlu diingat bahwa judul harus berada dalam <label>. Perlu diingat bahwa masing-masing value id pada <input> harus unik dan harus sama dengan value for pada <label> di bawahnya.

Adapun pada bagian konten, tidak lupa juga bahwa masing-masing id juga harus unik.

Styling CSS

Ok sekarang kita langsung permak struktur yang telah kita buat dengan CSS untuk mendesain bagian-bagian Tabs di atas.

Pada file download yang akan anda terima, setiap file HTML dari masing-masing desain saya bedakan, harap untuk menyimak secara menyeluruh. Anda tinggal mengaplikasikannya salah satu file HTMLnya untuk melihat hasilnya.

Pada file style.css, style masing-masing desain saya masukkan jadi satu dalam style.css, namun setiap style desainnya saya bedakan agar memudahkan anda untuk menemukan style masing-masing desain.