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.
Bila bingung tanya di komentar
BalasHapusPosting Komentar