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

Cara Membuat Responsive Video Youtube & Selfhosted

Membuat responsive video iframe atau Embed Youtube di blog sangatlah mudah dilakukan hanya dengan menggunakan trik CSS. Dari youtube sendiri, video mereka tidak otomatis responsive pada lebar berbagai macam device. Trik video responsive ini juga bisa dilakukan pada video-video selain youtube, misalnya video dari Vimeo, Vidio, Selfhosted Video (video yang disimpan di server blog menggunakan player tertentu) dan atau juga bisa diterapkan pada audio yang mempunyai player; misalnya audio dari Soundcloud. Jika masih kurang, Google Maps juga bisa diterapkan dalam teknik trik ini.

Intinya pada penggunaan trik ini terdapat 2 poin:

  1. Membungkus elemen video: <iframe>, <object>, <video> dan <embed> dengan elemen <div>. Saya gunakan div dikarenakan elemen tersebut sudah biasa di pakai dalam HTML.
  2. Gunakan CSS untuk mengatur kedua elemen tersebut di atas, yakni <div> sebagai pembungkus dan <iframe> sebagai yang terbungkus.

Sehingga struktur HTMLnya menjadi seperti contoh di bawah ini:

OK, sekarang langsung mulai saja. Sebelumnya silahkan ambil dan siapkan HTML iframe dari youtube terlebih dahulu. Lalu tempatkan div dan iframe sehingga terstruktur seperti struktur HMTL di atas.

Selanjutnya, tambahkan style CSS untuk mengatur tampilan pada setiap elemen-eleman HTML di atas, agar sesuai dengan lebar device tertentu. Berikut adalah code CSSnya:

Penggunaan iframe diatas setelah class selector .video_wrapper digunakan karena embed youtube menggunakan <iframe>, jika embed selain youtube menggunakan selaian <iframe> maka ganti dengan sesuai dengan elemen HTML yang dipakai. Misalnya elemen HTML yang digunakan adalah <object> dan bukan <iframe>, maka penulisan dalam CSS adalah .video_wrapper object.

Penjelasan padding-bottom: 56.25% adalah menggunakan resolusi aspect ration 16:9, dimana lebar video lebih besar dari pada tinggi video atau pada gambar bisa disamakan dengan gambar landscape persamaannya.

Bagaimana Cara Menerapkan Responsive iframe/embed Youtube pada WordPress?

Pada umumnya, theme WordPress akhir-akhir ini sebagian besar sudah mengaplikasikan video responsive pada tiap halaman-halaman post dan page. Namun jika theme yang anda pakai belum menggunakannya, maka langkah-langkah di bawah ini bisa membantu anda.

  1. Pada post editor dalam wordpress, pilih text ya.. bukan visual. Lalu paste struktur HTML seperti di atas.
  2. Paste code CSS di atas pada style.css pada theme yang anda pakai.

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.