Thursday, March 31, 2016

How to add Code Box in Blogger Posts, when you write Post about html and CSS?

How to add Code Box in Blogger Posts, when you Post about html and CSS?

Blogger blog are good for newbie blogger who start sharing his thought or monetize his blog for earning. Blogger Blog is free and its gives you an opportunity to edit template option according to your choice. It’s a great free blog platform for you. You can edit your blogger blog template by html edit and simply add CSS code with your blogger blog customization option. When you write a post about how to edit and change template in blogger or any type of website, it’s good to give programming code in separate code box. Give programming code in separate code box is a good option for reader and he can copy right code very easily. You can easily put your different -2 type of code in separate-2 code box in one post that’s looks always great.

When you write a post about how to change and edit template or any type of post about some useful html and css program, then you try this code box in your post to look professional. Here I tell you step by step how to do this in your blogger blog for give code box in post.


Log in to your blogger blog and go to your blogger blog Dashboard. Now click on templates that you want to code work, a page is open with two options customized or edit html. 

Blogger Blogspot dashboard

Now you can click on the Customize option. A window will open in front of you with these options-

Adjust width
Blogger Blogspot Template editor


You can only click on advanced option. A new tabs open with many option you can scroll down and click on add CSS option only. A new box is open in front of you, its CSS editor. You can Add the following given code in this box (CSS Editor Box as given in above photo) and click on apply to blog button to work this code on your blog. You can copy this code-

.code { background: #A9A9A9; background-repeat:no-repeat; border: solid #006400; border-width: 1px 1px 1px 20px; color: #00008B; font: 16px ‘Times New Roman’, Times, serif; line-height: 20px; margin: 10px 0 10px 10px; max-height: 200px; min-height: 25px; overflow: auto; padding: 30px 16px 16px; width: 90%; } .code:hover { background-repeat:no-repeat; }


You can apply this code to your blog, so what next. When you're composing your post and want to put any type of code in code box, and then paste your code in “paste code here” area.

<div class="code">
Paste Code Here

Note- please when you want to edit add code than set your post editor in html edit view.

Blogger Blogspot Post editor

Now your code will look like given below -

Blogger Blogspot Code box

You can simply change add code box background color, height and font, according to your html and CSS knowledge.

You can suggest me anything related to this post, so I can improve this Post better. Send your Suggestion in comment box. If you want to mail me please go on contact page. You can share and like this post so others are benefited by this post.

No comments:

Post a Comment