Code Box with CSS Hover and Text Effects for Blogger

Today i am another Code Box with CSS Hover and Text Effects for Blogger,Before i begin this post let me tell you about CSS text box. It's a box which you can use for highlight your text message,important notes and HTML/JavaScript or CSS code etc.

LIVE DEMO

your text message,important notes and HTML/JavaScript or CSS code etc

Follow steps to add this code box

• Go to Blogger Dashboard >>Template
• Tick Expand Widget Templates
• Press Ctrl + F and search the code ]]></b:skin>
• Now add the below code just Above/Before ]]></b:skin> and Save the Template

.postmsgg23
{
color: black;
background-color: white;
width: 640px;
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 the main work of template optimization finished.Just put Follwing Codes in Your Posts as HTML Where and Need

<div class="code">
enter your text or code here.This will be represented in Automated box after you publish your post
</div>

Tutorial Finished if any Problem or Question then Comment below .:)