As you can see, almost all web blog have Note Box to give warning, Information, or another note. My blog use it too, you can see on all of my blog post about this blog note.
Then lets start the tutorial.
How to Make Note Box Skin With Border in Blog Post
Before we start in the tutorial, this note box with border effects, I made it with 3 different color variations, namely blue, green and red, so you can use to make notice notes, warnings or as a link to read as well as I use now.
Step by step how to apply to your blog
1. Open Dashboard Blogger > Choose Theme > Edit HTML
2. Put this code bellow before tag html ]]></b:skin> or <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}
Note : You can change the value of HTML Color.
3. Click Save Theme
Step how to apply Note Box in Your Post
This is how to apply it, first you must make sure you are in mode HTML not Compose.Note Box Blue
<div class="bluebox">Your-Text</div>
Note Box Green
<div class="greenbox">Your-Text</div>
Note Box Red
<div class="redbox">TEKS-ANDA</div>
Conclusion
So that is the tutorial how to make note box skin in your blog post. I hope you can understand this article.
If you have Question just ask and leave comment bellow.
Thank You.
