How To Add PROFESSIONAL BEAUTIFUL CODE BOX TO Blog

Add BEAUTIFUL CODE BOX TO Blogger Post

Professional Code Box-is a box that automatically generates when blogger want to show some HTML codes in his posts 

SOME SCREEN SHOOT BELOW

Features :-

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" .

Note:-(Before doing any modifications to your blog please back up your present template

Now Follow These steps

1:- 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>

2:- 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;}

Save the template.

Now the main work of template optimization finished.

Just put Follwing Codes in Your Posts as HTML Where and Needed

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




REPLACE "enter your text or code here.This will be represented in Automated box after you publish your post"  With Your text


Note some Time This Trick will Not work with Some type of Codes then Use the following Tricks




<textarea style="text-align: center;"rows="9" cols="43">
your content here
</textarea>



REPLACE "your content here" With Your text Code


Pls Support us LIKE US ON FACEBOOK OR SUBSCRIBE EMAIL  if You Found this Post Helpful to YOU


Any Problem Then Don't Hesitate to Comment Below