Alert Info Note Tags with beautifull css Effect blogger

«Prev Next»

In my previous Post i show to how to add tips warning notes tags, now i posting Alert Info Note Tags in css with beautifull effect, i like it too much, so i thought why not share all of you, its very simple and easy you can add in you blogger. These Tags makes cool and attractive you post.

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

/*-----alert, info, note by www.leetblogger.com----*/
.alert, .info, .note {
margin: 10px 0px; padding: 9px 10px 9px 40px; border-width: 1px 0px; 
border-top-style: solid; border-bottom-style: solid; border-top-color: rgb(240, 186, 162); 
border-bottom-color: rgb(240, 186, 162); outline: 0px; font-size: 14px; 
vertical-align: baseline;
line-height: 22px; 
background-position: 12px 13px; 
background-repeat: no-repeat no-repeat;
}

.alert {
background: #FFD9C8  url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2Rz7CXu2Xv5Y1jouScrcWDn1xtBJlpSsHuMQIW51f7KAConG6ZklTztZSwRxTiE8NJ-vu3iPOBjZUyFJEW2c5CDS6SfX5ZIddyXZVswFoMYQl8x8n5BhFsN4ocs_HdBCOeaoeH3ATzIA/h120/alert.png') no-repeat 12px 8px;
}
.info {
 background: #EDFCD5 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpSY6p4mw6R853wyeuYkyOMgrrmKTuolqltU-IYg32RviQwYRzuhe06b3kW0rg4kKj3dVykIL9exQiUfXPlExqpGqPNjKnO18M9MIwRkZnhnTNZstb4tr8Ugsk0v9xsmcUqlmh1B_rdMY/h120/info.png')no-repeat 12px 8px;
}
.note {
background: #FEF6D2 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSibolUN1XzG3AIbgk4mm88tLApzlUwHqJjBS9mgojmpp_sIFx1r0HiWsVTcRsN0kM0fVgtcWxFSUVXgWXozxR6vHJpi8IoNZg-kesiUkgPEXR2vKVH9AA-joIHGpTqUnFAlazN0SgZmY/h120/note.png') no-repeat 12px 8px;
}

If you want to include in the post, just choose which one to use blocks. (Write the code in HTML mode).

• Save Template

For alert use code like this one:

<div class='alert'>
Leet Blogger | Leetblogger.com - All About Bloggiing
</div>

For info:

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

For Note:

<div class='note'>
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 ...

«Prev Next»