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 pada tiap kotak, sehingga menjadi seperti ini:

<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>

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: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 img {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?

Sabtu, Oktober 14, 2017 - 13 komentar

13 komentar untuk Membuat 4 Baris Kotak HTML ala Kode Jarwo, Responsif!.

Silakan masukkan komentar anda. Jangan habiskan waktu hanya untuk melakukan SPAM disini.


Perlihatkan Semua Komentar Tutup Semua Komentar
.
Minggu, 15 Oktober 2017 03.34.00 WITA

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

Balas Hapus
.
Ozik Jarwo
Minggu, 15 Oktober 2017 12.07.00 WITA

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

Balas Hapus
.
Juriwaliku
Minggu, 15 Oktober 2017 12.35.00 WITA

ok di coba dulu gan

Balas Hapus
.
Walatra Sehat Mata Softgel
Rabu, 18 Oktober 2017 12.06.00 WITA

terimakasih atas informasinya, dan jangan lupa kunjungi kami di http://kapsulgamatemaswalatra.com/walatra-sehat-mata-softgel/

Balas Hapus
.
Riizky HazardOps
Senin, 06 November 2017 20.39.00 WITA

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

Balas Hapus
.
Renz - Game
Jumat, 12 Januari 2018 00.12.00 WITA

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

Balas Hapus
.
Ozik Jarwo
Jumat, 12 Januari 2018 13.16.00 WITA

Iya saya lupa masukkan kode untuk linknya...

Balas Hapus
.
Renz - Game
Sabtu, 13 Januari 2018 19.04.00 WITA

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

Balas Hapus
.
Renz - Game
Sabtu, 13 Januari 2018 19.05.00 WITA

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

Balas Hapus
.
Ozik Jarwo
Sabtu, 13 Januari 2018 19.38.00 WITA

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

Karena ini saya modif ulang

Iya pakai <a untuk sematkan linknya

Balas Hapus