Membuat CSS Responsive Tab Horizontal Touchable dan Scrollable

Cara membuat Responsive Tab Horizontal yang Touchable pada phone gadget dan scrollable pada desktop bisa dilakukan hanya dengan menggunakan trik CSS. Jika sebelumnya saya membuat Tutorial Tabs Vertical dan Horizontal tanpa jQuery yang mana saya menurunkan list-list pada tab tersebut pada ukuran width / lebar gadget tertentu, berbeda dengan tutorial sekarang ini. List-list dalam responsive tab horizontal ini akan tetap memanjang/meleber ketika berada dalam resolusi layar yang lebih kecil.

Misalnya, list-list dalam tab jika ditotalkan memiliki lebar 500px secara keseluruhan namun layar resolusi smartphone kita hanya 320px, maka list-list hanya akan terlihat sebagian (sekitar 320px terlihat, 500px – 320px = 180px tersembunyi/tidak terlihat). Maka fungsi scroll atau touch inilah yang akan kita pakai yang berfungsi agar bisa menggeser list-list yang terpotong atau tidak terlihat tersebut.

Kenapa CSS Responsive Tab Horizontal Touchable harus di Gunakan?

Tentunya hal ini tergantung pada 2 faktor:

  1. Ada terdapat list yang banyak, sehingga jika list tersebut di turunkan (display block) akan memakan space ke bawah. Dan tentunya hal ini sangat mengganggu user untuk melihat konten.
  2. Mempercantik desain tampilan sehingga user mengakses konten tidak terlalu sulit. Jika list tersebut di turunkan menggunakan display:inline-block atau inline saja, list akan terlihat berantakan tidak tersusun dengan rapi menginat panjang/lebarnya kata pada daftar nama list berbeda-beda.

Yang Harus dipersiapkan dalam Responsive Tab Horizontal Touchable

Kita akan menggunakan 1 elemen <div> dan elemen <ul> dan <li> untuk beberapa daftar list. Ok selanjutnya langsung kita buat struktur HTMLnya.

Struktur HTML dalam hal ini, anda bisa menggunakan elemen lainnya selain yang saya pakai, yakni <div> <ul> <li>. Bisa menggunakan <nav> <ul> <li>, <div> <div> <a> dan atau elemen-elemen lainnya berdasarkan elemen HTML.

Poin utama untuk membentuk Tab Horizontal Touchable ini adalah, dua elemen sebelum daftar list, yaitu <div> dan <ul>.

CSS Code Responsive Tab Horizontal Touchable:

Demo

Download

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