How to Make Awesome BLOCK QUOTES For Blogspot With Icon | Cara Membuat Blok Quotes Keren untuk Blogspot dengan Icon

Block ԛuоtе memiliki fungsi sebagai catatan khusus yang dapat dibedakan dimana suatu kalimat dengan kalimat yang lainnnya. Biasanya block qoutes digunakan untuk pembeda source code suatu bahasa pemograman atau kalimat yang meiliki arti tertentu yang menonjol dibandingkan isi artikel pada suata halaman atau page dengan tujuan pembaca dapat memperhatikan/tertuju quotes atau kalimat tersebut.

How to Install / Cara pemasangan

1. Masuk ke blog anda > pilih menu Tema > pilih Edit HTML

1. Login to your blog > Themes > Edit HTML

2. Letakkan kode CSS ini tepat berada di atas kode ]]></b:skin> atau </style>

2. Insert code before in ]]></b:skin> or </style>

This For CSS 

/* Source Code Quotes */
.info, .catatan, .peringatan, .perhatian, .koding {line-height: 22px;min-height: 38px;padding-left: 10px;padding: 10px 12px 12px 68px; margin: 5px 0;
}
.info {
 background: #cbd1d9 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgh6XwkFyM0QjFpRy3tYJxr6VcWCNcZTm5meC9lx2KzPYZ0HJdYbKIJboVZILVwGvM54Nfw3Hogz4Wp_HBXJWNjbT9XVflfLziOW2oYXrl3OGPLV6lfg-WL3br-VzxxSP7U6yxzzcFlUBo/s1600/info.png') no-repeat 12px 8px;
 color: #222
}
.catatan {
 background: #17f907 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBBcGXJQfnpH47zH3EH1KUNMarcXqsdMYi37cDYqEUwWfMatUHNeKbhc67yQmIoSUHdSfVOVq3s1dRpAww9XpS4IwRJjJjToMmN5lVMX6uQFbzohHnUvdQVAjfBaHVhaYuQWLo3hzqnKI/s1600/catatan.png') no-repeat 12px 8px;
 color: #fff;
}
.peringatan {
 background: #df8787 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSmLN7Sf_hoPPJQ5HciB93dWgnZzOYftx2JR-Arcq0YwHNuqzVOTKUN9AzoztkrCOj6TIGUR3bG2llmnMTgy48KsOr27ey-oMXUPopRA3UYINNNB5mW5WCAOmu-2LC_XjNAjIumHGx8NA/s1600/peringatan.png') no-repeat 12px 8px;
 color: #fff;
}
.perhatian {
 background: #f6ff00 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAokaJDdEw-mm8Z3hUadxryRfp2vfDTvJ3nW8qGbaHWXlhs87aJagCnk06FWRDZ2TCEiDBW2SlE0kqwc0VFbB1bOuPp9EoSeqhMjaekz7rmGa6WNaO9CI6o-2oDN0-9yYr935vsvlT69_N/s1600/5a81af7d9123fa7bcc9b0793.png') no-repeat 12px 12px;
 color: #000;
}
.koding {
 background: #d800ff url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIHSo2RASKeY-ePqxi3ApdB_M24VFKYRt_g738c-Ghk-X-msZANk26MFZhVfzR2wISnkhJgm-A0hHRg8SVL0Wz0qLUEnUfz3pBR6EooYg3prtXmvcIATqJ5oI5dMB_w5Amv6RpKutGy8Ir/s1600/sc.png') no-repeat 12px 12px;
 color: #000;
}

/* END Source Code Quotes */

3. Masukan kode HTML pada Postigan pada tab HTML

 3. INsert code HTML in New Post on tab HTML

This For HTML

<div class='info'>
  This Quotes For Information on Blogspot
</div>
<br/>
<div class='catatan'>
  This Quotes For note/file on Blogspot
</div>
<br/>
<div class='peringatan'>
  This Quotes For Danger on Blogspot
</div>
<br/>
<div class='perhatian'>
  This Quotes For Warning on Blogspot
</div>
<br/>
<br/>
<div class='koding'>
  This Quotes For Warning on Blogspot
</div>
<br/>

Double click for Copy to new tab for demo

https://nekopoey.blogspot.com/2019/04/what-is-health-insurance.html?u=U2FsdGVkX19wNwUk%2BBcmF76NIx3PL2CBSoDrIVBWlU7YG2vBi8JelDOv0jZs23dhQZLeZl%2BiwGlnrqHcGvrBv%2B%2BtqHEDsO9wCatKAlZfAvqFDgCWuAYXHn4QTmatPk5w