How to Add Social Media Icons to Blogger

Adding social media icons to your Blogger site is a small change that makes a huge impact, connecting your blog content directly to your growing online community. This guide will walk you through several easy-to-follow methods, from a simple built-in gadget to custom HTML and CSS, so you can choose the approach that best fits your skill level.

Why Adding Social Media Icons to Your Blog Is a Game-Changer

Before jumping into the "how," it's helpful to understand the "why." Your Blogger website is the home base for your content, but your social media profiles are where you build active, engaged communities. Placing social icons on your blog isn't just about decoration, it's a strategic move to link these two worlds. It gives your readers a direct path to follow you, stay updated, and become part of your community.

Here’s what you gain:

• Increased Followers: A reader who loves your blog post is a prime candidate to become a follower on your social channels. Visible icons make it effortless for them to hit that "Follow" button.
• Stronger Brand Presence: Consistent branding across your blog and social media builds trust and recognition. Icons are a visual cue that reinforces your brand's identity and shows you're active across multiple platforms.
• Improved Community Engagement: By directing blog readers to your social profiles, you invite them into an interactive space where you can engage through comments, DMs, Reels, and Stories, turning passive readers into active fans.

Method 1: Using Blogger's Built-in Social Icons Gadget (The Easiest Way)

If you're looking for the quickest, code-free way to add social media icons, Blogger's built-in gadget is your best friend. This method takes just a couple of minutes and is perfect for beginners who want a simple, clean look.

Step-by-Step Guide:

1. Navigate to Your Blogger Dashboard: Log in to your Blogger account and select the blog you want to edit.
2. Open the Layout Section: On the left-hand menu, click on Layout. This is where you can add, remove, and rearrange the different elements (called gadgets) on your blog.
3. Add a Gadget: Find a section where you’d like your icons to appear. Common spots are the sidebar ("sidebar-right-1") or the footer ("footer-1"). Click on the "Add a Gadget" link in your chosen section.
   Tip: For visibility, placing icons in the header, sidebar, or footer usually works best.
4. Select the "Social Icons" Gadget: A new window will pop up with a list of available gadgets. Scroll down until you find the Social Icons gadget and click the plus (+) button or the "Add" link next to it.
5. Configure Your Social Links: This is where you connect your profiles. The gadget presents a list of popular social networks. Simply fill in the URLs for the profiles you want to display. If you don't have an account on one of the listed platforms, just leave the field blank, and the icon won't appear.
   Blogger usually pre-fills a list of a dozen or so platforms like Facebook, Twitter (X), Instagram, LinkedIn, and YouTube.
6. Save and View: Once you've added all your links, click the Save button at the bottom of the gadget window. Then, click the "Save" (sometimes an orange floppy disk icon) in the bottom right of the Layout page to apply the changes to your blog. Visit your blog to see your shiny new social icons in action!

Method 2: Manually Adding Custom Icons with an HTML Gadget

While the built-in gadget is easy, it offers limited customization in terms of icon style. If you want to use unique icons that match your blog’s aesthetic or include platforms not listed in the default gadget, the HTML/JavaScript gadget gives you complete control.

Step 1: Find and Host Your Social Media Icons

First, you need the icon images themselves. You can either create your own or find free ones from various websites. When choosing, look for icons that have a consistent style (e.g., all circles, all squares, same color scheme).

Where to Find Free Icons:

• Iconfinder: Offers a huge library of both free and premium icons in endless styles.
• Flaticon: Another massive source for vector icons and stickers.
• Font Awesome: A popular choice that uses font-based icons, which scale perfectly. This is slightly more advanced as it may require linking a stylesheet in your theme's HTML.

Once you've downloaded your icons (as PNG or SVG files), you need a place to host them online so you can link to them. You can't just upload them directly to the gadget. A simple way to do this is to upload the icon images to a new, private Blogger post without publishing it. After uploading, switch to the "HTML view" of the post editor to get the image URL for each icon.

Step 2: Gather Your Social Media Profile URLs

You can't link to your profiles without the right URLs! Open each of your social media profiles in a separate browser tab and copy the complete URL from the address bar (e.g., https://www.instagram.com/yourusername). Paste these into a text document to keep them handy.

Step 3: Create The HTML Snippet

This is where we put it all together. The structure is simple: it’s an HTML list where each list item contains a linked image. Here's a template you can use. Copy this code into a simple text editor (like Notepad or TextEdit).

