Tutorial
How to Add a Mortgage Calculator to Blogger
Add a working mortgage calculator to any Blogger page in under 3 minutes. The widget loads inside an iframe and updates results as users type.
Before you start
Blogger is completely free. No paid plan required. HTML/JavaScript gadgets and post HTML views accept iframes without restriction. Blogger is owned by Google and treats embedded third-party iframes as standard content.
Step-by-step
- 1
Open Blogger and the post or page
Log in at blogger.com. Click the blog you want to edit, then click New Post or open an existing post. The Blogger post editor opens in Compose mode by default.
- 2
Switch to HTML view
In the top-left of the toolbar, click the pencil icon and select HTML View (or click the "<>" icon). The editor now shows raw HTML. This is required — Blogger does not allow raw iframe insertion in Compose mode.
- 3
Paste the iframe in the HTML
Place your cursor where the calculator should appear. Paste the embed code below. Blogger sometimes converts straight quotes to smart quotes — verify the iframe src and style attributes still use straight quotes after saving.
- 4
Publish and preview
Click Publish (or Update) in the top-right. Click View Blog, then navigate to the post. Confirm the calculator renders and updates as you type a home price.
- 5
Mobile verification
Blogger has an optional mobile theme that may strip custom HTML. Go to Settings > Mobile > Mobile Theme and choose "No. Show desktop theme on mobile devices." This ensures the calculator displays correctly on phones.
The embed code
Copy this exactly. It works on Blogger and every other supported platform.
<iframe src="https://calcpier.com/embed/mortgage-calculator/" width="100%" height="900" style="border:0;border-radius:12px;max-width:900px" title="Mortgage Calculator by CalcPier" loading="lazy"></iframe>
<p style="font-size:12px;color:#666;text-align:center;margin-top:8px">Calculator by <a href="https://calcpier.com/">CalcPier</a> - free financial tools for US homebuyers.</p>Sidebar or narrow layout
For a Blogger sidebar gadget, paste the iframe with max-width:400px and height=1100 directly in the HTML/JavaScript gadget.
<iframe src="https://calcpier.com/embed/mortgage-calculator/" width="100%" height="1100" style="border:0;border-radius:12px;max-width:400px" title="Mortgage Calculator by CalcPier" loading="lazy"></iframe>
<p style="font-size:12px;color:#666;text-align:center;margin-top:8px">Calculator by <a href="https://calcpier.com/">CalcPier</a> - free financial tools for US homebuyers.</p>Frequently asked questions
Does Blogger allow iframes?
Yes. Blogger allows iframes in the HTML view of posts, pages, and HTML/JavaScript gadgets. There is no plan restriction — all Blogger blogs work the same way (free).
Why does my iframe disappear on mobile Blogger?
Blogger mobile themes sometimes strip custom HTML from posts. Go to Settings > Mobile and disable the mobile theme. This forces the desktop layout on phones, which renders iframes correctly.
Can I add the calculator to my Blogger sidebar?
Yes. Go to Layout > Add a Gadget > HTML/JavaScript. Paste the iframe code in the gadget content field. Save and preview the blog.
Does Blogger slow down with iframes?
No. The widget uses loading="lazy", so it only loads when visible. Blogger itself loads the post HTML quickly — the iframe loads separately in the background.
What if the iframe breaks after saving?
Blogger auto-converts straight quotes (") to smart quotes (") in some editors. Return to HTML view, verify the src= and style= attributes use straight quotes, and resave. If the iframe still fails, reinsert from a fresh paste.
Can I remove the attribution footer?
No. The "Powered by CalcPier" link must remain visible. Blogger cannot modify iframe content, and hiding the footer violates the widget terms.