How To Add Code Box In Blogger,Top 4 stylish code Box For Blogger.

How To Add Code Box In Blogger.

Contents

1. How To Add Code Box In Blogger.
2. Why should we use code box.
3. Steps To Add Code Box In Blogger.
4. Top 4 Stylish Code Box For Blogger
5. How To Use Code Box

Hello friends, welcome to the "Saurabh Technology" blog.In this article I will tell you how you can add code box to your blogger's blog.

• Why should we use code box.

When you write about the blogger on your blog you might also have shared code to paste in Template. It's true to share that codes in a separate code container in a way that it appears stylish. And it's beneficial for traffic due to the fact they can copy the code without problems from code box.

• To put a code box in a blogger's post Follow the steps given below carefully.

These are Following Steps:-

1.first you need to login your blogger dashboard.

2.Click On "THEME" Option.

3.After that you need to click on "EDIT HTML".

4.Click anywhere in the code area and to open the search box press Ctrl+f.

5.After open search box,write " ]]</b:skin>  "code or paste it.

6.Now choose any one code of them which is given below.

• Top 4 stylish Code Box for Blogger.

CODE BOX #1:- (without scroll)

 
/* Code Box ———————————————– */  
  .code { 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: 10px 10px 10px; width: 90%; } .code:hover { background: #FAFAFA; background-repeat:no-repeat;} 
   

CODE BOX #2:- (without scroll)

  .csscode {  
 margin : 10px 25px 10px 15px;  
 padding : 10px;  
 clear : both;  
 list-style-type : none;  
 background : #F2F7FF;  
 border-top : 3px solid #000000;  
 border-right : 3px solid #000000;  
 border-bottom : 3px solid #000000;  
 border-left : 3px solid #000000;  
 } 
 

CODE BOX #3:- (without scroll)

   
 .code { 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; }  
   

CODE BOX #4:- (with scroll)

.code { 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; }

7.After copying your favorite code,Paste the copied code above the  

"  ]]</b:skin>   ".

8.Click To Save Button.

• How to use this code Box.

1. To use "1st,3rd or 4th No of code box use this code IN your blog post.

<div class="code">
Your Code Here
</div>

 

NOTE: Replace "Your Code Here" with Your Desired Code.

 2.To 2nd No of code box use this code in your blog post.

<div class="csscode">
Your Code Here
</div>

NOTE: Replace "Your Code Here" with Your Desired Code.

I hope you liked this article, if you like it, please comment,Thanks for visit my blog.