Membuat 4 Baris Kotak HTML ala Kode Jarwo, Responsif!


    Sudah lama tidak update artikel, karena dikejar-kejar sama orderan jasa pemercepat blog yang makin hari makin sulit saja tantangan yang harus dihadapi supaya skornya hijau di Google PageSpeed Insights.

    Sudah ada waktu luang, tapi bingung juga mau update apa. Akhirnya saya sempat disarankan sama mas Khatami Yasser, pemilik sekaligus admin di blog Tekloggers, untuk membuat artikel seputar cara membuat 4 baris kotak label seperti di homepage blog ini. Jelasnya bisa anda pada lihat gambar dibawah ini.

    4 Baris Kotak HTML ala Kode Jarwo

    Saya sendiri menggunakan kotak seperti ini untuk menempatkan label-label atau kategori artikel penting yang ada di blog saya. Tapi anda dapat mengubah fungsinya sesuai keinginan hati.

    Sebenarnya membuat baris kotak seperti diatas mudah saja, anda hanya perlu membuat 4 kotak menggunakan tag DIV, lebarnya dipresentasikan dengan persen, dan dibuat float left. Tetapi yang sulit adalah membuatnya responsif, agar keempat kotak tersebut tetap terlihat rapi walaupun dilihat dari mobile...

    ...tapi tenang saja, saya sudah membuatnya responsif.

    Untuk Live DEMO nya, bisa anda lihat disini.

    Langsung saja, bagi anda yang ingin membuatnya silakan ikuti panduan dibawah ini.

    Bagi anda yang ingin langsung ke cara pemasangan (tanpa tutorial pembuatan), bisa langsung ke cara keempat.

    1) Pembuatan DIV


    Pertama, marilah kita membuat tag DIVnya dahulu. Disini saya memberi class pada DIVnya yaitu list. Berhubung kita akan membuat 4 kotak, maka buatlah 4 tag DIV.

    <div class='list'>
    </div>

    <div class='list'>
    </div>

    <div class='list'>
    </div>

    <div class='list'>
    </div>

    Agar anda mudah membedakan tiap DIVnya, silakan diberi tambahan class dibelakangnya. Contoh saya seperti ini:

    <div class='list awal'>
    </div>

    <div class='list tengah'>
    </div>

    <div class='list tengah'>
    </div>

    <div class='list terakhir'>
    </div>

    Selesai membuat tag DIV pembungkusnya. Sekarang mari kita membuat tag untuk menaruh judul dan deskripsi tiap kotak (jelasnya bisa anda lihat kembali DEMO diatas). Disini saya menggunakan tag P untuk judul dan deskripsinya.

    Untuk judul saya beri class list-title, sedangkan deskripsi saya beri class list-description.

    Kedua tag P ini (judul dan deskripsi) dimasukkan kedalam tag DIV pembungkus yang sudah kita buat tadi, sehingga keseluruhan kode yang sudah kita buat seperti ini:

    <div class='list awal'>
       <p class='list-title'> Judul Kotak 1 </p>
       <p class='list-description'> Deskripsi Kotak 1 </p>
    </div>

    <div class='list tengah'>
       <p class='list-title'> Judul Kotak 2 </p>
       <p class='list-description'> Deskripsi Kotak 2 </p> </div>

    <div class='list tengah'>
       <p class='list-title'> Judul Kotak 3 </p>
       <p class='list-description'> Deskripsi Kotak 3 </p> </div>

    <div class='list terakhir'>
       <p class='list-title'> Judul Kotak 4 </p>
       <p class='list-description'> Deskripsi Kotak 4 </p>
    </div>

    Sudah membuat tag pembungkus, judul serta deskripsinya, sekarang tempat untuk menaruh gambar yang diatas judul. Caranya cukup mudah, anda hanya perlu memasukkan tag IMG dan A pada tiap kotak, sehingga menjadi seperti ini:

    <a href='#'><div class='list awal'>
       <img src='...link gambar kotak 1...'/>
       <p class='list-title'> Judul Kotak 1 </p>
       <p class='list-description'> Deskripsi Kotak 1 </p>
    </div></a>

    <a href='#'><div class='list tengah'>   <img src='...link gambar kotak 2...'/>
       <p class='list-title'> Judul Kotak 2 </p>
       <p class='list-description'> Deskripsi Kotak 2 </p>
    </a></div>
    <a href='#'><div class='list tengah'>   <img src='...link gambar kotak 3...'/>
       <p class='list-title'> Judul Kotak 3 </p>
       <p class='list-description'> Deskripsi Kotak 3 </p>
    </a></div>
    <a href='#'><div class='list terakhir'>   <img src='...link gambar kotak 4...'/>
       <p class='list-title'> Judul Kotak 4 </p>
       <p class='list-description'> Deskripsi Kotak 4 </p>
    </a></div>

    Semua sudah siap, tinggal pemberian style agar tampilannya menjadi menarik. Untuk pemberian style silakan anda lanjutkan ke langkah kedua.

    2) Pemberian style dengan CSS & Membuat responsif


    Tanpa terlalu banyak basa basi lagi, berikut semua kode CSS yang akan kita pakai beserta penjelasan singkatnya:

    <style>

      .list {display:block;height:400px;float:left;background:#eee;border-radius:10px;padding:20px;margin:2%;border-bottom:7px solid #ff9696;cursor:pointer}
      .list p {color:#222 !important}
        @media all and (min-width:1000px){.list{width:calc(25% - 40px - 4%)}}
        @media all and (min-width:770px) and (max-width:1000px){.list{width:calc(100% / 3 - 20px - 4%)}.list.terakhir{width:calc(100% - 40px - 4%);height:300px}}
        @media all and (max-width:770px) {.list{width:calc(50% - 40px - 4%)}}
        @media all and (max-width:545px) {.list{width:calc(100% - 40px - 4%)}}
      .list:hover {background:#ddd;border-bottom:7px solid #222}
      .list svg {width:150px;display:block;margin:0 auto;}
      .list-title {font-size:120%;font-weight:700;text-align:center;margin:10px 0}

    </style>
    Keterangan:
    • #eee = Warna kotak (abu-abu)
    • #ff9696 = Warna garis bawah kotak (merah)
    • #ddd = Warna kotak ketika di hover (abu-abu gelap) 
    • #222 = Warna garis bawah kotak ketika di hover (hitam)

    Sedikit tambahan, CSS diatas sudah termasuk responsif. Kotak akan menjadi 3 baris (3 diatas 1 dibawah) ketika dilihat melalui notebook, 2 baris (2 diatas 2 dibawah) ketika dilihat melalui layar tab, dan 1 baris vertikal kebawah ketika dilihat melalui handphone.

    3) Pemasangan


    Sebelum masuk ke proses pemasangan, berikut penampilan keseluruhan kode yang sudah berhasil kita buat.

    <div class='list awal'>
       <img src='...link gambar kotak 1...'/>
       <p class='list-title'> Judul Kotak 1 </p>
       <p class='list-description'> Deskripsi Kotak 1 </p>
    </div>

    <div class='list tengah'>
       <img src='...link gambar kotak 2...'/>
       <p class='list-title'> Judul Kotak 2 </p>
       <p class='list-description'> Deskripsi Kotak 2 </p> </div>

    <div class='list tengah'>
       <img src='...link gambar kotak 3...'/>
       <p class='list-title'> Judul Kotak 3 </p>
       <p class='list-description'> Deskripsi Kotak 3 </p> </div>

    <div class='list terakhir'>
       <img src='...link gambar kotak 4...'/>
       <p class='list-title'> Judul Kotak 4 </p>
       <p class='list-description'> Deskripsi Kotak 4 </p>
    </div>

    <style>

      .list {display:block;height:400px;float:left;background:#eee;border-radius:10px;padding:20px;margin:1% 1% 3%;border-bottom:7px solid #ff9696;cursor:pointer}
      .list p {color:#222 !important}
        @media all and (min-width:1000px){.list{width:23%}}
        @media all and (min-width:770px) and (max-width:1000px){.list{width:31%}.list.terakhir{width:97%;height:300px}}
        @media all and (max-width:770px) {.list{width:48%}}
        @media all and (max-width:545px) {.list{width:98%}}
      .list:hover {background:#ddd;border-bottom:7px solid #222}
      .list svg {width:150px;display:block;margin:0 auto;}
      .list-title {font-size:120%;font-weight:700;text-align:center;margin:10px 0}

    </style>

    Sekarang, masukkan semua kode keseluruhan tersebut tepat diatas kode <body . Simpan, lalu lihat hasilnya. Bagaimana? Mudah saja kan cara membuatnya?