Still meet again with my admin Godscoin, who certainly always accompany with the latest articles, trusted, and unique. I will today give a tutorial on "How to make Info Block Box, cool Tips" yaps, for those who already can not wait to see the following tutorial:
Observe and understand step by step;
1. Please login to blogger first buddy> Template Menu> Edit HTML
2. Press CTRL + F> find this code ]]> </ b: skin> or </ style>
** Put the CSS code below just above the code ]]> </ b: skin> or </ style>
3. If the CSS code is already installed, now go to Step three to install the Div code from Info, Tips and Warnings in our article.
** Code block Info box, please copy paste the code below in your HTML Mode article;
<div class = "info">
This is a block containing info / notes, please write here any word </ div>
** Code block block Tips, please copy paste the code below in your HTML Mode article;
Observe and understand step by step;
1. Please login to blogger first buddy> Template Menu> Edit HTML
2. Press CTRL + F> find this code ]]> </ b: skin> or </ style>
** Put the CSS code below just above the code ]]> </ b: skin> or </ style>
.info, .tips, .warning {
line-height: 22px;
min-height: 38px;
padding-left: 10px;
padding: 10px 12px 12px 68px;
margin: 5px 0;
}
.info {
background: #e0e5eb url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvf_02vr9673tiHzWgGz33ONXDZo1JETucQKPu2rMHugoxhG69BiKzLL-3QeK9-5uSm8d9mJjZSLO-9_j1CnElsW-WY27ntyDAsTHByK3dM0kZQjH_fJZGns3YoyqVr9060P41RMyS72E/s1600/info.png') no-repeat 12px 8px;
color: #222
}
.tips {
background: #7CADDE url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKDk0sB98FnrSVlii9vbYHbH2PN7IMuymLyI4r9KtLMJDl8_VCBAKmS4IEi6ox0HT-8zL4hR878KiRzPOb9x28iTPpySwpXY0K1wknliX_KX2GC_jbEIqBgdTiAkm8Y2daPaDUEASIyU4/s1600/tips.png') no-repeat 12px 8px;
color: #fff;
}
.warning {
background: #db6161 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQtBA2bZWwvj9UfOht1pSnBBBip1r88VuaO3g2wXj0GwdDD2cAZWBY1fSvHv2RA1Ipro7RoocRmwttUOADkGogeibuKJVoyuVgkBxveQF7IA1zgFV8ZNwNhFXLPbjbPPqCxfjvbAGF30g/s1600/warning.png') no-repeat 12px 8px;
color: #fff;
}
3. If the CSS code is already installed, now go to Step three to install the Div code from Info, Tips and Warnings in our article.
** Code block Info box, please copy paste the code below in your HTML Mode article;
This is a block containing info / notes, please write here any word </ div>
** Code block block Tips, please copy paste the code below in your HTML Mode article;
<div class="tips">
This is a block containing Tips, please write here any word
</div> ** Code block block Tips, please copy paste the code below in your HTML Mode article; 
<div class = "warning">
This is a block containing warning / ban, please write here any word
</ div>
Actually we can install block code tips, info and warning using <DIV> but with tag <P> also can. basically we just change the code <DIV class> to <P class>.
See sample code below;
<p class = "tips">
This is a block containing Tips, please write here any word
</ p>
And last try check on your blog article ,, cool it looks? if you are satisfied with the tutorial please express directly in the comment box.
Probably enough for today's meeting, if my friend finds it difficult to do this tutorial, please ask Ke Mas Yoga directly ,,
If there is a mistake or similarity in the writing of the word please forgive ,,,
See you and wait for the next update, and bye-bye.
