How to use dokuwiki note plugin with blogger ?

This is not exactly porting of docuwiki plugin to blogger, however bare metal approach which works neatly.

I love minimalist approach. If you have observed this blog, it has undergone various iteration to get into my type of theme. Fundamentally i'm inspired from the typeset and the black white dual tone from the research publications. It is so simple and lovely while conveying excellent ideas. Today i'm sharing how to setup blogger to have following note styles. I'm taking the inspiration from dokuwiki note plugin. 

Below are the 4 types of pretty note types.

This is a sample of note important.

This is a sample of note warning.

This is a sample of note tip.

This is a sample of note classic.

Copy the entire CSS into Template > > Edit HTML

/* end plugin:configmanager */
.noteclassic, .noteimportant, .notewarning, .notetip {
  margin: 2em;
  margin-left: auto;
  margin-right: auto;
  width: 70% !important;
  min-height: 40px;
  clear: both;
  text-align: justify;
  vertical-align: middle;
  border-collapse: collapse;
  padding: 15px 20px 15px 80px;
  background-position: 20px 50%;
  background-repeat: no-repeat;
  -moz-border-radius: 20px;
  -khtml-border-radius: 20px;
  border-radius: 20px;
}
 
.noteclassic {
  /*border: 1px solid #99D;*/
  background-color: #eef;
  background-image: url(https://github.com/alkber/dokuwiki_note/blob/master/images/note.png?raw=true);
}
 
.noteimportant {
  /*border: 1px solid #ff0;*/
  background-color: #ffc;
  background-image: url(https://github.com/alkber/dokuwiki_note/blob/master/images/important.png?raw=true);
}
 
.notewarning {
  /*border: 1px solid #d99;*/
  background-color: #fdd;
  background-image: url(https://github.com/alkber/dokuwiki_note/blob/master/images/warning.png?raw=true);
}
 
.notetip {
  /*border: 1px solid #9d9;*/
  background-color: #dfd;
  background-image: url(https://github.com/alkber/dokuwiki_note/blob/master/images/tip.png?raw=true);
}

To use, when you are composing your blog post choose the HTML mode. Say you want to highlight something with a notetip type.

<div class="notetip">
This is a sample of note tip.
</div>