How to Create a Custom Widget Section in Blogger Theme

Adding a custom widget section to your Blogger theme can significantly enhance your website’s functionality and appearance. Whether you want to display promotional content, social media links, or custom advertisements, a custom widget section allows you to personalize your blog.

In this guide, we’ll walk you through the steps to create and style a custom widget section in Blogger.

Step 1: Backup Your Blogger Theme

Before making any modifications, it’s crucial to back up your Blogger theme to avoid accidental loss of data.

Go to Blogger Dashboard.
Click on Theme.
Select the Backup/Restore option.
Click Download Theme to save a copy of your current template.

This step ensures that you can restore your theme in case something goes wrong.

Step 2: Access the Blogger Theme Editor

Now, you need to access the Blogger HTML editor to insert your custom widget section.

In the Blogger Dashboard, navigate to Theme.
Click the Arrow Icon (⏷) next to Customize.
Select Edit HTML.

This will open the theme’s HTML code, allowing you to insert custom code for the widget section.

Step 3: Insert a Custom Widget Section

Find the <body> tag and insert the following code before the </body> closing tag:

<b:section class='custom-widget' id='custom-widget' showaddelement='yes'>
    <b:widget id='CustomHTML1' locked='false' title='My Custom Widget' type='HTML'>
        <b:widget-settings>
            <b:setting name='content'><![CDATA[<p>Custom Widget Content Here</p>]]></b:setting>
        </b:widget-settings>
    </b:widget>
</b:section>

Modify the content inside <b:setting name='content'> with the text, images, or HTML elements you want to display.

Step 4: Style the Custom Widget Section

To make the widget visually appealing, you need to add CSS styling.

Go to Edit Theme > Customize > Advanced > Add CSS.
Add the following CSS code:

.custom-widget {
    background: #f4f4f4;
    padding: 20px;
    border-radius: 10px;
    margin: 20px 0;
    text-align: center;
}

This styling will give your widget a clean, modern appearance with a background, padding, and rounded corners.

Step 5: Save and Preview

Click Save Theme after making these changes.
Visit your Blogger site to check if the new custom widget section appears correctly.

If the widget does not show up, try clearing your cache or refreshing the page.

Bonus: Add a Custom Widget via Blogger Layout

If you want to manually add widgets via Blogger’s built-in layout settings:

Navigate to Layout in the Blogger Dashboard.
Find the newly added custom-widget section.
Click Add a Gadget.
Select HTML/JavaScript and enter your custom content.
Click Save and check your blog.

This method allows you to update your widget content without modifying the theme’s HTML code.

Conclusion

Adding a custom widget section in Blogger can improve your blog’s design and functionality. By following these steps, you can create a personalized section to showcase promotions, advertisements, or any other custom content. Don’t forget to style your widget with CSS to ensure it matches your blog’s overall design.

Have any questions or need further customization? Let us know in the comments! 🚀