How to Add / Create CODE / SCRIPT Box for Displaying Codes in Blogger Site?



If you have Blogger Site providing Codes / Scripts to the Visitors, then you need the CODE / SCRIPT BOX in your Blogger site. This Code Box can be used to Display your Codes / Scripts for visitors in an attractive way. 
It increases the Look of your site, and hence Site looks professional. Moreover, you can easily add CODE Box to your Site with our Ready-made Code in a few minutes.


Sample of CODE / SCRIPT Box is available Below:-

THIS IS THE SAMPLE OF THE CODE / SCRIPT BOX. You can PASTE Here your Code / Script to Display.



ALSO Read: 
How to Disable Copy-Paste in our Site and Allow Some Text / Code / Scripts Copied after Adding Code for Disabling Copy-Paste? A Help Post for Bloggers which will Allow them to Disable Highlighting and COPY in their Site Along with Allowing Some Codes / Special Texts to Be Copied! 

Read the Above post if you wish to Enable Visitors to copy the Above CODE Box Scripts only and Disable Copying Other things on your site!



Now Let’s Learn to Add / Create CODE / Script Box for your Blogger Site Step by Step:-

#1. First of all, Download the CODE Notepad File from the Link Available below!

DOWNLOAD Code File for Creating CODE BOX in your Blogger Site: Click Here to DOWNLOAD



#2. There are 2 Parts of Code in the Downloaded Notepad File.

You have to BOTH 2 parts of the Code in your Blogger to create/add a CODE / SCRIPT Box in your Blogger Site.




#A. FOR 1st part of CODE:

This 1st part of the Code is for LOOK of your Code Box. You can CUSTOMIZE the Background Color of Code box, Font color, Font size and Family, Height and Width of CODE Box in this 1st Part Code as shown in the photo above.

Open Blogger, go to THEME, and then go to EDIT HTML Option.

Then, SEARCH for this Line in Blogger HTML:

]]></b:skin>

and PASTE Your 1st part of CODE Just ABOVE or Before this Line: ]]></b:skin>

Now SAVE The Blogger Theme.








#B. FOR 2nd Part of CODE:

The 2nd Part of the Code is to be ADDED in that place in our Blogger Posts / Pages where we need to Create / Add Code BOX
So you can CREATE Code Box in your Any Blogger POST’s / PAGES.

Wherever you want to add the CODE Box in your Blogger Now, Just Use this 2nd Part Code. You have to PASTE the 2nd Part Code in HTML Mode/View of the POST's or Pages. 
Remember, only in HTML View and NOT in COMPOSE view. 
The 2nd Part Code Seems Like this:


<div class="code"> 
Write Here the Code/Script HERE you want to display in the CODE BOX 
</div>





#3. After adding the 2nd Part of the Code, check-in your site for the CODE BOX. It will be seen. If you want to CUSTOMIZE the Layout or LOOK of CODE Box, you can CUSTOMIZE it anytime. 
Look for the 1st Part of Code you added in BLOGGER HTML Just ABOVE or Before this Line: ]]></b:skin>



You Have Successfully Added CODE / SCRIPT BOX in your Blogger POST’s / Page’s Now. Check it out.


Also, Watch our Video for Step by Step Guide to Add CODE / SCRIPT Box in Blogger Site:



Previous Post Next Post