How to add Floating Skyscraper Ads widget to Blogger blog

Hello friends welcome to the Techtspot blog, today I will show you how to insert or add the Floating Skyscraper Ads widget in the Blogger blog with pictures.

What is Ads widget?

Ads widget or a gadget are additional space for adding ads and just like adding links, images, short content, social media icons, etc... in empty space in the blog.

What is the Floating Skyscraper Ads widget?

Here first you understand the skyscraper term, it is vertical things (text, image, ad, etc...) which are like Twin towers, but in the case on the internet when we say skyscraper we using in content, images, Ads, etc.. like we write long content to occupy the number one ranking position in a search engine, here we use vertical Ads banner for displaying some ads to earn extra revenue from our blog.

Why we need to add the Floating Skyscraper Ads widget in the blog?

Guys if you make a blog using Blogger and you use the default Blogger theme in your blog then your blog has some left and right side space, now we going to use that space to make some extra money, now we just insert the Skyscraper ads widget in blog both side, you can insert AdSense or Affiliate ads vertical image banner in floating skyscraper ads widget, now let's start.

These are the Following Steps:-

Step 1: First we open the Blogger blog dashboard, now click the Layout option then here find out the place where you add the gadget and click Add a Gadget link.

Step 2: Now we click HTML/JavaScript option.

Step 3: Here we paste the code and click the Save button.

Now here I give floating Skyscraper Ads widget code you just replace the AdSense or Affiliate ads code with the Blue text and you can change the floating skyscraper Ads width and height just by replacing the number in Red text.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />

<style>

*{padding:0px; margin:0px; box-sizing: border-box}

.tw_float_ads_main_Wrap_Both{

        max-width: 300px;

  width: 200px;

  height: 650px;

        position: fixed;

        z-index: 98765;

  background: rgb(251,251,251);

        box-sizing: border-box;

        box-shadow:0 0 3px rgba(0,0,0,0.2);

  bottom:5%;

    }

.tw_float_ads_main_Wrap_first{

        z-index: 98765;

  left: 1%;

    }

    .tw_float_ads_close{

        position: relative;

       box-sizing: border-box;

      padding: 12px 0px;

    }

 .tw_float_ads_close #tw_close_button{

   font-size: 25px; 

    color: #000;

    position: absolute;

    top: 0px;

    right: 0px;

    display: inline-block;

}

#tw_close_button{

        cursor:pointer;

}

.TW_credits{

    color: #000;

    position: absolute;

    bottom: 2px;

    right: 0px;

    display: inline-block;

    text-shadow:0 0 3px rgba(0,0,0,0.2);

    text-decoration: none!important;

 z-index: 99999;

 font-weight: bold;

 font-family: arial, helvtica;

}

</style>

<div class='tw_float_ads_main_Wrap_Both tw_float_ads_main_Wrap_first' id='tw_float_ads_main_Wrap1' style='float: left'>

    <div class='tw_float_ads_close'>   

       <span id='tw_close_button' style='float: right' onclick='document.getElementById("tw_float_ads_main_Wrap1").style.display="none"'>

           <i id='TW_Close_Button' class="fa fa-window-close" aria-hidden="true" title='close the Advertisment'></i>

       </span>

    </div>

       <div class='Ad1 AdBanner' id='Ad1'> 

<!-- Paste your Left Advertisement Code Below this Comment-->

<!-- Your Advertisement Code Here -->

<!--Paste your Left Advertisement Code Above this Comment -->

       </div>

   <span class='TW_credits' style='float: right; font-size: 10px;'><a style='text-decoration: none!important; color: #000;' href="https://techtspot.blogspot.com/2020/02/how-to-add-floating-skyscraper-ads.html">Get Ad Widget</a></span>

    <div style='clear:right'></div>

 </div>

<div style='clear:left'></div>

<div class='tw_float_ads_main_Wrap_Both' id='tw_float_ads_main_Wrap' style='float: right; right:1%; z-index: 98765;' >

    <div class='tw_float_ads_close'> 

     <span id='tw_close_button' style='float: right' class='tw_close_button' onclick='document.getElementById("tw_float_ads_main_Wrap").style.display="none"'>

      <i id='TW_Close_Button' class="fa fa-window-close" aria-hidden="true" title='close the Advertisment'></i>  

     </span>

 </div>

 <div class='Ad2 AdBanner' id='Ad2'>

<!-- Paste your Right Advertisement Code Below this Comment-->

<!-- Your Advertisement Code Here -->

<!--Paste your Right Advertisement Code Above this Comment -->

</div>

   <span class='TW_credits' style='float: right; font-size: 10px;'><a style='text-decoration: none!important; color: #000;' href="https://techtspot.blogspot.com/2020/02/how-to-add-floating-skyscraper-ads.html">Get Ad Widget</a></span>

<div style='clear:right'></div></div>

<div style='clear:both'></div>

Step 4: Now open the Blogger blog to check the results.

Now Visit the - Demo Blog to see the result.

Above I give you my demo blog link, where I enabling floating skyscraper ads, in the Ads widget you can adjust the widget height & width according to your vertical image banner ads, as you see in the first line code where I mention the height & width attribute.

Read More:- 

How to Add Back To Top Button in Blogger blog

How to Add Floating Pop Up Ads to Blogger blog
How to Insert Ads Within Your Post Content
How to Add AdSense Below Post Title in Blogger blog

I hope you enjoy this Post. If any problem comment it.