How To Add Code Box In Blogger Post

Most new bloggers starts blogging from blogspot.com. If you create new blog and want to share your blog link with other bloggers for link exchange but don't know how to do this, here i am sharing this method with you. I am also using this. Its very easy just follow these steps one by one. 

1.  First step is to login to your blogger account.

2. Second step to edit your theme to copy paste this code, for this click on theme button in your left hand side control panel as shown given below image,

Now click this cursor button as shown in below image, do not click Customize button

3. Now you will enter in html section of your blogger them here you can edit your them codes, you can delete code which you not required or add new code just like we going to add in your theme's "CSS" section. 

4. First you have to find " ]]</b:skin>  " this code in template you can find it by scrolling down slowly of press ctrl+F a search box will popup in your browser copy paste this code in search box and find or enter. Once you find it copy paste any of these two codes just above it like in picture

Code 1. For Style 1 Copy This Code [With Scroll]

.code1 { background:#f5f8fa; background-repeat:no-repeat; border: solid #5C7B90; border-width: 1px 1px 1px 20px; color: #000000; font: 13px 'Courier New', Courier, monospace; line-height: 16px; margin: 10px 0 10px 10px; max-height: 200px; min-height: 16px; overflow: auto; padding: 28px 10px 10px; width: 90%; }
.code:hover { background-repeat:no-repeat; }

Code 2. For Style 2 Copy This Code [Without Scroll]

.code2 { background:#f5f8fa; background-repeat:no-repeat; border: solid #5C7B90; border-width: 1px 1px 1px 20px; color: #000000; font: 13px 'Courier New', Courier, monospace; line-height: 16px; margin: 10px 0 10px 10px; min-height: 16px; overflow: auto; padding: 28px 10px 10px; width: 90%; }
.code:hover { background-repeat:no-repeat; }

 

5.   Copy paste this given code below to your above code in your html to show scrolling box BLUE.

/* blockquote */ .post blockquote {background-color:transparent;border-left:8px solid #ff7400;padding:10px;margin:10px;overflow-y: scroll; max-height: 250px; margin: 1.5em 10px; padding: 3px 2em;} .post blockquote{color:#000000;font-family:"PT Serif",Georgia,Times,serif;border-left:5px solid #ff7400;margin-left:0;margin-right:0;margin-bottom:27px;padding-left:27px} blockquote blockquote{font-size:inherit}

Now save template by click on floppy icon and you are done

6. In this step i will show you how to use this. 

(a). Create new post in your blog. Click on html or pencil icon you will see html view or compose view, now click html view.

(b).  Now write or paste the code given below in your blogger post editor.

For Green Box

                       <div class="code1">
                        Your Code Here. Which ever you want
                        </div>

For Blue Box

<blockquote> Your Code Here. Which ever you want </blockquote>

c). Replace " Your Code Here. Which ever you want " with your desired code.

(d). Now click on " Publish Button " and see it live. But remember all code write in html view.

Note:- You can also also use another without scrollbar  style here Add Links in coloured box

Share: