How To Add Code Reader In Blogger

How to add code reader in blogger  | 101helper

Code reader is a program that reads html/css/java or any other codes. An example of it is the Html/javascript option which you can see at the time of adding a gadget in your blog. That program reads your java/html and css codes and display results. Similarly now a days a new kind of website is introduced that also do the same work(reading codes and processing results). May be you are thinking what is it for? or why should I read this post, it is not of my use if yes then let me tell you the reason for why do you need to read this post. If you own a blog which have demos or a blog similar to my blog(about blogger) then you surely need this iframe to show your demos within your posts so now you don't need to create demo blogs for demos. So lets start!

Step 1: Go to Codeopen and signup for a new account.

Step 2: Login to your codeopen account and click on New Pen on the top of the page.



How to add html/css code reader in blogger | 101helper

Step 3: Create your project or demo by inserting your Html/css/java codes and save your project.


Step 4: Now click on share on the top of the page.



Html/css/java code reader in blogger | 101helper

Step 5: Click on Embed.


code box for blogger | 101helper

Step 6: Customize your demo box using the tools and grab the code of your iframe.



how to show demos in posts in blogger | 101helper

Step 7: Now go to your post or layout to add your iframe.

Step 8: Add the copied code in post or as a gadget and save it.

Congratulations! you are done successfully.

As a demo I am adding my iframe in this post, see it below:


That's it! hope you like this post and you found it interesting and helpful. Follow and subscribe for more blogger tricks. Keep visiting 101Helper and share this post with others.

Search tags: Html/CSS/Java code reader for  blogger, How to add code reader in blogger, Demo box for blogger, how to show demos in posts in blogger, code box for blogger, 101Helper tricks for blogger.


See the Pen zxQvYQ by fahimraza (@fahimraza001) on CodePen.


EmoticonEmoticon