Membuat 4 Kotak Baris HTML ala Blog Kode Jarwo

Membuat 4 Kotak Baris HTML ala Blog Kode Jarwo
Membuat 4 Kotak Baris HTML ala Blog Kode Jarwo
 Membuat 4 Kotak Baris HTML ala Blog Kode Jarwo - Assalamualikum, siapa sih yang tidak tau tentang Blog Kode Jarwo pasti semua kalangan blogger tau semua ya. Seperti saya yang tidak asing lagi dengan nama tersebut semenjak kenal beliau sekitar 2017 lalu.

Ozik Jarwo adalah nama asli dari Blog Kode Jarwo ini, banyak yang mejuluki kalau dia adalah master Pagespeed, karena banyak yang menyewa jasanya untuk speed blog mereka.

Seperti artikel yang akan bagikan kepada kalian semua kali ini. Yaitu Cara Membuat 4 Kotak Baris HTML Responsive ala Kode Jarwo. Jangan sampai takut mempengaruhi speed blog karena ini sangat ringan banget.

Cukup kalian Copy aja kode di bawah ini taruh kode di <body pada template blog kalian.

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

Kemudian Save Template.

Nah bagaimana cukup.mudah bukan, Itulah sedikit tutorial mengenai Cara Membuat 4 Baris HTML ala Blog Kode Jarwo. Semoga artikel ini bisa bermanfaat.
Tutorial

Dapatkan Tips Menarik Setiap Harinya!

  • Dapatkan tips dan trik yang belum pernah kamu tau sebelumnya
  • Jadilah orang pertama yang mengetahui hal-hal baru di dunia teknologi
  • Dapatkan Ebook Gratis: Cara Dapat 200 Juta / bulan dari AdSense

1 Komentar untuk "Membuat 4 Kotak Baris HTML ala Blog Kode Jarwo"

Catatan Untuk Para Jejaker
  • Mohon Tinggalkan jejak sesuai dengan judul artikel.
  • Tidak diperbolehkan untuk mempromosikan barang atau berjualan.
  • Dilarang mencantumkan link aktif di komentar.
  • Komentar dengan link aktif akan otomatis dihapus
  • *Berkomentarlah dengan baik, Kepribadian Anda tercemin saat berkomentar.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel