How to insert a script into a Post on Blogger

This time I will give a tutorial on how to add a script into a post so that readers can copy it.

 

There are several ways to display code to be copied and used by readers, such as using a quote or just pasting it in a post and giving it a different color or letter shape, this method is easy but there is a disadvantage that when we paste the script, the script will be directly adapted to the container or the area of our post so that the copied script will take up a lot of space like the image below because the narrow space to the side makes the script extend down.

 

So the solution to this problem is to use the script that I provide below. which will create a container that can continue to extend sideways or downwards depending on the content so that the existing script will not be cut into pieces like the image above and not will take up a lot of space.

Alright, now let's start how to enter the script that we have into a container made using the script that I provide below.

 

We start by creating a new post and changing the Compose view (Box1) to the HTML view (Box2).

In this example I will use a nearly finished article, all the articles we have written using the Compose view mode (Box1) will be like the image below if we change it to HTML view (Box2).

First of all, we start by writing a word in the Compose view as shown below (Box1) so that we know where our script will appear, when we have returned to the Html viewas shown above and look for the word that was written earlier by typing field of view and click the shortcut Ctrl + F or find. 

If you have found the word we wrote earlier (Box1), let's delete it from <p> to </p> (Box2) and paste the code below 

<pre style="background: rgb(247, 247, 247); border: 1px solid rgb(221, 221, 221); box-sizing: border-box; color: #323232; font-size: 15px; font-stretch: inherit; font-variant-east-asian: inherit; font-variant-numeric: inherit; line-height: 1.3em; margin-bottom: 15px; margin-top: 15px; max-height: 400px; overflow: auto; padding: 25px 15px 15px; position: relative; vertical-align: baseline;">
Put your script here
</pre>

You can replace the red word with the script you have (Box1) so that it looks like the image below

Well the script that you have should already be in a container, you can check it by moving the view back to compose(Box2) or by clicking Preview(Box1).

Alright, that's all for this tutorial, hopefully it will be useful if you have any questions, please comment below, thank you for visiting, see you in the next article.