Step:1
সর্বপ্রথমে নিচের Code টি Copy করুন । AndThan Edit HTML এ গিয়ে <head> এর নিচে নিচের Copy করা Code টি Past করুন ।
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"></link>
Step:2
এরপর নিচের CSS Code টি Copy করুন এবং Edit HTML এ গিয়ে ]]></b:skin>এর উপর নিচের Copy করা CSS Code টি Past করুন ।
.notes{position:relative;border-radius:4px;display:block;font-size:14px;margin:16px 0;padding:12px 24px 12px 60px} .notes:before{float:left;font-size:30px; font-family:FontAwesome;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;word-wrap:normal;margin-left:-46px;margin-top:3px}
.notes1:before{color:#21a796;content:'\f087';} .notes1{background:#cfffe6;color:#565656}
.notes2:before{color:#f95060;content:'\f088';} .notes2{background:#f9bfc5;color:#565656}
.notes3:before{color:#2387c1;content:'\f06a';} .notes3{background:#c8d9e2;color:#565656}
.notes4:before{color:#1aa687;content:'\f00c';} .notes4{background:#6dedd0;color:#565656}
.notes5:before{color:#f63a50;content:'\f00d';} .notes5{background:#fb818f;color:#fff}
.notes6:before{color:#f7871a;content:'\f10d';} .notes6{background:#f5b474;color:#fff}
.notes7:before{color:#969696;content:'\f0c1';} .notes7{background:#f5f68e;color:#565656}
.notes1:hover:before,.notes2:hover:before,.notes3:hover:before,.notes4:hover:before,.notes5:hover:before,.notes6:hover:before,.notes7:hover:before,.notes8:hover:before,.notes9:hover:before,.notes10:hover:before{-webkit-animation:ripple 0.65s linear;-moz-animation:ripple 0.65s linear;-ms-animation:ripple 0.65s linear;-o-animation:ripple 0.65s linear;animation:ripple 0.65s linear}@keyframes ripple{100%{opacity:0;transform:scale(2.5)}}
ব্যাস ,আপনার কাজ শেষ । এখন আপনি নিচের HTML Code গুলি আপনার Blog Post এ Use করুন ।
Note Box Version 1.
<div class="notes notes1">Note Box Version 1.</div>
Note Box Version 2.
<div class="notes notes2">Note Box Version 2.</div>
Note Box Version 3.
<div class="notes notes3">Note Box Version 3.</div>
Note Box Version 4.
<div class="notes notes4">Note Box Version 4.</div>
Note Box Version 5.
<div class="notes notes5">Note Box Version 5.</div>
Note Box Version 6.
<div class="notes notes6">Note Box Version 6.</div>
Note Box Version 7.
<div class="notes notes7">Note Box Version 7.</div>