In this post i have given you some containers for your post to display CSS code, Scripts and important notes in unique way.This helps visitor’s to distinguish between your explaination and codes or scripts.
Container 1
How to implement it ..
Step 1. Paste the following CSS code right above ]]></b:skin>
textarea.codecontainer{
border: 1px dashed gray;
width: 98%;
height: 150px;
background-color: #EFEFEF;
margin-top: 1em;
clear: left;
padding-left: 5px;
}
Step 2. Whenever you create new posts just include the speical Script ( CSS code , Scripts , etc ) within this section .
<textarea class=”codecontainer” rows=”10″ cols=”70″>
Put your code , script , or text
</textarea>
Container 2
How to implement it ..
Step 1. Paste the following CSS code right above ]]></b:skin>
.curlycontainer{
border: 1px solid #b8b8b8;
margin-bottom: 1em;
width: 300px;
}
.curlycontainer .innerdiv{
background: transparent url(http://s421.photobucket.com/albums/pp296/rnbutpur/th_brcorner.gif) bottom right no-repeat;
position: relative;
left: 2px;
top: 2px;
padding: 1px 4px 15px 5px;
}
Step 2. Whenever you create new posts just include the speical Script ( CSS code , Scripts , etc ) within this section .
<div class=”curlycontainer”>
<div class=”innerdiv”>
Put your code , script , or text
</div>
</div>
Container 3
How to implement it ..
Step 1. Paste the following CSS code right above ]]></b:skin>
.codeview {
margin : 15px 35px 15px 15px;
padding : 10px;
clear : both;
list-style-type : none;
background : #f9f9f9 url(http://s421.photobucket.com/albums/pp296/rnbutpur/th_codeview.gif) no-repeat right bottom;
border-top : 1px solid #eeeeee;
border-right : 2px solid #cccccc;
border-bottom : 2px solid #cccccc;
border-left : 1px solid #eeeeee;
}
.codeview li {
font-size : 13px;
line-height : 24px;
font-family : “Courier New”, “MS Sans Serif”, sans-serif, serif;
color : #333333;
font-weight : normal;
margin : 0;
padding : 0;
}
Step 2. Whenever you create new posts just include the speical Script ( CSS code , Scripts , etc ) within this section .
<div class=”codeview”>
Put your code , script , or text
</div>
