CSS Warning Box With Hover Effect

Views

This CSS warning box can be used anytime you want to add a warning message or a note in your blog post & even in your blogger pages. This is my simple and humble creation for the day. This CSS warning box has a border shadow effect just for adding a little twist when someone hovers on your warning box. The installation of this CSS box is very easy. There are two ways of installing this on blogger, you can go to your  Template section and Edit HTML or you can Choose Customize right beside the Edit HTML tab. If your not really into technically knowledgeable about editing your HTML go to Customize Tab. Click Advance then you will see a box named Add CSS, You can add any CSS code in that box without getting too much headache Editing your HTML.

LIVE DEMO

"SAMPLE TEXT SAMPLE TEXT SAMPLE TEXT SAMPLE TEXT SAMPLE TEXT"

ADDING CSS WARNING BOX ON BLOGGER

• Go to your Blogger Dashboard
• Layout
• Edit html
• Proceed
• Click “Expand Widget Template”
• Press CTRL+F for search Shortcut
• And find this piece of a code

]]></b:skin>

• Just Above/Before that, Paste the CSS Warning Box code

#warning
{
border:5px solid #BF9347;
padding:10px 10px 10px 70px;
background:#F3F5C1 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitZviYrzBHqX4Z8C5MVPhQXV5DMO0kG6oVQBiz71-E1rMujWF9_9oNwqQHvV99Kimo9LsalCLmOmiUKFfdCwx66YqAf_OL8C28xzcbAsNA6moZkneFriai2bC50Pjb8jhYcJiNiSgFDgY/s1600/Alert.png);
background-position:left;
background-repeat:no-repeat;
width:600px;
text-align:justify;
color:#000000;
word-wrap:break-word;
font-style:bold;
font-size:16px;
font-weight: bolder;
font-family: Helvetica, Arial, sans-serif;
border-radius:20px;
-moz-border-radius:25px; /* Firefox 3.6 and earlier */
}
#warning:hover
{
-moz-box-shadow: 5px 5px 45px #B8D5E3; /* Firefox 3.6 and earlier */
box-shadow: 5px 5px 45px #B8D5E3;
}

CUSTOMIZATION FOR CSS WARNING BOX

• Change #BF9347 for Border color,
• Adjust 5px depends on how thick or thin you want your border,
• Change https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitZviYrzBHqX4Z8C5MVPhQXV5DMO0kG6oVQBiz71-E1rMujWF9_9oNwqQHvV99Kimo9LsalCLmOmiUKFfdCwx66YqAf_OL8C28xzcbAsNA6moZkneFriai2bC50Pjb8jhYcJiNiSgFDgY/s1600/Alert.png for your desired image,
• Change 600px for your Warning Box Width,
• Change #000000 for your text color,
• Change 16px for your Font size,
• And increase border-radius:20px if you want to make your box more rounded,

APPLYING THE CSS WARNING BOX ON YOUR BLOG POST & PAGES

<div id=’warning’>TYPE YOUR MESSAGE HERE</div>

YOU CAN SAVE YOUR TEMPLATE NOW

And see it working perfectly on your blog

ARE YOU CONFUSED REGARDING THIS TUTORIAL?

If you have any difficulties implementing and/or following this tutorial, Feel free to keep in touch with me and ill try my best to work it out.