Trending

Free Online Tools And Converter By Techguruji66


How to reserve space for ads on the website | Add space for ads

How to reserve space for ads on the website | Add space for ads

You can reserve space for ads by using some codes which I provide you below and by using that code you can reserve white blank space for ads on your website. Inside the code, there is the use of min-width and min-height attributes which can reserve that amount of space on your website but if the browser needs more space and ads needs more space then it will push the layout so, you have to set the size perfect for all browser so it will look and works similarly on both mobile and desktop devices.

{tocify} $title={Table of Contents}

Also, Remember this code is used for only manual ads, not for auto ads. Auto ads only 

How to reserve space for ads or manual ads?

A screen recorder is used to record or capture anything on a computer screen at different fps and at different resolutions. I will tell you the best screen recorder for windows 10 and 11 both free and paid and can be used on different platforms like youtube, communication, etc.

You can reserve space for ads or manual ads by using the given below codes but remember it works for both pc and mobile but sometimes this code does not suitable for any specific place on the website. The below is a sample code on how to use your AdSense ads code in the main code and the Adsense code is a sample code taken from the google Adsense help page. So, remember to change that ads code to your Adsense ads code.

Example On How To Use Code:-

Code Start


<div class='column'>
           <div id='slot-2' style='width: auto; height: 380px;'>

       <br>
        <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234567890123456" crossorigin="anonymous"></script>
<!-- Homepage Leaderboard -->
<ins class="adsbygoogle"
style="display:inline-block;width:728px;height:90px"
data-ad-client="ca-pub-1234567890123456"
data-ad-slot="1234567890"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
      </br>

          </div>
       </div>

Code End

Note:- Remember you have to add your adsense ads code by removing from <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234567890123456" crossorigin="anonymous"></script>....................................</script>

And the Main code is below which is main for reserve space to website for ads or add space for ads.

Main Code Start


<div class='column'>
           <div id='slot-2' style='width: auto; height: 380px;'>

Enter your google Adsense ads code here.

           </div>
</div>

Main Code End

Note:- You have to use the main code and inside the main code you have to add your manual ads code by removing the text "enter your google AdSense code here".


Also, remember you can change the width and height in pixel according to your wish but if you leave width equal to auto then it will automatically detect the webpage size and show ads according to it.

How to use the ads reserving code on the website?

You can use the ads reserving code on the website by the following steps below
  1. To reserve space for ads on the website you have to use the Main Code which is given above and see on "Example code on how to use".
  2. Then use your AdSense code before the closing div tag code </div>.
  3. Set width and height in pixel as your website need or according to your wish.
  4. Add that code to your website in HTML format.
  5. Save the code and see that it takes effect or not.

Do ads reserving codes decrease the CLS (Cumulative Layout Shift) issue on the website?

Yes, you have to use the main code and enter the google Adsense ads code before closing the tag of two "div" and then enter the height and width, and adding height and width can reserve space or white blank space inside your website and you add code start to show ads and by this method, it will reserve space and decrease CLS issue more than you except.

Do ads reserving code slow the website speed?

No, the code for reserving space on the website for ads doesn't slow the website speed but the ads which load on your website may slow your webpage load time in other countries or locations.

Types of Reserve Space For Ads

There are three types of space reservation for ads on a website and they are listed below
  1. Space Reserve with Placeholder
  2. Space Reserve without Placeholder
  3. No Space Reserve
I think you can guess the information from their name but I will explain what are they.

  • Space Reserve with Placeholder: This is just the same as the space reservation but if you reserve space for ads on a website with a placeholder then it shows some text or color until the ads load. It is basically done by using CSS to decorate the space.
  • Space Reserve without Placeholder: This is like the space reservation with specified width and height for ads but if you reserve space for ads on a website with this then it doesn't show any text or color until the ads load.
  • No Space Reserve: This means space is not reserved for ads on the website and due to this ads push down the content and increased the CLS issues so, I reccomend you to reserved space for ads on the website.
  • Which is better to use Space reserve with placeholder or Space reserve without placeholder?

    It depends upon you and your way of thinking if you like decorated space then you can use that and if you don't then you can use space reservation for ads without placeholders and you can read all these from here (Reserve space for ads  |  Google Publisher Tag  |  Google Developers).

    The traditional way of ads reservation on the website?

    The traditional way of ads reservation on a website is used for reserving space for ads on the website by providing minimum height and minimum width but the main drawback of this code is the ads can able to increase its size itself if it needs but can't able to minimize.

    For HTML,

    Code1 Start

    <div id="ad-slot" style="min-width: 300px; min-height: 250px;"></div>

    Code1 End

    FOR CSS,

    Code1 Start

    @media screen and (max-width: 960px) {

      #ad-slot {

        min-height: 100px;

      }

    }

    Code1 End

    Both Html and CSS ads reserving code or Code1 is taken from here (Minimize layout shift  |  Google Publisher Tag  |  Google Developers)

    In this code, you just have to change min-width and min-height according to your need but I recommend you to use the above main code.

    People Also Read:- Online Image To WebP Converter | Online Image Converter Free | Image Converter WebP - Techguruji66

    Tech Guruji66

    Hello my name is Arpan Rijal and I am from Nepal. I spend my time on internet since 2 years ago and learn different things and now I am a part-time blogger and youtuber.

    Post a Comment

    Previous Post Next Post