Search This Site!

Saturday, 1 December 2018

How to Add HTML/CSS Code Box Area in Blogger Posts

How to Add Code Box Area in Blogger Posts
When You write a post about editing and changing template style or format in blogger, you need to write a html code, it's better to write html code in separate code box. Giving html code in separate box, allow reader easily to copy and paste the code.

Steps To Add Html Code Box

  1. Log in to your blogger Dashboard >> Template >>
  2. Click on the Customize
  3. Click on Advanced >>>  Add CSS
  4. Add the following code in the 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: 28px 10px 10px; width: 90%; } .code:hover { background-repeat:no-repeat; }
  1. Click on apply to blog
  2. When you're composing your post and want to add code box, then go to html section of post editor and paste the following code.
<div class="code">
Paste code here
Note: Add your html code in between "paste code here"
You can edit or change add code box background color, height and font, as per your need.

0 on: "How to Add HTML/CSS Code Box Area in Blogger Posts"