Creating A HTML/JavaScript Code Box Inside Your Blog Post

Creating A HTML/JavaScript Code Box Inside Your Blog Post

Hi bloggers, today we are going to discuss about creating HTML code box inside your blog post. First we need to know that what it is actually. For example, in my previous posts on stylish label drop-down menu and margin/post divider you can see a couple of codes are shared inside a box because you cannot simply type the codes inside your blog post, if so, then the code will not appear properly. So when you are sharing any code/codes related to HTML/JavaScript or any other programming languages, you need to create a HTML code box inside your blog post to share your programming codes. Look over the image at a glance shown below:

Creating A HTML/JavaScript Code Box Inside Your Blog Post

Here you can see that the code is written inside a box and not exactly like the other texts. To do so you just need to place a few lines of code within the HTML post editor section of your blog post.

Step 1-Go to the post editor section of your blogger dashboard and click HTML editor as shown in the image below with red border.

Creating A HTML/JavaScript Code Box Inside Your Blog Post

Now you will be directed to the HTML post editor section of your blog post.
Step 2-Copy paste the following line of codes exactly in the location where you want to show up the HTML code box appears inside your blog post. Image is provided below.

Creating A HTML/JavaScript Code Box Inside Your Blog Post

Step 3- Now come back to the Compose post editor section of your post editor and you can see that your HTML/JavaScript code box is ready as shown is the image below.

Creating A HTML/JavaScript Code Box Inside Your Blog Post

Finally your HTML/JavaScript Code Box code goes here:

<form> <textarea row="4" cols="50" style="background-color: #ddedc9; border: 3px solid rgb(173, 140, 8); color: #000000; height: 100px; width: 400px;"onClick=select() readonly> Your Text Here

Now copy and paste the line of code inside your HTML post editor section and replace "Your Text Here" with your line of code. You can close the 'form' and 'div' tag from the HTML post editor or just come back to Compose post editor and hit save. You are done.There are also some optional features you can use to represent the code box like changing the background color, border and it's thickness, text color, height and width of the box.Happy blogging.