Today i am going to share an stylish blogging code box which i also use with more customization.
Let's get to the point. Actually many blogger wants to show code and their abilities you can show yours too.
If you wants to add in a stylish way then it need to customize. To do this just follow the following instructions.
1. From Dashboard go Design >> Edit HTML
2. Press Ctrl+F and find this code.
3. Now, just before the above code paste the following codes.
4. Save your change. Now, for every time when you wants to add HTML codes into your post, just put HTML codes between <div class="codeview"> and </div>
Example:
Red text indicate HTML codes. That’s it. I hope you will enjoy this customization.
Let's get to the point. Actually many blogger wants to show code and their abilities you can show yours too.
If you wants to add in a stylish way then it need to customize. To do this just follow the following instructions.
1. From Dashboard go Design >> Edit HTML
2. Press Ctrl+F and find this code.
]]></b:skin>
3. Now, just before the above code paste the following codes.
.codeview {
margin : 15px 35px 15px 15px;
padding : 10px;
clear : both;
list-style-type : none;
background : #f9f9f9
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 : #FFFFFF;
font-weight : normal;
margin : 0;
padding : 0;
}
4. Save your change. Now, for every time when you wants to add HTML codes into your post, just put HTML codes between <div class="codeview"> and </div>
Example:
<div class="codeview"> ]]></b:skin> </div>
Red text indicate HTML codes. That’s it. I hope you will enjoy this customization.
0 comments:
Post a Comment