Create Sticky Ad Bottom On Blogger - UNPLUG.DOC

What is a fixed ad?

A sticky ad is a sticky ad that remains visible in exactly the same position, regardless of whether the user scrolls through the content. These are generally used in the header, footer, left / right bar, left and right sidebar.

Fixed ad types

Fixed ads are divided into two categories. E.g. Horizontal Vertical.

Horizontal ads are generally placed in the header and footer of a website and generally extend from one end to the other horizontally.

The anchor ads that we get in the "automatic ads" section of AdSense are an example of a horizontal sticky ad.

Vertical stickies are usually placed in the sidebar of a website, and in some cases outside of the sidebar. These are designed in such a way that they will stick to the sidebar even if the user scrolls down the page.

Benefits of using sticky ads on Blogger

Sticky ads are a great way to increase your AdSense income by increasing the overall click-through rate [CTR] of your website, as well as improving your CPM value over time.

Below are some statistical data that corroborate the previous point.

40-60% higher CTR - Compared to normal display ads

Improve visibility: up to 200% more visible than other formats in the same locations.

30% to 70% higher CPM: Advertisers pay more for these ads.

We will also discuss the guidelines for placing sticky ads on Blogger, but before that, let's understand how you can add sticky footer ads on your website.

Before proceeding with the steps below, be sure to back up your theme so that if you do something wrong, you can easily restore your website to its original position by uploading the backup file.

HOW TO ADD ON BLOGGER :

1. On the Blogger toolbar, click Topic.
2. Click the down arrow icon ᐁ next to the customize button.
3. Click Edit HTML, you will be redirected to the edit page.
4. Now find the code ]]></b:skin> and paste the following CSS codes just above it.
5. Copy the below HTML code and replace the two codes that you copied above. 
6. Now paste the code just above the </body> tag of your theme & save it. FOOTER CODE

HTML STTCKY FOOTER CODE

<div class='sticky-ads' id='sticky-ads'>
<div class='sticky-ads-close' onclick='document.getElementById(&quot;sticky-ads&quot;).style.display=&quot;none&quot;'><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'/></svg></div>
<div class='sticky-ads-content'>

<ins class="adsbygoogle"
     style="display:inline-block;height:70px;width:100%;line-height:70px;"
     data-ad-client="ca-pub-xxxxxxxxxxx"
     data-ad-slot="xxxxxxxxxxx"></ins><script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

</div>
</div>

CSS CODE

.sticky-ads{ 
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-ads-close { 
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-ads .sticky-ads-close svg { width: 22px; height: 22px; fill: #000; } .sticky-ads .sticky-ads-content { overflow: hidden; display: block; position: relative; height: 70px; width: 100%; margin-right: 10px; margin-left: 10px; }

This Blogger Website Is Provide You Blogger Template Documentation And Widget And Theme Editting Documentation So Subscribe And Follow For Up To Date With New Post