Boost Your Blogger Revenue: Mastering the Art of Bottom Sticky Ads!

Are you looking to incorporate Bottom Sticky Ads into your Blogger platform? To achieve this, follow the subsequent steps meticulously, and enhance the visual appeal of your Blogger blog. Before we dive into the process, let's first grasp the concept of Sticky Ads and their significance.

What are Sticky Ads?

Sticky Ads are fixed advertisements that remain prominently displayed in a fixed position, unaffected by the user's scrolling within the content. They are typically deployed in areas such as the header, footer, left/right sidebars, and left & right sidebars.

Why Do We Need Sticky Ads?

Sticky Ads serve to strategically position and accentuate your advertisements both inside and outside the layout of your website. With Sticky Ads, you can create anchor ads that remain perpetually visible within the browser window. These ads do not move in sync with the user's scrolling.

How to Add Bottom Sticky Ads in Blogger?

Now, let's delve into the process of adding Bottom Sticky Ads in Blogger:

Step 1: Commence by navigating to the Blogger dashboard at Blogger.com.

Step 2: Proceed to the Themes Section and click on the "Edit HTML" button.

Step 3: Copy and paste the following CSS code into your theme:

/* Sticky Ads */
.sticky-button {
    position: fixed;
    bottom: 0;
    right: 20px;
    width: 50px;
    height: 50px;
    border-radius: 50px;
    background-color: #fdd929;
    box-shadow: 0px 4px 12px 0 rgba(9, 32, 76, .05);
    z-index: 20;
    overflow: hidden;
    -webkit-transition: all .2s ease;
    transition: all .2s ease;
    opacity: 0;
    visibility: hidden;
}

.sticky-button.sticky {
    bottom: 20px;
    opacity: 1;
    visibility: visible;
}

.sticky-button > * {
    display: flex;
    align-items: center;
    height: 100%;
}

.sticky-button > * svg {
    margin: auto;
    fill: inherit;
}

.sticky-ad {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    min-height: 70px;
    max-height: 200px;
    padding: 5px 0;
    box-shadow: 0 -6px 18px 0 rgba(9, 32, 76, .1);
    -webkit-transition: all .1s ease-in;
    transition: all .1s ease-in;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fefefe;
    z-index: 20;
}

.sticky-ad .sticky-adClose {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px 0 0;
    position: absolute;
    right: 0;
    top: -30px;
    background-color: #fefefe;
    box-shadow: 0 -6px 18px 0 rgba(9, 32, 76, .08);
}

.sticky-ad .sticky-adClose svg {
    fill: #767676;
}

.sticky-ad .sticky-adContent {
    flex-grow: 1;
    overflow: hidden;
    display: block;
    position: relative;
}

.sticky-adInput:checked + .sticky-ad {
    padding: 0;
    min-height: 0;
}

.sticky-adInput:checked + .sticky-ad .sticky-adContent {
    display: none;
}

Step 4: Paste the provided CSS code above the ]]></b:skin> tag in your Blogger template.

Step 5: Copy and paste the following HTML code:

<!--<b:if cond='data:blog.isMobileRequest == &quot;true&quot;'>-->
<input class='sticky-adInput hidden' id='sticky-adIn' type='checkbox'/>
<div class='sticky-ad' id='sticky-ad'>
    <label class='sticky-adClose' for='sticky-adIn'>
        <svg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'>
            <path d='M278.6 256l68.2-68.2c6.2-6.2 6.2-16.4 0-22.6-6.2-6.2-16.4-6.2-22.6 0L256 233.4l-68.2-68.2c-6.2-6.2-16.4-6.2-22.6 0-3.1 3.1-4.7 7.2-4.7 11.3 0 4.1 1.6 8.2 4.7 11.3l68.2 68.2-68.2 68.2c-3.1 3.1-4.7 7.2-4.7 11.3 0 4.1 1.6 8.2 4.7 11.3 6.2 6.2 16.4 6.2 22.6 0l68.2-68.2 68.2 68.2c6.2 6.2 16.4 6.2 22.6 0 6.2-6.2 6.2-16.4 0-22.6L278.6 256z'></path>
        </svg>
    </label>
    <div class='sticky-adContent'>
        <!--<div class='ads-here' style='display:block;height:60px'/>-->
        <ins class='adsbygoogle' data-ad-client='ca-pub-1234567891234567' data-ad-format='horizontal' data-ad-slot='3466897794' data-full-width-responsive='false' style='display:block;text-align:center'></ins>
        <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
    </div>
</div>
<!--</b:if>-->

Step 6: Paste the HTML code above the </body> tag in your Blogger template.

Step 7: Replace the marked sections with your AdSense Publisher ID and AdSense Ad Slot ID.

Step 8: Finally, save your changes!

In conclusion, you've now learned how to incorporate Bottom Sticky Ads into your Blogger platform. Feel free to share your thoughts on this article in the comments, as your feedback can be invaluable for us to learn and improve.

Next Post Previous Post