<,ul>,
<,li>,
<,a href="YOUR_INSTAGRAM_URL_HERE" target="_blank" rel="noopener" title="Follow us on Instagram">,
<,img src="URL_TO_YOUR_INSTAGRAM_ICON_IMAGE_HERE" alt="Instagram Icon">,
<,/a>,
<,/li>,
<,li>,
<,a href="YOUR_TIKTOK_URL_HERE" target="_blank" rel="noopener" title="Follow us on TikTok">,
<,img src="URL_TO_YOUR_TIKTOK_ICON_IMAGE_HERE" alt="TikTok Icon">,
<,/a>,
<,/li>,
<,li>,
<,a href="YOUR_LINKEDIN_URL_HERE" target="_blank" rel="noopener" title="Connect on LinkedIn">,
<,img src="URL_TO_YOUR_LINKEDIN_ICON_IMAGE_HERE" alt="LinkedIn Icon">,
<,/a>,
<,/li>,
<,/ul>,

Now, just replace the placeholders:

• Replace `YOUR_INSTAGRAM_URL_HERE` with your actual Instagram profile link.
• Replace `URL_TO_YOUR_INSTAGRAM_ICON_IMAGE_HERE` with the direct link to the icon image you hosted.
• The `target="_blank"` attribute makes the link open in a new tab, which is great for user experience because it keeps them on your blog.
• The `alt="Instagram Icon"` text is important for accessibility and SEO.

Add a new `

` block for each social media profile you want to include.

Step 4: Add the Code to a HTML/JavaScript Gadget

1. Just like in the first method, go to Layout on your Blogger dashboard.
2. Click Add a Gadget in your desired location (sidebar, footer, etc.).
3. Select the HTML/JavaScript gadget from the list.
4. Leave the "Title" field blank if you don't want a title above your icons.
5. In the "Content" box, paste the HTML code you created.
6. Click Save. Then save the changes on the main Layout page. Check your blog to see your custom icons! They might be stacked vertically by default, but we'll fix that next.

Getting Fancy: Customizing Your Icons with CSS

If your new icons are stacked vertically or are too big, you can easily style them with a bit of CSS. This lets you change their size, alignment, and add cool hover effects.

Step 1: Assign a CSS ID to Your Gadget

To apply styles specifically to our social icons, we need to add an ID to our HTML code. Modify your HTML gadget code by wrapping the `

` element in a `

` with a unique ID, like this:

<,div id="custom-social-icons">,
<,ul>,
<,!-- Your list of icons here -->,
<,/ul>,
<,/div>,

Step 2: Add Your Custom CSS

1. In your Blogger dashboard, navigate to Theme.
2. Click the Customize button.
3. In the theme designer, select Advanced from the left-hand menu.
4. Scroll down that menu and click Add CSS.
5. A CSS box will appear. You can add your styling code here.

Example CSS Snippets to Add:

Copy and paste the code below into the custom CSS box. Feel free to adjust the values (like `32px` or `10px`) to match your design.

/* --- Custom Social Icons Styling --- */

/* container for the list */
#custom-social-icons ul {
list-style-type: none, /* Removes the bullet points */
padding: 0,
margin: 0,
text-align: center, /* Center-aligns the icons in their container */
}

/* each list item */
#custom-social-icons li {
display: inline-block, /* Aligns icons horizontally instead of vertically */
margin: 0 10px, /* Adds 10px of space between each icon */
}

/* the icon images themselves */
#custom-social-icons img {
width: 32px, /* Set your desired icon size */
height: 32px,
vertical-align: middle,
opacity: 0.8, /* Makes icons slightly transparent */
transition: opacity 0.2s ease-in-out, /* Smooth transition effect for hover */
}

/* the effect when someone hovers over an icon */
#custom-social-icons img:hover {
opacity: 1.0, /* Makes icons fully opaque on hover */
}

Once you've pasted the code, click the Save button in the bottom-right corner of the screen. Now your icons should be horizontally aligned, properly spaced, and feature a subtle hover effect!

Final Thoughts

Adding social media icons to your Blogger site is a fundamental step in converting readers into followers and building a lasting community around your content. Whether you opt for the simple built-in gadget or create a fully customized set with HTML and CSS, you are building a valuable bridge between your blog and your social channels.

Once those visitors start landing on your social pages, keeping your content flow consistent becomes the next challenge. At Postbase, we built our tool specifically for content creators managing multiple platforms. Our visual calendar helps you plan posts across TikTok, Instagram, and more, all from one place. We designed it to be simple, reliable, and focused on modern content like short-form video, so you can spend less time juggling tabs and more time creating.

```