Cara Membuat Note Box Berwarna dengan Border di Blogger - Sebenarnya analisyuki.com sudah sering menunjukkan banyak sekali macam css perihal cara menciptakan kotak catatan keren untuk postingan blogger, namun di kesempatan kali ini aku membuatnya dengan variasi border di sebelah kirinya.
Sebenarnya banyak dari para blogger yang sudah membagikan cara menciptakan 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, alasannya ialah kemungkinan besar masih sedikit yang mempublikasikan note box dengan efek border ini, maka aku akan membagikannya untuk kalian.
Sebelum kita memulai pada tutorial, note box ini dengan efek border ini aku membuatnya dengan 3 variasi warna yang berbeda yaitu biru, hijau dan merah, jadi sanggup kalian gunakan untuk menciptakan catatan pemberitahuan, peringatan atau sebagai link baca juga menyerupai yang aku gunakan kini ini.
Cara Membuat Note Box Berwarna dengan Border di Blogger
1. Buka Blogger kalian > Pilih Tema > Kemudian Edit HTML 2. Letakkan instruksi di bawah ini, sempurna diatas atau sebelum instruksi ]]></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 sanggup mengubah instruksi warna yang aku tandai biru dengan warna kesukaan kalian sendiri.
3. Untuk menerapkannya di dalam postingan blog, Buat Postingan Baru > lalu letakkan instruksi 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 goresan pena yang kalian inginkan
Itulah tadi cara menciptakan membuat note box keren untuk postingan blog kalian. Semoga tutorial dari analisyuki.com ini sanggup membantu kalian, Terimakasih.
Sumber http://www.analisyuki.com/
