Add Yellow And Red Warning Box CSS Style

Today I Designed Two Beautiful Red And Yellow Warning Boxes With The Use Of CSS. You Can Use This Codes To Display Warning Message Before Comments On Your Blog. 

So That User Not Left SPAM Comments And Saves Moderation Time. You Can Also Add This Code For Many Other Reasons.

1. Login To Blogger Account.
2. Click Blog Title → Template → Edit HTML.
3. Click Proceed Button.
4. Search For The Following Code Using Ctrl+F.

]]></b:skin>

   5.Add Any Of The Following Code Before Above Code.

Code For Red Box

#ErrorRed{ margin-left: 55px; background-image: url(http://lh3.googleusercontent.com/-SCexRoopeJw/UFsfPWIOXYI/AAAAAAAABPg/D4_aPGnQysI/s32/RedWarning.png); border: 1px solid #FF0F0F; background-color: #FFDEDE; border-radius:3px; font-size:15px; background-repeat:no-repeat; padding-left:40px; border-radius:9px; min-height:32px; width:auto; background-position:3px; margin:10px; padding-top:5px; color:#222; }

Code For Yellow Box

#ErrorYellow{ margin-left: 55px; background-image: url(http://lh6.googleusercontent.com/-STlIUwa6Dkg/UFsfPdrxhJI/AAAAAAAABPc/XNigxZmpvdE/s32/YellowWarning.png); border: 1px solid #FFCF0F; background-color: #FFFFDE; border-radius:3px; font-size:15px; background-repeat:no-repeat; padding-left:40px; border-radius:9px; min-height:32px; width:auto; background-position:3px; margin:10px; padding-top:5px; color:#222; }

6. Save Your Template.
7. Now In Post Or Template Where You Want To Display Text In Box

<div id="ErrorRed"> Text To Display In Red Box </div>
<div id="ErrorYellow"> Text To Display In Yellow Box </div>
Share Your Views 

Categories: css , Javascript , seo