How to Insert JavaScript Inside Blogger Posts
Blogger (aka Blogspot) allows blog authors to include javascript-based widgets in the sidebars of the blog. But did you know that you can embed javascripts within the blog posts themselves?
It can be tricky to get the javascript to work within a blog post, but if you are patient and careful when editing and pasting the code, the possibilities are wide open. You can embed a simple javascript calculator, pageview counter, date and time display, even some javascript-based animations. The trick is to make sure the code is embedded without any line breaks inside the post editor, or else Blogger will insert
tags within your code, rendering it non-functional.
Step 1) Create a new post or edit an old post in your Blogger blog, and click the tab for the HTML editor. These steps won't work if you are in the WYSIWYG editor.
Step 2) Find the javascript code that you want to insert, copy it, and paste it into a blank Notepad document. Use TextEdit if you are on a Mac.
Step 3) Locate the opening
<script type="text/javascript">and closing
</script>tags. If you see a
<!-- unit after the opening script tag, delete it. Likewise, if you find a //--> unit right before the closing script tag, delete it. These units are not necessary for most codes to function. When they are present, they require line breaks, but unfortunately, line breaks are fatal when you try to embed the JS within a Blogger post.
Step 4) Now edit the remaining code between the script tags to delete all line breaks. The nice thing about javascript is that line breaks don't affect how a program functions. They only serve to make the code look nice when you are developing or editing a file. When you finish this step, your code should just look like a wall of unbroken text between the opening and closing script tags.
Step 5) Copy and paste all of the code, including the script tags, into the body of your post. If the Blogger post editor inserts more line breaks, go back and erase them all. As stated before, this requires patience!
Publish your post to see if the javascript is functioning correctly. If not, you might have overlooked a line break, or accidentally erased a bracket. Just to prove that this method does work, here is an example of a calculator embedded within a blog post on Blogger.
Yes
No
Flag
Comments
Cool trick. It's good to be able to restrict a widget to one page of the blog rather than have it clutter up the sidebars. Sometimes the sidebars get so long you have to scroll all the way down to find something.
You must be logged in and verified to post a comment. Please log in or sign up to comment.