Cara Membuat Note Box Keren di Blogger

Cara Membuat Note Box Berwarna dengan Border di Blogger – Sebenarnya analisyuki.com sudah sering memberikan berbagai macam css tentang cara membuat kotak catatan keren untuk postingan blogger, namun di kesempatan kali ini saya membuatnya dengan variasi border di sebelah kirinya.

Sebenarnya banyak dari para blogger yang sudah membagikan cara membuat kotak catatan (note box) dengan variasi warna yang berbeda pada postingan blog, mulai dari kotak catatan dengan icon, efek lipat dan yang paling sederhana.

Pasti dari kalian pernah melihat note box dengan border atau garis warna yang berbeda di sebelah kirinya. Nah, karena kemungkinan besar masih sedikit yang mempublikasikan note box dengan efek border ini, maka saya akan membagikannya untuk kalian.

Sebelum kita memulai pada tutorial, note box ini dengan efek border ini saya membuatnya dengan 3 variasi warna yang berbeda yaitu biru, hijau dan merah, jadi bisa kalian gunakan untuk membuat catatan pemberitahuan, peringatan atau sebagai link baca juga seperti yang saya gunakan sekarang ini.

Cara Membuat Note Box Berwarna dengan Border di Blogger

  1. Buka blogger
  2. Pilih menu Tema
  3. Pada menu SESUAIKAN, pilih Edit HTML
  4. Masukkan kode ini tepat berada diatas kode ]]></b:skin> atau </style>
    /* Note Box Border Color */
    .bluebox {padding:10px;font-size:14px;line-height:1.5;background: rgba(186, 208, 228, .37);border-radius:4px;border-left:4px solid;color: #3b5998;border-color:#3b5998}
    .greenbox {padding:10px;font-size:14px;line-height:1.5;background: rgba(198, 226, 204, .37);border-radius:4px;border-left:4px solid;color: #48b074;border-color:#48b074}
    .redbox {padding:10px;font-size:14px;line-height:1.5;background: rgba(244, 215, 201, .37);border-radius:4px;border-left:4px solid;color: #e0473d;border-color:#e0473d}
  5. Untuk menerapkannya di dalam postingan blog, Buat Postingan Baru, kemudian letakkan kode ini pada Tampilan HTML

Note Box Biru:

<div class="bluebox">TEKS-ANDA</div>

Note Box Hijau:

<div class="greenbox">TEKS-ANDA</div>

Note Box Merah:

<div class="redbox">TEKS-ANDA</div>

*Catatan: Udah TEKS-ANDA dengan tulisan yang kalian inginkan

Itulah tadi cara membuat membuat note box keren untuk postingan blog kalian. Semoga tutorial dari analisyuki.com ini dapat membantu kalian, Terimakasih.

Tinggalkan komentar