Cara Membuat Note Keren Di Blog Dengan CSS - Valezsky

Mempercantik tampilan blog merupakan hal yang penting, pengunjung akan merasa nyaman ketika melihat blog yang cantik dan rapi. Salah satu cara untuk mempercantik blog adalah dengan menambahkan kotak catatan berwarna yang keren.

Sebenarnya blogger telah membuatkan tool bernama blockquote yang fungsinya untuk menandai poin-point penting, namun jika hanya mengandalkan blockquote saja sangatlah tidak menarik bagi pengunjung.

Maka dari itu, kita akan membahas cara membuat kotak catatan/note box yang indah, selain itu note box yang akan kita buat juga memiliki beberapa varian warna serta ada yang memiliki icon yang keren sampai yanh sederhana.

Kotak catatan/note box ini selain memperindah tampilan blog, juga memiliki fungsi agar pengunjung tidak melewatkan poin-poin penting yang kita sampaikan.

Cara Membuat Kotak Catatan di Blogger

1. Masuk ke dashboard blog, kemudian pergi ke menu Tema
2. Pilih Edit HTML
3. Letakkan salah satu kode dibawah ini, tepat berada diatas kode ]]></b:skin> atau </style>

Style 1

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Code:

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

Style 2

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Code:

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

Style 3

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Code:

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

Style 4

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Code:

.notes{
    padding: 16px 24px;
    border-radius: 4px;
    display: block;
    font-size: 14px;
    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;
  }

Style 5

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Code:

.notes{
    padding: 15px;
    border-radius: 10px;
    background: #e3d4fa;
  }

Style 6

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Code:

.notes {
    box-shadow: -4px 4px 2px rgba(0,0,0,0.8);
    padding: 19px;
    border: 1px solid black;

Anda dapat memasang lebih dari satu, tetapi pastikan untuk mengubah class .notes agar tidak terjadi error.
Contoh: Jika anda telah memasang style no 5, dan ingin menggunakan style no 6 juga, anda bisa bebas mengubah class nya seperti contoh dibawah:

Sekarang kita telah berhasil membuat kotak catatan di blog, dan sekarang adalah cara untuk menggunakan kotak catatan tersebut di postingan blog.

Baca Juga: Cara Membuat Halaman Partner Keren di Blogger

Cara Menggunakan Kotak Catatan Berwarna di Blogger

1. Masuk ke dashboard blog, kemudian pergi ke menu Postingan
2. Pilih postingan baru
3. Pilih Tampilan HTML, bukan Tampilan Menulis/Compose
4. Letakkan kode berikut ini:

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

---

Demikianlah postingan mengenai Cara Membuat Note Keren Di Blog Dengan CSS, semoga dapat membantu, akhir kata saya ucapkan Terima Kasih.