Do you have a low CTR(Click through rate)? And you wonder how people earn money from Adsense when I have a low CTR. If yes then you are at right place. Some people here may be new so I am going to explain what CTR is. CTR means Click through rate which refers to how many times your visitors are clicking your ads.
Its not just a problem with Adsense only but any network ads get low clicks the reason is wrong area of ad placement, uninteresting ads etc. So in this post I am going to tell you a new method that will increase your ads viewability and hence CTR.
To increase viewability of ads you need to place ads where your visitor will 100% see it. So what do you think where visitor see most of the time? The answer is obvious, inside the post because its what he has visited your blog for. So in this post I am going to share a CSS trick that will show you ads in the post in a form of scrolling ad. It uses position:static property of CSS which lets us to fix an item inside a box. So your ad will float in between post in a specific area. So when a visitor is scrolling he will find an area where there is nothing but an ad scrolling with him, so it is a sort of Ad break which brings full concentration of your visitor on that ad.
Keep in mind that this ad break trick will increase ctr mainly for phone visitors because this ad break ad scroller works best for small screens. But in works for desktop too.
Follow below steps to add Adsense ad break in post.
Note: Its not just for Google Adsense you can use it for other Ad networks too.
Step 1 Go to Blogger > Posts > Edit post in which you want to add Ad scroller.
Step 2 Switch to HTML mode of post.
Step 3 Copy below HTML code and CSS into your post where you want the scroller to appear.
<div class="container">
<div class="item pirate">
<center>
AD CODE HERE
</center>
</div>
</div>
<style>
.container::after, .float-container::after {
clear: both;
content: '';
display: table;
}
.container {
display: flex;
justify-content: center;
align-items: flex-start;
height: 800px;
}
.pirate {
position: -webkit-sticky;
position: sticky;
top: 0px;
margin-top: 10px;
}
</style>
Step 4 Replace Ad code here with your ad code.
Step 5 Now publish your post to see it live.
Note: If your ad scroller is not working then it means one of your parent div such as body or post or something which is containing ad scroller has overflow: hidden or overflow:visible or some css which contains overflow property so you have to remove it to make this code work.
Modifications:
Here are some edits you can make in the code if you want.
1. Height of the ad break:
.container {
display: flex;
justify-content: center;
align-items: flex-start;
height: 800px;
}
2. Background Color Of Ad Break:
Put backgrouund: color code; like this:
.container {
display: flex;
justify-content: center;
align-items: flex-start;
height: 800px;
backgrouund: #000000;
}
3. Ad Alignment:
.container {
display: flex;
justify-content: center;
align-items: flex-start;
height: 800px;
}
Replace center with left or right.
4. Ad Position:
.pirate {
position: -webkit-sticky;
position: sticky;
top: 0px;
margin-top: 10px;
}
It will decide where the ad will stick at the top, suppose if you have a sticky menu so you don't want it to come over the ad so you stick the ad accordingly.
If you have any question or suggestions, kindly leave a comment below. Thanks for visiting Bloggersbay.
Rate This Article
Thanks for reading: Google Adsense scrolling Ad break inside Posts, Stay tune to get latest Blogging Tips.