Cara Membuat Kotak Catatan di Blog: 4 Tampilan Menarik dengan CSS

Dalam dunia blogging, menyajikan konten yang menarik dan mudah dibaca adalah hal yang penting. Salah satu cara untuk meningkatkan tampilan artikel adalah dengan menambahkan kotak catatan (note box). Kotak catatan ini berfungsi untuk menyorot poin penting, memberikan catatan khusus, atau sekadar mempercantik tampilan artikel.

Pada artikel ini, saya akan membagikan 4 desain kotak catatan menarik yang bisa Anda terapkan di blog menggunakan CSS.

Manfaat Kotak Catatan di Blog

Menggunakan kotak catatan dalam artikel memiliki beberapa manfaat, antara lain:

• Menyorot informasi penting, sehingga pembaca lebih mudah memahami inti tulisan.
• Meningkatkan estetika blog, membuat tampilan lebih rapi dan profesional.
• Memudahkan navigasi, terutama untuk artikel yang panjang dan memiliki banyak informasi teknis.

Dengan berbagai tampilan yang kami bagikan, Anda bisa memilih desain yang paling sesuai dengan gaya blog Anda.

Cara Membuat Kotak Catatan di Blog dengan CSS

Untuk menerapkan kotak catatan ini, cukup tambahkan kode CSS dibawah ini ke dalam template blog Anda. Letakan kode CSS sebelum kode ]]</b:skin> atau </style>

Tampilan 1: Kotak Catatan Minimalis

Desain ini memiliki tampilan sederhana dengan latar belakang putih dan aksen biru di sisi kiri.

.notes{
    padding: 16px 24px;
    border-radius: 4px;
    display: block;
    font-size: 18px;
    line-height: 30px;
    color: rgba(37,38,94,.7);
    margin-bottom: 16px;
    background: #f8faff;
    border: 1px solid #d3dce6;
    border-left: 4px solid #0556f3;
    border-radius: 4px;
}

Tampilan 2: Kotak Catatan dengan Efek Kertas Terlipat

Kotak ini menyerupai selembar kertas dengan efek lipatan di pojok kanan atas.

.notes{
     position: relative;
     width: 100%;
     padding: 1.2em 1.4em;
     margin: 1em auto;
     color: #3a3429;
     background: #f3dfba;
     overflow: hidden;
     line-height: 1.6em;
}
.notes:before {
     content: "";
     position: absolute;
     top: 0;
     right: 0;
     border-width: 0 16px 16px 0;
     border-style: solid;
     border-color: #fefefe #fefefe #cdba95 #cdba95;
     background: #cdba95;
     box-shadow: 0 1px 1px rgb(0 0 0 / 30%), -1px 1px 1px rgb(0 0 0 / 20%);
     display: block;
     width: 0;
}
.notes:hover:before{
     display:none
}

Tampilan 3: Kotak Catatan dengan Ikon Kutipan

Tampilan ini dilengkapi dengan ikon tanda kutip dan garis tebal di sisi kiri untuk menambah kesan elegan.

.notes{font-size: 14px;line-height: 30px;position: relative;background-color: #29323C;
color:white;margin: 35px 0 15px 15px;padding: 20px 28px 15px 35px;position: relative;
border-left: 6px solid #0A3A73;border-radius:0 0 3px 3px;} .notes:before{content: '';
background:orange url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14,17H17L19,13V7H13V13H16M6,17H9L11,13V7H5V13H8L6,17Z' fill='%23fff'/%3E%3C/svg%3E") center / 30px no-repeat;
width: 3rem;height: 3rem;position: absolute;border-radius: 100px;box-shadow: inset 0 0 0 99999px rgb(255 255 255 / 25%);
transition: background-color .2s ease;left: -28px;top: -18px}

Tampilan 4: Kotak Catatan dengan Ikon Bendera

Tampilan ini menggunakan warna yang lebih lembut dengan ikon bendera di bagian kiri.

.notes{position:relative; padding:20px 30px 20px 50px; background-color:#e1f5fe;
color:#01579b; font-size:.85rem; line-height:1.62em;border-radius:2px} 
.notes:before{content:'';position:absolute;left:18px;top:23px; width:20px;height:20px; 
background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2301579b' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'><path d='M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z'/><line x1='4' y1='22' x2='4' y2='15'/></svg>") center / 20px no-repeat}

Cara Menggunakan Kotak Catatan di Postingan Blog

Setelah menambahkan kode CSS di template blog, Anda bisa menampilkan kotak catatan dalam postingan dengan menambahkan kode HTML berikut:

<div class="notes">Tulis catatan Anda disini</div>

Kesimpulan

Menggunakan kotak catatan (note box) di blog dapat meningkatkan estetika dan membantu menyorot informasi penting. Dengan 4 tampilan berbeda yang kami bagikan, Anda bisa memilih desain yang paling sesuai dengan gaya blog Anda.

Jika Anda memiliki pertanyaan atau ingin berbagi pengalaman, silakan tinggalkan komentar di bawah. Jangan lupa untuk membaca artikel lainnya untuk mendapatkan lebih banyak tips blogging!