HOW TO ADD FLOATING SKYSCRAPPER AD WIDGET ON BLOGGER

TECHWISE

                   Skyscrapper ads are the large vertical banner ads that are available in different sizes.

• Large Skyscrapper : 300 x 600px
• Portrait : 300 x 1050px
• Wide Skyscrapper : 160 x 600px
• Skyscrapper : 120 x 600px

Floating Skyscrapper Ads float on the site even if you scroll. It will be in its filled position we have added a close button so that if users want to close the Advertisements. This widget is similar to pop up box but it is coded usig HTML And CSS.

ADVANTAGES OF FLOATING SKYSCRAPPER AD WIDGET

• Its boost CPM Ads revenue
• The Ads is left and right
• The Widget will save more space for Ads

Note - If you a Adsense publisher don't add this widget because adding this widget can violate adsense policy.

HOW TO ADD THE WIDGET TO YOUR BLOG

• Log it to Blogger account
• Go to your dashboard
• Click on layout
• Click on "Add a Gadget" choose "HTML/JAVASCRIPT"
• Copy this code and paste in the box of the "HTML/JAVASRIPT"

<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: 160px;
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: 12px;'><a style='text-decoration: none!important; color: #000;' href="http://www.trendingwidgets.com/2017/04/how-to-add-floating-rectangular-ads.html">Get This 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: 12px;'><a style='text-decoration: none!important; color: #000;' href="http://www.trendingwidgets.com/2017/04/how-to-add-floating-rectangular-ads.html">Get This Widget</a></span>
<div style='clear:right'></div></div>

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

Customizations

• The <!-- Your Advertisement Code Here -->  Replace the orange text with the Ad code

• The yellow highlighted text if you want to add the larger ads then increase the width.

All done save the Gadget and view it.

That's all