Skip to main content

Cara Membuat Note Box Berwarna dengan Border di Blogger

Cara Membuat Note Box Berwarna dengan Border 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 kalian > Pilih Tema > Kemudian Edit HTML 2. Letakkan kode di bawah ini, tepat diatas atau sebelum 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}

*Catatan: Kalian bisa mengubah kode warna yang saya tandai biru dengan warna kesukaan kalian sendiri.

3. Untuk menerapkannya di dalam postingan blog, Buat Postingan Baru > kemudian letakkan kode ini pada mode 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.

Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar
Tutup Komentar