ADDING BLOCK NOTES, TIPS AND CAUTIONS IN BLOG

Adding Block Notes, Tips and Warning - While waiting for a sense of drowsiness came, this time I will share how to make records, information, tips, or reminders on the blog, so the blog more stylish and stand visitors linger on our blog. truth to friends have advanced CSS and HTML will not be strange again with a tutorial like this. But even well-versed in CSS and HTML sometimes deadlocked idea to brush up on his blog to be more interesting. before I love CSS and HTM.

 please see the first appearance of the block notes, tips and warnings demo below:

MyBLoggerSKill IS and ONline BLogger Resource SInce 2013

MyBLoggerSKill IS and ONline BLogger Resource SInce 2013

MyBLoggerSKill IS and ONline BLogger Resource SInce 2013

To install it, please keep your codes before is on ]]> </ b: skin>

p.info, div.info,

p.tips, div.tips,

p.warning, div.warning {

 line-height: 22px;

 min-height: 38px;

 padding: 10px 12px 12px 68px;

 margin: 5px 0;

}

p.info, div.info {

 background: #e0e5eb url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtZUZLvbX7HTl6A9ODpY4ETntMSgQ4SEx7C5kqr2txbHMMi6GSyNAIgGQfeCa5f0qmnQJzNWFXdrMoNEIGymcMlKsVlKbu1wLGgsTEWMtaTuQNI5aAfbLNB-8lKYHcGEtAdNEOHRdJ58E/s1600/info.png') no-repeat 12px 8px;

 color: #222

}

p.tips, div.tips {

 background: #7CADDE url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjorzEcWwqYUPC2miKOMugujxp3nKMZXIF9QV4KrTX6ddbqBOcmp9BPCMoK4f_tdMHVR9Iy71as5FV7qF4D_9ReHnhA4hlB4K0N2D3WfOrOUJ9fI2ejlLf6ZjiCMj-C7PTWx0x6HkSKhtQ/s1600/tips.png') no-repeat 12px 8px;

 color: #fff;

}

p.warning, div.warning {

 background: #db6161 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7-kRyvCf_hZTs2o6xd6mHPENH43GYZSTDfPkzVyHjrV8hFRLSbK1rC-ifc9CoBH7m2IBxrNm9WkypxytF_eHqHG56rGsRMlkn8Yw7g7OUSj_WcwUISfeRVZA-6X-HsKTVe883LY9AWVM/s1600/warning.png') no-repeat 12px 8px;

 color: #fff;

}

Furthermore, when want to insert into the postings, man lived choose which blocks to be used. (Write code in HTML mode). For Info (notes) pal seperi use this code:

<div class='info'>

Lorem ipsum dolor sit AMET, consectetur adipiscing elite. Vestibulum venenatis orc no accumsan at accumsan tortor tortor congue.

</div>

for tips, code like this:

<div class='tips'>

Lorem ipsum dolor sit AMET, consectetur adipiscing elite. Vestibulum venenatis orc no accumsan at accumsan tortor tortor congue.

</div>

For remainder and warning like this-

<div class='warning'>

Lorem ipsum dolor sit AMET, consectetur adipiscing elite. Vestibulum venenatis orc no accumsan at accumsan tortor tortor congue.

</div>

Buddy can also use tag p in writing HTML code, for example:

<p class='info'>
Lorem ipsum dolor sit AMET, consectetur adipiscing elite. Vestibulum venenatis orc no accumsan at accumsan tortor tortor congue.
</p>