Membuat sebuah kotak html yang didesain untuk tampilan blog agar menjadi lebih keren dibanding sebelumnya.
Saya akan membagikan tips untuk Anda yang suka mengedit template blog Anda.
Sebenarnya membuat 4 baris kotak ini sangat mudah. Hanya perlu membuatnya menggunakan tag div, lebarnya bisa Anda atur sendiri dan ini dibuat dengan float left.
Tetapi, yang sulit adalah membuat ke empat kotak html tersebut menjadi responsive jika dibuka menggunakan browser mobile.
Mungkin saya hanya meniru cara yang dibuat oleh blog kode jarwo, tetapi saya cuma ingin membagikan kepada anda cara membuat kotak html dengan mudah da dibuat secara responsive agar dilihat oleh user lebih enak
Tenang saja sob, bang jarwo pasti bisa mengatasinya dengan mudah.
Untuk apa sih kotak HTML ini?
Sebenarnya ini hanya untuk mempercantik blog Anda.Mau dipasang atau tidak itu terserah pada dri Anda sendiri. Kotak ini pun juga sangat responsive untuk pengguna mobile.
Hanya template tertentu yang bisa menerapkan kotak HTML ini. Jika ukuran pada kota tersebut sangat besar maka Anda juga bisa mengecilkannya di bagian
{display:block;height:400px;float:left;background:#eee;border-radius:10px;padding:20px;margin:1% 1% 3%;border-bottom:7px
Untuk melihat langsung demonya
Saya hanya membuatkan tinggal langsung dipasang di blog Anda. Jangan kawatir mengenai cara membuatnya
Mau lihat cara buatnya? Langsung saja menuju Cara Membuat 4 Baris Kotak HTML ala Bang Jarwo yang Responsive
Pemasangan
<div class=’list awal’>
<img src=’link 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 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 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 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>
Keterangan
1. #eee; = Warna kota yang abu – abu
2. #ff9696 = Warna garis bawah kotak (merah)
3. #ddd = warna kota abu – abu gelap
4.. #222 = Warna garis bawah kotak
