12.How to add Professional Code Box to your blogProfessional Code Box-is a box that automatically generates when blogger want to show some HTML codes in his posts during explanation of some Examples or Demo works. After adding this feature Blogger doesn't need to create Table or use code <textarea style="text-align: center;"rows="9" cols="43">
your content here
</textarea>
Every time when he want to represent the code.
Uses:-
you DON'T need to define table every time, when you want to display some code in your text. It automatically takes the width and length required to display your "Text/Code" .
Draw Back:-
If your code is very lengthy then it will create along table/form that takes a large space in your posts.
(Before doing any modifications to your blog please back up your present template
Log in to your blogger account-aClick on "lay out" of the blog you want to do modifications-Edit HTML-Ctrl+A-Ctrl+C-Ctrl+V to notepad.)
Step1:-
Click "Ctrl+F" search for ]]></b:skin>
Immediately before this line add the following code
.code {color: #006AB0; border : 1px solid #DADADA;padding : 5px 5px;font-family : Consolas, "Courier New", Courier, mono, serif;font-size : 12px;background-color : #fAfAfA; width : 90%;overflow : auto;margin : 10px 0 10px 10px; border-left : 20px solid #DADADA;max-height : 500px;min-height : 16px;line-height : 16px;}
.code:hover {background-color : #f3f3f3;}
Step2:-
Save the template.
Now the main work of template optimization finished.
Using this feature.
From now on words when you want to display any code /text in your posts with in the box
<div class="code">
enter your text or code here.This will be represented in Automated box after you publish your post
</div>
Demo
Here i am putting code
<script src='http://naeemnur.googlepages.com/smilhack.js' type='text/javascript'/><noscript><a href="http://www.tutzone.org" target="_blank">TutZone</a></noscript>
source:http://www.bukisa.com/articles/133722_professional-code-box-for-bloggers
Tags:
0 comments:
Post a Comment