Great News! Try our new tool to convert img to amp-img. Try Now!

Friday, March 1, 2019

How to Add Sticky/Fixed Ad in Left or Right Side with CSS

Optimize your AdSense CTR. How to Increase CTR AdSense by Add Sticky Fixed or Float Ad in Blog Left Side qith CSS Only

Increase CTR AdSense by Add Sticky/Floating Ad in Blog Left or Right Side (160X600PX)

Float Ad is one of the most successful ways to increase Ad CTR. Sticky or Fixed is an ad placement where the ad container always follows the page when scroll.

But of course there are risks. If you use AdSense ad units to fill the Ad Float slot. It's possible that your ad could be banned. Because basically, AdSense prohibits the placement of this ad. But in reality, many large websites use this type of advertisement.
For those who still want to try, I will share how to make sticky or Fixed ad slot for AdSense in Left Side of Blog. This method uses CSS position:fixed, without any JavaScript. You can apply it in any CMS, even Blogger. This ad will only show in Desktop mode because I will use @media query.

CSS Float Ad

To create Sticky Fixed ads, you only need a CSS code, without JavaScript. The placement of this ad does not contain the Close button. 

To create a Floating Ad container, copy this CSS:

#FloatAdx {
    right: 50%; /* Change this to switch left or right */
    margin-right: 515px; /* Adjust this value with your Blog width */
    top: 15px;
    position: fixed;
    background: rgba(255, 255, 255, 0.59);
    height: 605px;
    width: 160px;
}

@media only screen and (max-width:1350px) {
    #FloatAdx {
        display: none
    }
}

Note: 
  • Change right:50% becomes left:50% if you want to change the ad to the right side.
  • Change margin-right to margin-left to add the ad to the right side.
  • Adjust value 515px, if the ad piles up with the contents of the main page. Just adjust it yourself.
Langkah selanjutnya, anda hanya perlu memanggil CSS tersebut. Copy kode berikut ini, tempelkan sebelum tag </body>

Next step, you only need to call the CSS. Copy the following code, paste it before </body> tag.
<div id="FloatAdx">
    <!-- Your AdSense Ad Code-->
</div>
* Use only 160X600 ad

Click Save for the finish step.

Demo

See live result in Codepen

This Float Ad does not contain a close button, so the ad will always appear and be seen by Blog visitors. This can increase the Active Viewable number in your AdSense.

Maybe useful :)