Know the Motherboard Parts and Functions

If you’re using Google AdSense to monetise your Blogger (Blogspot) blog, you might want to ensure that your ads are perfectly centred for a cleaner and more professional look. This guide will walk you through the process of centring your AdSense ads without the need to edit each ad script individually.

Step 1: Access Your Blogger Dashboard

1. Sign In: Start by signing in to your Blogger account.
2. Select Your Blog: From the dashboard, select the blog where you want to centre your ads.

Step 2: Adding CSS to Your Blogger Template

CSS (Cascading Style Sheets) is used to control the layout and appearance of your website. By adding a small snippet of CSS, you can ensure that all your AdSense ads are centred.

1. Navigate to the Theme Section:

   • On the left sidebar, click on "Theme".

2. Customise Your Theme:

   • Click the "Customise" button to open the theme customisation panel.

3. Add CSS:

• In the customisation panel, click on "Advanced".
• Scroll down and select "Add CSS".
• Copy and paste the following CSS code into the box:

ins.adsbygoogle {
    display: block !important;
    margin: 0 auto !important;
    text-align: center !important;
}

• This CSS rule will target all AdSense ads (ins.adsbygoogle) and apply the styles to centre them.
• Click "Apply to Blog" to save the changes.

Step 3: Adding JavaScript to Your Blogger Template

To ensure that the centring styles are dynamically applied to all AdSense ads, you can add a small JavaScript snippet to your template.

1. Go Back to the Blogger Dashboard:

   • After adding the CSS, return to the dashboard if you are not already there.

2. Navigate to the Theme Section Again:

   • Click on "Theme" in the left sidebar.

3. Edit the HTML of Your Theme:

   • Click on the dropdown arrow next to the "Customise" button and select "Edit HTML".

4. Add the JavaScript:

   • Scroll down through the HTML code to find the closing </body> tag.
   • Just before the closing </body> tag, add the following script:

<script>
    window.onload = function() {
        var ads = document.getElementsByClassName('adsbygoogle');
        for (var i = 0; i < ads.length; i++) {
            ads[i].style.display = 'block';
            ads[i].style.margin = '0 auto';
            ads[i].style.textAlign = 'center';
        }
    };
</script>

5. Save the Changes: Click on the "Save theme" button to apply the changes to your blog.

Summary

By following these steps, you ensure that all your AdSense ads are centred on your Blogger blog without needing to manually edit each ad script. Here's a quick recap of what we did:

1. Added CSS: Applied styles to centre the AdSense ads using CSS.
2. Added JavaScript: Ensured that the centring styles are dynamically applied to all ads.

With these adjustments, your blog will have a more polished and aesthetically pleasing look, enhancing the user experience and potentially improving your ad performance.

Related Posts