Lompat ke konten Lompat ke sidebar Lompat ke footer
Beranda / Blogging

Membuat 4 Kotak Baris HTML ala Blog Kode Jarwo

by Mas Dar 1 komentar
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.

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