How To Add 2 Floating Skyscraper Ads on Left and Right Side?

How To Add 2 Floating Skyscraper Ads Widget on Left and Right Side?

How To Add Floating Rectangular Ads widget Center of Blogger Blog?

What are Floating Skyscraper Ads?

Floating Skyscraper Ads are the large Vertical Banner Ads Which are available in different sizes Some of the Popular Vertical Banner Sizes are:

Large Skyscraper : 300 x 600px
Portrait : 300 x 1050px
Wide Skyscraper : 160 x 600px
Skyscraper : 120 x 600px

But here we are talking about the Floating Skyscraper Ads Floating Ads Float on the Site Even if you scroll. It will be in its fixed position. We have added a close button so that if users don't want to see the Advertisement they can close this widget by clicking on the close button on the top right section of the widget. This Widget is similar to pop-up box but it is coded using HTML And CSS. Only Little Part of Close button is coded using JavaScript So This Widget will load very fast.

By default we have added 2 Floating Skyscraper Ads Containers so that you can add your Ads Script which will appear left and right side of the blog.

What are the Advantages of Using Floating Skyscraper Ads ?

Floating Ads is a good idea When you want high Exposure to your Ads. As this widget will make your Ads appear above the fold. This ads will save the space in your sites for other important widgets. As they will appear out of the layout. This Ads Float on the Left and Right side of the Screen And it will not close till someone click on the close Advertisement button hence there is a maximum possibility of Ads not getting ignored. If you are using CPM Ads Then You will get Maximum Exposure too.

Why Adsense Publishers Should Stay Away From This Floating Ads ?

But Before Adding This Floating Ads Please Contact your Ad network and ask them if they allow To Add Floating Ads on the site. But if you are Adsense Publisher then please Stay away from adding this widget as this can violate Adsense terms and conditions. So Contact Other Networks Support team if they allow using this widget.

Check This Widget Also: CSS3 Popular Posts Widget with Auto Numbers+hover effect!

Let Start Adding 2 Floating Skyscraper Ads on Left and Right Side:

Installing The Widget in the Blog:

STEP 1: Log in to your Blogger account and Go to your Blogger Dashboard

STEP 2: In The Left Side Bar You will find Layout Section as highlighted in the image above Click on Layout.

STEP 3: Click On "Add a Gadget" As highlighted in the image above.

STEP 4:After Clicking on "Add a Gadget" Choose "HTML/JavaScript" from the list & as highlighted in the image above.

STEP 5: Now Copy This Below Code And Paste it in The Empty Box of the "HTML/JavaScript" Section.

<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'>






</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'>







</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>

That's it Thanks For Following The Tutorial Now Its time For Customization to make it as it made for your site.

Customization:

The  is responsible for your Your Advertisement Code. So Replace this Text in orange color with your Advertisement Script.

The Yellow Highlighted Text is Responsible For Width of the Ads. If you want to add the larger ads then increase the width so that the widget should not break.

STEP 6: All Done Save the Gadget and Check it in your site.

Adsense Publishers Please don't add this Floating Ads. Other Users Please Contact your Ad network Before Placing this Ads.

Conclusion:

Now we have added this Ads But If you are still facing any difficulty in installing this widget in your Blog Please Contact-us or Comment Below. We will help you in installing this widget.

If you want to display only Left Ad or Right Ad Then You just need to delete all the code after

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

You will find this code two times delete after the first one.

That's It Thanks For Following our Tutorial '' How To Add 2 Floating Skyscraper Ads on Left and Right Side? '' Along With us If you found any difficulty Please Comment and Share Your Valuable Opinion. And Stay tuned for More Tutorials Like This and Share this with your friends.