Home » Blogger Tips » How to Make a Block Notes, Tips and Warnings in Blog

How to Make a Block Notes, Tips and Warnings in Blog

How to make a block notes, tips and warnings in the Blog are typically used by blogs critical. Even so I still will share how despite not really matter.
Actually, for my friend who have advanced CSS and HTML will not be strange with this tutorial as even people who have advanced CSS and HTML might make more cool than I have shared this.

  • Login ke Blogger
  • Dashboard » Template » Edit HTML
  • Put the following code just above the code: ]]></b:skin> or </style>

.info, .tips, .warning {
 line-height: 22px;
 min-height: 38px;
 padding: 10px 12px 12px 68px;
 margin: 5px 0;
}
.info {
 background: #e0e5eb url(‘http://3.bp.blogspot.com/-7P1ahhe0SRc/Uu6n0AuM8iI/AAAAAAAAAQw/6yxTRdz5AZE/s1600/info.png’) no-repeat 12px 8px;
 color: #222
}
.tips {
 background: #7CADDE url(‘http://3.bp.blogspot.com/-nWsEGnV4O84/Uu6n0sc1BWI/AAAAAAAAARA/GaA50S5FiWA/s1600/tips.png’) no-repeat 12px 8px;
 color: #fff;
}
.warning {
 background: #db6161 url(‘http://1.bp.blogspot.com/-U_liqHh-Vq4/Uu6n0IohvoI/AAAAAAAAAQ0/ewHPZcvAm3Q/s1600/warning.png’) no-repeat 12px 8px;
 color: #fff;
}

  • Save Template. 
Furthermore, if you want to include in the post, my friend just choose which one to use blocks. (Write the code in HTML mode). 
For info use code like this one:

<div class=’info’>
Leet Blogger | Leetblogger.com – All About Bloggiing
</div>

For Tips, code like this:

<div class=’tips’>
Leet Blogger | Leetblogger.com – All About Bloggiing
</div>

To Alert or Warning:

<div class=’warning’>
Leet Blogger | Leetblogger.com – All About Bloggiing
</div>

You can also use the tag p in the writing of the HTML code, for example:

<p class=’info’>
Leet Blogger | Leetblogger.com – All About Bloggiing
</p>

» DO NOT FORGET TO LIKE N Yeach comments …

About Cyb3r

Check Also

How to Maximize Google Adsense Earnings

Inserting Adsense code and then leave it alone probably will continue to provide earnings for …

One comment

Leave a Reply

Your email address will not be published. Required fields are marked *