CSS Styled Text Box

This is cool css styled text box for blogger. This text is for notice,note,etc. You can also use if for displaying script. This box has hover and active text effects. In normal mode it is white in color and in hover mode it turns blue. In active mode it turns to green color. So have it in your blog.

Steps To Add This Text Box

• Go to Dashboard.
• Go to Templates >> Edit html.
• Find for ]]></b:skin> tag.
• Paste the below code there.

.postmsgg23
{
color: black;
background-color: white;
width: 400px;
margin: 5px 60px;
padding: 20px 20px 20px 20px;
border: 2px dotted lightgrey;
border-radius: 10px;
box-shadow: -1px -1px 12px 2px gainsboro;
transition: background-color .777s;
-webkit-transition: background-color .777s;
-moz-transition: background-color .777s;
-o-transition: background-color .777s;
-ms-transition: background-color .777s;
}
.postmsgg23:hover
{color: white;
background-color: CornflowerBlue ;
}
.postmsgg23:active
{
background-color: darkgreen ;
}

• Now click on Save the Template.
• Write a new post.
• Paste the below code where you want the text box to appear.

<div class="postmsgg23" style="font-family: &quot;Courier New&quot;,Courier,monospace;">Yout Text Here</div>
</div>

• Now, click on Publish.

It's Done.

Categories: Blogger Tricks , CSS