0:00
Hi guys, welcome to KeyTube blogging and in this video, I will show you how you can add
0:04
a sticky floating ad in your blogger website. So as you can see, when I scroll down the page, these two ads stick to the side of this
0:11
web page and user can easily read the content and user can easily dismiss this ad by clicking
0:18
on the close ad button. And this ad will only show for desktop devices and this ad will not show for mobile devices
0:27
And if I go to the homepage, this ad will not show, but if I open any post page, this
0:32
sticky floating ad will show from the left and right position. So let's check how you can add this type of floating ad in your blogger website
0:43
So to add this type of ad, you need to first create a responsive display ad unit
0:48
So to create this type of ad, let's go to the AdSense dashboard
0:52
And here you need to create a display ad unit, or you can also copy the code from an existing
0:57
display ad unit and make sure to keep the ad unit as responsive
1:02
And after that, you need to copy the code and here you need to copy two sections
1:07
One is publisher ID, this code here, and here you need to copy the data ad slot code
1:13
After copying these two values, you need to go to your blogger dashboard and here under
1:19
the theme section, you need to click on the edit HTML. But before making any changes, make sure to take a backup of your theme
1:26
So in case if you do any mistake, then you can easily restore it by clicking on the restore button
1:32
So let's click on edit HTML here. Now you need to scroll down to the end of the theme code and here you need to search
1:38
for the closing body tag. And after that, you need to paste this sticky floating code
1:45
So here you need to change two values, one is publisher ID and one is data ad slot code
1:51
So this code is for the ad one and there is another code for ad two
1:57
And here also you need to change the publisher ID and data ad slot code
2:01
Now you need to save this theme code and after that, the sticky floating ad will be shown
2:06
in your blogger website. And you can also adjust the margin from the left and right position
2:12
So if I say that, that is 20 pixel margin from the left and right section
2:17
So you can increase that margin by clicking on this margin. So let's change the margin from 20 pixel to something like 35 pixel
2:26
Now let's click on save changes here. Now let's go to the blog post and let me just refresh this page
2:33
And as you can see that the margin is increased to 35 pixel and you can also adjust the position
2:40
from the top. So you can just change this value top 80 pixels
2:44
So you have to adjust the value according to your website layout
2:48
And here I have added top from 80 pixels and I have added the width of the ad code to something
2:53
like 160 pixel and height is 600 pixels. So the ad's height is around 600 pixels
3:01
So you can adjust the width and height of the ad code and the position from the top
3:05
and margin from the left and right position by changing the CSS value here
3:11
And this code will only appear in post and pages and it will not load in homepage
3:17
And if you want to load it in homepage, then you can simply just remove this if condition
3:22
from here and remove the closing if condition, thereby it will also show in the homepage
3:30
And this condition is for desktop only. So this code will only load in desktop devices and will not load in mobile devices
3:38
That's why it is saying data block is mobile request is false
3:42
So this is how the sticky floating ad work in blogger website
3:47
And this is similar to ad like side rail ads that Google Adsense recently introduced
3:53
So I hope you have found this video helpful and successfully added the sticky ad in your
3:58
blogger website. And if you have any doubt regarding this, then you can ask me in the comment section
4:03
and make sure to hit the like button
