Membuat 4 Baris Kotak HTML ala Kode Jarwo, Responsif!
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?
Silakan pilih sistem komentar anda ⇛   

Silakan berkomentar dengan sopan. Jangan buang-buang waktu anda hanya untuk melakukan SPAM, Fake Account, dan Flamming disini.

Ozik Jarwo Kode Jarwo
Ozik Jarwo author
# 18 Maret 2018 11.10

Bisa

Balas
Sandiegohills Kode Jarwo
Sandiegohills
# 18 Maret 2018 10.40

Mas.. kalo kodenya langsung di masukkan di article bisa ? , jadi tinggal edit teksnya aja..

Balas
Ozik Jarwo Kode Jarwo
Ozik Jarwo author
# 6 Maret 2018 07.15

Hapus semua kode media screen di CSS...

@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%}}

Habis itu, pakai kode penggantinya:

.list {width:100%}

Balas
Muhammad Fahri Kode Jarwo
Muhammad Fahri
# 6 Maret 2018 06.55

Iya. Buat satu

Balas
Ozik Jarwo Kode Jarwo
Ozik Jarwo author
# 5 Maret 2018 17.37

Itu kan bentuknya sudah horizontal ke samping...
Maksudnya mau dibuat 1 kotak tiap baris memanjang gitu? Bukan 4 kotak tiap baris?

Balas
Muhammad Fahri Kode Jarwo
Muhammad Fahri
# 5 Maret 2018 17.18

Kalo buatnya horizontal gimana om? Soalnya kalo vertikal dibuka lewat hp kurang enak

Balas
Ozik Jarwo Kode Jarwo
Ozik Jarwo author
# 13 Januari 2018 19.38

Pakai [...] gan bukan <...> untuk sematkan kode hehehe... :>)

Karena ini saya modif ulang

Iya pakai <a untuk sematkan linknya

Balas
Renz - Game Kode Jarwo
Renz - Game
# 13 Januari 2018 19.05

hihi ga support kode syntax koemnt yah bg :) :v

Balas
Renz - Game Kode Jarwo
Renz - Game
# 13 Januari 2018 19.04

cuman nambah <pre><a href="/search/label/#LINK_HERE?&amp;max=results=6"></pre>

Balas
Ozik Jarwo Kode Jarwo
Ozik Jarwo author
# 12 Januari 2018 13.16

Iya saya lupa masukkan kode untuk linknya...

Balas
Renz - Game Kode Jarwo
Renz - Game
# 12 Januari 2018 00.12

menambahkan efek linknya gimana ada yang 1 salag bang :v yaitu link :) kotaknya

Balas
Ozik Jarwo Kode Jarwo
Ozik Jarwo author
# 6 November 2017 21.37

bisa aja

Balas
Riizky HazardOps Kode Jarwo
Riizky HazardOps
# 6 November 2017 20.39

kalo css nya di taro di atas kode </body bisa kan dan untuk div nya di taro di bawah artikel bisa ga ?

Balas
Ozik Jarwo Kode Jarwo
Ozik Jarwo author
# 16 Oktober 2017 08.16

Silakan

Balas
Juriwaliku Kode Jarwo
Juriwaliku
# 15 Oktober 2017 12.35

ok di coba dulu gan

Balas
Ozik Jarwo Kode Jarwo
Ozik Jarwo author
# 15 Oktober 2017 12.07

Biasanya dibawah </head> atau <head/> ada tag <body gan, mungkin bentuknya aja yang beda

Balas
Anonim Kode Jarwo
Anonim
# 15 Oktober 2017 03.34

Mas punya saya gak ada kode <body nya. terus disimpen dimana ya?

Balas