Add Source Code in Blog Posts | How to Post Code on Blogspot | English

Making posts related to programming, of course, is not appropriate if the source code is not given an example. The source code of a program will usually be damaged or hard to read if it is just posted on a blog. Moreover, if the sample of source code is in the form of html, javascript, php or other languages ​​that are usually run in the browser.

and here's an easy way to make the source code easy to read

on this occasion I use Pastebin

when you have entered the pastebin site, the following form will appear

Form untuk input Source Code

Then on the form we paste the source code that we want to display on the blog, as in the example below:

Then after we input the source code, scroll down and we will find the configuration like this:

1. Syntax Highlighting: just fill it with the type of source code that we have, in this case is PHP
2. Paste Expiration: not filled,
3. Paste Exposure: just set it to Public
4. Folder: can be selected with the folder that is owned in the pastebin account or if it doesn't exist, that's okay too
5. Paste Name/Title: just fill it with the desired name
6. and finally select CREATE NEW PASTE, as in the image below

When it is done, the Sample window will appear, here we select EMBED

Then in the next option, the Embed option will appear, after that we will be asked which one to choose?

• JavaScript Embedding : will bring up a pastebin window in the post along the number of lines of source code,
• Iframe Embedding : will bring up additional frames with scroll panels so that if the source code is long, it will not take up many pages.

Incidentally I chose the second option (iframe) as shown below:

Back again to the Blogger Post, here the Iframe code line from pastebin we add to the post.

The trick is in the post column, in the upper left corner, there is a pencil icon, we click it and an HTML option will appear, and we select the HTML one

When we select HTML, a display like the one below will appear, then we paste the Iframe code from Pastebin that we already have

Then the final result will appear as below:

Right, the code that we get from pastebin is like this:

If we want to change the height of the frame, we can add a height to the right of the Iframe, such as height: 400px or whatever height we want to change the height of the iframe window according to our needs as in the example below: