How to Use HTML in Blogger to Edit And Embed Codes

This is a beginner’s guide to using HTML in Blogger to edit and embed codes.

When you use Blogger (also known as BlogSpot, Google’s blogging platform) to maintain your blog, you might have to customize the theme or post by editing HTML code.

By editing HTML code in Blogger, you can,

• Customize your website theme: Add a new section (static or dynamic) and tracking scripts, integrate custom CSS, and install third-party widgets and plugins.
• Edit a blog post or static page: Embed third-party content such as TikTok feeds, Facebook reviews, forms, etc., customize appearance through custom CSS, add page-specific JavaScript codes

Although Blogger is a fairly complete free blogging website, especially for beginners who want a simple platform for blogging, when your site grows, you will face several circumstances where it’s paramount to add HTML code to a post, static page, or even your entire site.

This way, not only can you add cool widgets and plugins to Blogger but also change the way you blog—Integrate a live social chat (provide customer assistance and collect leads), add an announcement bar (to notify visitors or promote any link), display a calendar of events (to showcase latest event details including where to register), and even add a custom blog search bar widget.

In our previous guide to SEO for Blogger blogs, we shared several codes to include in your blog to optimize your site for search engines to improve your online presence. However, in this tutorial, you will learn how to use HTML in Blogger to edit and embed codes.

There are two ways you can use HTML in Blogger:

1. Site-level — By editing the [Blogger] theme code, you can include codes that execute on the entire website or specific sections of the site, such as blog posts and static pages.
2. Page-level — You can edit a blog post’s HTML code to add unique codes, custom widgets, etc., to a specific blog post or static page.

How to use HTML in Blogger on Site-level

Unlike Google’s website builder, Google Sites, in Blogger, you can actually customize Blogger theme code in HTML and add HTML codes that validate the entire website.

NOTE: Please backup your theme before making any changes.

Log into your Blogger account, and go to the Edit HTML section by navigating to the Theme section.

Now, you will see the source code of your Blogger theme. You can search for any tag, element ID, or class name using shortcuts (CTRL +F in Windows or CMD + F in Mac).

The HTML code of your site’s theme includes two main sections:

1. HEAD
2. BODY

Web browsers display content within the ‘body’ section, while the ‘head’ section embeds tracking scripts, styles, meta tags, etc. However, web browsers render a website’s content from head to body, not the other way around. It’s important to keep this in mind.

Since web browsers paint content within the body tag, it’s important to prioritize content first. It means you should not add many third-party scripts at the beginning of the body tag.

So, for example, if you want to add a popup to your site, add its code just before the closing body tag (i.e., </body>). That way, browsers will display the popup without any slowdowns at your users’ end after loading website content.

Cool things to do by editing Blogger theme code

Here are a few things you can do by editing HTML code in the Blogger theme:

Embedding third-party widgets and content

Blogger has several gadgets, such as the Contact Form, that you can install from the Layout section. However, those are limited in features and customization capabilities and are not usually suitable for modern websites.

Third-party widgets allow you to extend existing functionalities and add new ones. Here are a few:

Add a floating form widget to Blogger

Blogger does not have a form builder. Even though you can use Google Forms, it’s limited in certain features, such as automated custom replies, and definitely lacks widget customization.

Create your form widget using one of these online form generators or the following widget builder. Choose a template, click the “Continue with this template” button, build your form, and select the “Floating Pane” layout.

Add popup to Blogger

A popup widget can be a powerful tool for collecting leads, promoting your services, and converting readers into customers. Create your popup using the builder below and embed its code just before the closing body tag.

Add WhatsApp Chat to Blogger

If you manage any service-related business, adding a live chat to your site can be really helpful for your readers and you as the business owner. This way, people can reach out to your customer service quickly, and you can respond to their messages directly via social messengers such as WhatsApp, leading to a higher open rate (98%).

You can also use a Telegram Chat widget or, even better, an all-in-one social live chat plugin that uses multiple messengers, enabling users to choose the right option.

Add social share buttons to Blogger

Among many social media widgets for the Blogger platform, Social share buttons are essential for any blog because they allow readers to share your content with their friends and relatives and drive traffic to your website.

Embedding tracking codes, meta tags, and style files

Another use case for customizing the HTML code of a Blogger theme is that you can install tracking codes (i.e., Google Analytics, conversion tracking codes), Meta tags for site verifications on Google Search Console and Bing Webmaster tools, Open Graphs tags, fonts, style files, and even script managers such as Google Tag Manager and Cloudflare’s Zaraz.

In general, most styles and fonts are already embedded with the theme. However, you must manually embed custom tracking codes and meta tags when using those services.

These meta tags, Open Graphs, etc., are embedded within the head tag before external styles or scripts.

Customizing appearance

Another way to use HTML in Blogger is by using custom CSS and JavaScript to change fonts, colors, transitions, and styles.

Use <style> and <script> tags to include CSS and JS codes, respectively.

Also, you can customize the existing CSS codes of the theme to change the look and feel of existing elements and content. For example, let’s say you want to change the style for the <img> tag, like adding a border, changing width, etc. You can easily do it by changing the CSS code.

You can also edit HTML in Blogger to add a new layout section, introduce new styles for elements, customize widgets, and create a responsive design. For example, let’s say your existing theme has no button style set up. You can use one of these HTML button generators to create a stylish button and embed its code on your theme.

How to use Blogger-specific tags

Have you ever wondered if you can display something specifically on an individual post or post type on Blogger? (e.g., Showcase social share buttons only on blog posts, not on the homepage, search pages, static pages, or error (404) page)

That is why there are platform-specific Layout Data Tags and Conditional Tags to dynamically fill data in your website as well as show or hide information based on conditions.

For example, let’s say you want to execute codes only on item (post) page type. In that case, you can add the following code and customize it.

<b:if cond='data:blog.pageType == "item"'>
<!-- all item pages -->
</b:if>

And you can extend the conditional tag further and specify commands when the conditional is unmet.

<b:if cond='data:blog.pageType == "item"'>
    # THIS CONTENT WILL BE EXECUTED IF CONDITION IS TRUE
    # i.e. if current page is post (item) page
<b:else/>
    # THIS CONTENT WILL BE EXECUTED IF CONDITION IS FALSE
    # i.e. if not post page
</b:if>

Now, you can use conditional tags to display widgets on specific pages, apply different styles to static pages, and load JavaScript codes on particular pages. Furthermore, you can utilize widget tags for layout, such as includes, to enhance your website.

How to use HTML in Blogger Blog Posts or Static Pages

Another way to use HTML in Blogger is to edit HTML at the page level. This can be a blog post or a static page.

In contrast to the entire site level, when you customize HTML at the page level, those changes apply to the page you edit only. So, you can embed page-level content such as PDF documents, social media feeds, giveaway widgets, etc.,

Here are a few content to embed on blog pages:

Add a photo gallery to Blogger

When you write a blog post that involves a lot of images, besides uploading and showcasing them one by one on the page, it might be better in terms of user experience to create an image slider with auto rotation and lightbox so users can experience the whole experience interactively.

Use the widget builder below to create your photo gallery widget. Select a template such as Image Slider, click the “Continue with this template” button, upload your images, select a layout, and get the embed code after customizing it. Copy the code and embed it in the HTML View section of your blog post.

Add Instagram Feed to Blogger

If Instagram is a big part of your marketing strategy, you might want to showcase your feed on your blog so that people can find your latest posts as well as follow you.

Use the following widget builder to create an Instagram feed widget for Blogger:

Add Table of Contents to Blogger post

If your blog post includes sections broken down by heading tags (i.e., H2, H3), you can integrate a table of contents widget to add a “Jump to” section so readers can access them easily.

Sign up on Fouita, search for the “Table of Content” widget, customize it, get the embed code, and place it in the HTML View mode on your blog post.

You can also check out this tutorial to create a table of contents for Blogger without third-party services.

Embed custom file types on Blogger

You can embed custom files such as Microsoft PowerPoint Presentations, Word Documents, PDFs, and Excel Spreadsheets on a blog or static post. It allows you to enhance content and user experience.

You can create a file viewer widget for your blog using the widget builder below:

Here are more widget ideas to use on blog posts or static pages:

1. Audio player — Add an audio player widget to your website to let people listen to songs, soundtracks, audiobooks, etc.
2. Social media contest tools — Add a refer-a-friend or giveaway widget to your site.
3. Pricing table — If your service’s pricing has different tiers and payment options, use a pricing table widget to demonstrate differences visually appealingly.
4. YouTube Channel widget — Embed your entire channel or channels on your site with tabs that represent different playlists.
5. HTML Table — Insert a responsive table into Google Sites.

5 Tips and Best Practices

When utilizing HTML in Blogger, following best practices to integrate custom elements seamlessly and maintaining a professional and responsive blog is crucial. Here are some tips to keep in mind:

1. Ensure mobile responsiveness — Opt for a responsive theme and web design. Regularly test your blog on different devices using a service such as BrowserStack or your web browser developer console.
2. Test HTML code in Blogspot blog — Make small, incremental changes to your HTML code, regularly checking the preview to identify and fix issues early. Before publishing your blog or blog post, always use the preview option to visualize how your HTML customizations will appear to visitors. Test your blog on various web browsers (Chrome, Firefox, Safari, etc.) to ensure your customizations work seamlessly across different platforms.
3. Optimize for improved performance — Optimize images using a service such as ShortPixel before using them in Blogger to maintain fast loading times. Limit the use of external resources and scripts to reduce the number of requests, enhancing your website’s loading speed. Furthermore, a CDN (Content Delivery Network) can be used to deliver static content from the closest server to the web user.
4. Update and maintain HTML content regularly — Stay informed about Google Blogger updates, back up your HTML code (in case of accidental changes or need to revert to a previous version), and create documentation for your HTML customizations, including the purpose of each element and any dependencies. This can be valuable for future updates or collaborations.
5. Prioritize security — Avoid unsafe embeds (when using third-party services, use reputable ones only), and if your Blogspot blog includes user-generated content, sanitize and validate input to prevent cross-site scripting (XSS) attacks.

FAQs

Related: Here’s how to make money on Blogger

Before you go

In conclusion, harnessing the power of HTML in Blogger opens up a world of possibilities for customization and integrating advanced features that were not possible without editing HTML in Blogger. Incorporating HTML into Blogspot blogs is not just about building a blog; it’s about crafting a dynamic and engaging online presence.

Before making any code modifications, back up your theme, and always split test widgets, content, and even placements within a page to find the optimal combination for your campaigns. Check out these top Blogger examples for selected websites and their highlights. Also, check out this Blogger starter guide to learn step-by-step how to create a blog and the next steps.