Membuat Kotak Catatan Keren di Blog

Hallo semua, belakangan ini saya udah jarang up artikel mengenai blogger nih, oleh karna itu pada halaman ini saya kembali membagikan tips blogging yaitu cara membuat kotak catatan.

Sebelumnya juga saya telah membagikan cara membuat kotak catatan namun hanya dengan satu tampilan. Pada halaman ini saya akan kembali membagikan cara membuat kotak catatan dengan beberapa tampilan yang menarik.

Jika dilihat dari kegunaan mungkin sama, akan tetapi menandai tulisan yang penting pada sebuah artikel bukankah lebih menarik jika memiliki berbagai tampilan yang berbeda.

Menandai tulisan yang penting pada sebuah artikel merupakan hal yang perlu dilakukan oleh penulis agar point-point penting yang ingin disampaikan ke pembaca dapat tersampaikan dengan baik.

Umumnya ada beberapa cara yang dilakukan untuk memberikan tanda pada kata atau kalimat penting yaitu dengan menebalkan tulisan, mengubah warna tulisan, memberi efek stabilo dan dengan cara yang akan saya bagikan pada halaman ini yaitu kotak catatan atau note box.

Membuat Kotak Catatan di Blog

Untuk membuat kotak catatan kali ini hanya perlu meletakkan css yang saya bagikan sebelum kode ]]</b:skin> atau </style>

Kotak catatan ini memiliki kesan sederhana dengan tema berwarna putih dan aksen berwarna biru di sisi bagian 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;
}

Kotak catatan ini memiliki kesan seperti kertas namun ada sedikit lipatan pada 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
}

Kotak catatan ini menambahkan icon (tanda kutip) dan border di sebelah kiri.

.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}

Kotak catatan yang terakhir menggunakan warna yang tidak terlalu kontras ditambah icon bendera.

.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}

Gimana kamu tertarik pada tampilan ke berapa? Untuk menerapkannya pada postingan kamu bisa menuliskan seperti dibawah.

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

Mungkin sekian pembahasan kali ini, jika ada yang ingin ditanyakan jangan ragu untuk menuliskannya pada kolom komentar. Baca juga artikel lainnya untuk mendapatkan informasi dan tips seputar blogging.