Skip to main content

Membuat Kotak Catatan Warna Warni Minimalis Dengan CSS

Sabtu, 03 April 2021

Membuat Kotak Catatan Warna Warni Minimalis Dengan CSS - Sebenarnya blogger sendiri sudah menyediakan fitur blockquote yang dapat kita gunakan untuk menonjolkan kalimat dalam sebuah postingan, hanya saja kita suka bosen dengan tampilan yang begitu gitu saja.

Apalagi kamu yang senang oprek-oprek template pasti tidak akan kuat jika melihat ada trik blog yang bagus dan langsung menggantinya pada blog kita sendiri, sebab berdasarkan pengalaman saya begitulah hehe.

Sebelumnya kita sudah melihat Cara Membuat Border Keren dan pada kesempatan ini kita akan mencoba membuat kotak catatan serbaguna (dalam arti bisa kamu taruh dimana saja hanya dengan css)

Untuk Membuat Kotak Catatan Warna Warni Minimalis Dengan CSS, tidaklah sulit sobat hanya perlu meletakan CSS ini dalam </style> template anda kemudian save.

.info,.tips,.warning{line-height:22px;min-height: 38px; padding:10px 12px 12px;margin: 5px 0;font-family:'Georgia', sans-serif;border-radius:2px}.info{background:#8847da; color: #fff;}.tips{background:#ffcd3e; color: #fff;}.warning{background:#d95c73;color: #fff;}

Langkah selanjutnya kamu bisa meletakan kode pemanggil berikut ini dimana saja, misalkan dalam postingan atau pada HTML template.

<div class="tips">ISI CATATAN ANDA</div>

<div class="info">ISI CATATAN ANDA</div>

<div class="warning">ISI CATATAN ANDA</div>

Kamu bisa sesuaikan sendiri kata-katanya dan biar lebih jelas lihat kotak catatan warna warni minimalis berikut ini:

Selamat mencoba!

Bagikan:

Hallo sobat! blog.jejakunik.com membuka kesempatan untuk anda mempromosikan Produk atau Jasa secara GRATIS pada blog ini. Detailnya bisa kamu lihat di CLICK HERE
Judul: Membuat Kotak Catatan Warna Warni Minimalis Dengan CSS Silahkan berikan komentar Anda.
Buka Komentar
Tutup Komentar