Home » Blog Design » Alert Info Note Tags with beautifull css Effect blogger

Alert Info Note Tags with beautifull css Effect blogger

Tags with beautifull css Effect blogger

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://lh6.googleusercontent.com/-_9-uxq4-JhA/Uve2KhO88DI/AAAAAAAAAWM/MYuMk9jUCjQ/h120/alert.png') no-repeat 12px 8px;
}
.info {
background: #EDFCD5 url('https://lh6.googleusercontent.com/-Y0QO8TVNZGk/Uve2Kl64iJI/AAAAAAAAAWY/qrxumTgt73I/h120/info.png')no-repeat 12px 8px;
}
.note {
background: #FEF6D2 url('https://lh4.googleusercontent.com/-Hm34ytrMkIU/Uve2KgS-WrI/AAAAAAAAAWQ/csaua2DnYVw/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>

Leet Blogger | Leetblogger.com – All About Bloggiing
Leet Blogger | Leetblogger.com – All About Bloggiing
Leet Blogger | Leetblogger.com – All About Bloggiing

» DO NOT FORGET TO LIKE N Yeach comments …

About Cyb3r

Check Also

22

How to Maximize Google Adsense Earnings

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

Leave a Reply

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