How to Use Codepen in Blogger Posts
How to Use Codepen in Blogger Posts Usually the goal is to run and display the demo results of an explanation of a blog post without having to paste the code in the HTML edit. Maybe many of us who manage blogs and discuss topics such as programming tutorials and want to display the display results so that users can see it so that it looks interesting.
But for all of that it takes a little skill or expertise in the field of programming languages. Actually you don't need to study it in depth, you just need to learn the basic introduction of programming languages such as Html, CSS, and JavaScript so that you are not too foreign in the programming world.
There are many platforms or free websites that you can use for learning media if you want to learn programming languages. If you are a beginner and don't want to bother with the software that must be used, you can use the tools provided on the CodePen website. Before entering the tutorial, it would be better for those of you who are new to first knowing what a CodePen is and its functions.
Understanding CodePen and its Functions
CodePen is an online community for testing and displaying display results created from programming code such as HTML, CSS, and user generated JavaScript code. CodePen functions as an online web-based code editor as an open source learning environment, where developers can run code with snippets, called "pens" as a place to test programming code.
In this post I will explain How to Use CodePen in Blogger Posts. To better understand and be able to use Codepen in Blogger Posts, there are a few things you should do. For that, see the explanation below until it's finished, here we will provide tips and tutorials so you can use CodePen and use it for blog posts or other purposes.
The first thing to do you can visit the official CodePen website and register as a user. Here's How to Register and Create a CodePen Account easily without any hassle.
How to Register and Create a CodePen Account
Here's How to Register and Create a CodePen Account:
- First visit the CodePen website address
- On the CodePen website page click Sign Up
- Then on the One more step page, check hCaptcha
- Please click each image to verify and follow the instructions provided
- Next click Log In
- After that select Sign up now! to Create a CodePen Account with Email or you can login with social media accounts such as Twitter, GitHub, Facebook.
- Finished...
After registering and creating an account on CodePen, it is time for us to use CodePen in Blogger Posts. For How to Install CodePen in Blogger Posts, you can follow the tutorial below.
How to Install CodePen in Blogger Posts
Here's How to Install CodePen in Blogger Posts:
- On the page please create a New Pen by Clicking Profile > New Pen
- After that you will be redirected to the code editor page. In the code editor there are 3 columns created for HTML, CSS, and JavaScript code. Now please enter the program code in the code editor column, adjust it to the code entered. Once you have finished entering the code, don't forget to create a name for the project and then click the SAVE button in the menu tab.
- Then click the Embed button and the Embed This Pen form will appear
In the Theme section, you can set the background color theme. The default theme is a CodePen iframe that will load when clicked. While the Use Click-to-Load and Make Code Editable menus are for member users who use premium features.
Now consider the code generated when clicking the Embed button. There will be 4 options that you can use to copy the code.
- HTML (Recommended)
- WordPress Shortcodes
- Embed Prefill
- iframe
Each option is provided for various functions and uses.
- To install CodePen in Blogger posts, the CodePen embed that you have to choose is Iframe.
- Finally, copy the code and paste it in the blog post or website that you want to place.
Furthermore, To Install CodePen in Blogger Posts, you can follow the tutorial below.
Installing CodePen in Blogger Posts
Here's How to Install CodePen in Blogger Posts:
- First login to blogger
- Create a New Page or Post
- On the Posts page select HTML View instead of Writing View
- Now put the code copied from CodePen earlier into the post section you want to display.
- If you have put the code now move it to Writing View from HTML View
- Click Publish
- Finished...
CodePen Display Results
For CodePen Display results in Blog Posts, you can see the example below.
In addition, you can create a different CodePen display by using the Run Pen button to run a Code Program that functions when the button is clicked, the CodePen Display Results will be shown.
To make the Run Pen button, it's quite easy. You can simply use the following code into a blog post.
<iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="453" width="100%" name="cp_embed_1" scrolling="no" src="https://codepen.io/Samuelpasaribu/embed/preview/QWgMXjm?default-tab=result&height=453&preview=true&slug-hash=QWgMXjm&theme-id=light&user=fghty&name=cp_embed_1" style="width: 100%; overflow:hidden; display:block;" title="Penyematan CodePen" loading="lazy" id="cp_embed_QWgMXjm"></iframe>Change the user name and code marked in red above as follows.
https://codepen.io/Samuelpasaribu/embed/preview/QWgMXjm
Samuelpasaribu's writing above is the name of the CodePen account. While the code QWgMXjm is the ID code of the project that was created. For that you just replace the project name and ID code with your own. Now you can see a different view from the previous view.
Conclusion
How to Install CodePen in Blogger Posts is very useful to make it easier for users to see the results of the code and the resulting display. Codepen itself has provided an alternative in the form of an embed code for anyone who wants to enter the results of the code into their blog platform.
That's how to install CodePen in Blogger posts, hopefully this article can help all of you. If you have any doubts, questions or feedback, let us know in the comments section below.
.jpg)
Samuel
Hello i'm Junior Web Developer from Medan, North Sumatera, Indonesia. I like Design and UI/UX Design
