Hello friends, welcome to the TutBig today I will show you How to add Code Box In Blogger When you write about the blogger on your weblog 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.
How To Add Code Box In Blogger
These are Following Steps:-
1.Login to your blogger blog Dashboard.
2.Then go to " Theme " > " Edit HTML ".
3. Click anywhere inside the code area and press Ctrl + F keys to open the search box.
4. Write or paste " ]]</b:skin> "code in search box and press Enter.
5. Just above " ]]</b:skin> " paste the code box CSS code given below:
Code 1. For Style 1 Copy This Code [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; }
6. Now click on " Save Template " and you are done..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; }
Usage of add code box in blogger
To use this in your post just follow the following steps:
1. To use this just click on the HTML tab in your blogger post editor.
2. Now write or paste the code given below in your blogger post editor as shown in the image below:
<div class="code">
Your Code Here
</div>
4. Now click on " Publish Button " and see it live.
I hope you enjoy this post and the photos. How to add Code Box In Blogger
