√ Membuat Kotak Catatan Peringatan Keren di Blog

Membuat Kotak Catatan Peringatan Keren di Blog

7.4.23

Untuk memberi catatan atau peringatan di blog ada baiknya kita menggunakan kotak atau box tersendiri supaya pengunjung fokus membacanya. Disamping itu dengan adanya kotak catatan atau peringatan ini akan memudahkan pengunjung untuk mengingat apa yang kita jadikan catatan penting dalam artikel tersebut.

Baca juga: Menunda Loading Gambar untuk Mempercepat Blog

Banyak diluar sana blog yang membahas box atau kotak catatan peringatan yang bisa digunakan untuk diisi dengan catatan penting tetapi tidak berfokus ke kotak catatan penting atau peringatan melainkan banyak style sehingga cssnya pun tergolong panjang.

Untuk itu pada tutorial singkat ini admin berusaha membuat kotak catatan peringatan di blog yang menggunakan css singkat atau pendek tetapi tetap dioptimasi untuk tampilan mobile atau responsive dan tentunya terlihat keren.

CSS Kotak Catatan Peringatan

Berikut merupakan kode css kotak atau box catatan peringatan, copy kemudian letakkan diatas kode </style> .

/* Box Warning*/ 
.box.warning{padding:10px;border-radius:15px;background-color:#ffe7eb;background-image: url(&quot;data:image/svg+xml,%3Csvg viewBox=&#39;0 0 24 24&#39; xmlns=&#39;http://www.w3.org/2000/svg&#39;%3E%3Cpath d=&#39;M2.2,16.06L3.88,12L2.2,7.94L6.26,6.26L7.94,2.2L12,3.88L16.06,2.2L17.74,6.26L21.8,7.94L20.12,12L21.8,16.06L17.74,17.74L16.06,21.8L12,20.12L7.94,21.8L6.26,17.74L2.2,16.06M13,17V15H11V17H13M13,13V7H11V13H13Z&#39; fill=&#39;%23c00827&#39;/%3E%3C/svg%3E&quot;);} .box.warning {background-position: left 1rem top 1rem;background-position: left clamp(1.15rem, calc(1.0648rem + -.0648vw), 1rem) top 1em;background-repeat: no-repeat;background-size: 1.25rem;background-size: clamp(1.35rem, calc(1.2315rem + .5185vw), 1.25rem);color: #000;padding-left: clamp(3.25rem, calc(3.1019rem + .6481vw), 3rem);position: relative;} .box.warning:before {content: &#39;&#39;;bottom: 0;border-left-width: 1px;border-left-style: solid; height: calc(100% - (2.85rem + 1rem)); position: absolute;left: clamp(1.75rem, calc(1.6759rem + .3241vw), 1.25rem);top: clamp(2.65rem, calc(2.5rem + .3241vw), 3.25rem)}.box.warning:before {border-left-color: #c00827;}

Penerapan Kotak Catatan Peringatan

Untuk penerapannya pada artikel atau postingan, kalian cukup menambahkan tag class="box warning" pada paragraf atau div yang kalian inginkan. Misalkan admin contohkan pada kode dibawah ini.

<p class="box warning">Contoh penerapan kode kotak catatan peringatan pada artikel atau postingan blog. Contoh penerapan kode kotak catatan peringatan pada artikel atau postingan blog</p>

Sehingga akan menghasilkan tampilan seperti berikut.

Contoh penerapan kode kotak catatan peringatan pada artikel atau postingan blog. Contoh penerapan kode kotak catatan peringatan pada artikel atau postingan blog

Bagaimana? mudah bukan? Demikian tutorial singkat bagaimana membuat kotak atau box catatan peringatan keren di blog. Selamat mencoba!