How To Add Code Box In Blog - FindersAdda : Tutorials of Make Money, Computer or Internet

Monday, 11 December 2017

How To Add Code Box In Blog



Hiiii Guys ! How are You? I hope, you will be good. Today, I am present once again with a new post. 


Today I am going to describe how to add code box in blog and why it is needed? I have already written a post that How to add beautiful NewsLetter in Blog?

How to add code box in blog


 What is code box?

Code box is a stylish box which is created for writing code. Code box is also helpful for designing our blog look. For example if you are writing code in blog post then code box helps to write code in box which is looking beautiful your blog post.

“A visitor asked to me that what will happen if we write code without code box in blog post.” If you are writing code without code box then visitors will not understand what your blog post is saying.

In this article, I will tell you two ways to add code box in blog post. First way by using Text area and second way by using “<div>” tag.

 1 Way of adding code box by using Text area

Step 1: First of all, copy the below code.


textarea { white-space: pre; overflow-wrap: normal; overflow-x: scroll; width: 100%; height: 500px; padding: 12px 20px; box-sizing: border-box; border: 2px solid #3155c4; border-radius: 4px; background-color: #f8f8f8; resize: none; font-size:18px; }

Step 2: After that, login in your blogger account and click on the Theme option in blogger dashboard and then click on the Edit HTML option.

Step 3:  Then press “Ctrl + F” button and find “</b:skin>” and paste the copied code above </b:skin>

search </b:skin> and paste the code

paste the code



Step 4: Then click on the Save Theme option.

Step 5: Now when you will write a new post then click on the HTML option and write <textarea readonly> Your Code Here </textarea>.

add code in post


Step 6: Write your code instead of Your Code Here.

 2nd Ways of Adding code box by using Div tag

Step 1: First of all, copy the below code.


.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; } #blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px;} .blog-pager {background: none;} .displaypageNum a,.showpage a,.pagecurrent{padding: 5px 10px;margin-right:5px; color: #F4F4F4; background-color:#404042;-webkit-box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);-moz-box-shadow:0px 5px 3px -1px rgba(50, 50, 50, 0.53);box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);} .displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#EC8D04;text-decoration:none;color: #fff;} #blog-pager .showpage, #blog-pager, .pagecurrent{font-weight:bold;color: #000;} .showpageOf{display:none!important} #blog-pager .pages{border:none;-webkit-box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);-moz-box-shadow:0px 5px 3px -1px rgba(50, 50, 50, 0.53);box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);} body { background-color: #FFFFFF; }

Step 2: After that, login in your blogger account and click on the Theme option in blogger dashboard and then click on the Edit HTML option.

Step 3:  Then press “Ctrl + F” button and find “</b:skin>” and paste the copied code above </b:skin>

search </b:skin> and paste the code

paste the code



Step 4: Then click on the Save Theme option.

Step 5: Now when you will write a new post then click on the HTML option and write <div class="code"> Your Code Here </div>.

add code in post


Step 6: Write your code instead of Your Code Here.

I hope you liked this post so much. If you loved this post, Then, share with your friends and also give some suggestion that what should i improve in this post. Thank You So Much...... 

About Author

SUMIT KUMAR GUPTA
SUMIT KUMAR GUPTA

Author & Editor

Myself Sumit Kumar Gupta & 21 year's old person. I am a programmer and blogger. I spend much more time on programming and blogging and helps other programmers and bloggers.

0 comments:

Post a Comment

We are eager to see your comments.
Comment Rule :

1. Don't use any link in the comment box. If you have any problem related to link then contact me with the contact form.

2. Don't use the wrong word if you write the wrong word in comment box then it will get spam.