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

MD M Nauman Sunday, 30 April 2017 0 comments
How To Add Floating Rectangular Ads widget Center of Blogger Blog?



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

    What is Floating Rectangular Ads widget?

    Floating Rectangular Ads widget Float on the Site Even if you scroll it will be in its fixed position. Visitors 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 centered the widget so that it should display on the middle of the Website or Blog.   

    Why To Use Floating Rectangular Ads widget ?

    Floating Rectangular Ads widget is Good When you want Good Exposure to your Ads. This Widget Float at the Center of the Screen And it will not close till someone click on the close widget button hence there is a maximum possibility of Ads getting clicked. 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 Float 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.

    Best Uses Of Floating Rectangular Ads widget: 

    1. Ad Size Like 300*250px or 336*280px or Ads Sizes similar to this can be added.
    2. You can Add Subscription Widget instead of ads in this widget
    3. You can Add Facebook Like Box, Twitter Follow Button or Google-plus  Followers Box instead of Ads in this widget.
    4. You can Also Add Featured post or Important Notice instead of Ads in this widget.

    Let Start Adding Floating Rectangular Ads widget Center of Blogger Blog?:

    Installing The Widget in the Blog:

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


    Blogger Layout

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


    Add a Gadget


    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{
            max-width: 400px;
            max-height: 400px;
            position: fixed;
            z-index: 98765;
            background: rgb(251,251,251);
            top: 50%;
            left: 50%;
            margin-left: -200px;
            margin-top: -200px;
            box-sizing: border-box;
            box-shadow:0 0 3px rgba(0,0,0,0.2);
        }    
        
        .tw_float_ads_close{
            position: relative;
           box-sizing: border-box;
          padding: 35px 20px 30px 20px;
        }
        
     .tw_float_ads_close #tw_close_button
    {
       font-size: 25px; 
        color: #00aecd;
        position: absolute;
        top: 0px;
        right: 0px;
        display: inline-block;
    }
        
    #tw_close_button{
            cursor:pointer;
    }

    #TW_credits{
        font-size: 25px; 
        color: #000;
        position: absolute;
        bottom: 2px;
        right: 2px;
        display: inline-block;
        text-shadow:0 0 3px rgba(0,0,0,0.2);
        text-decoration: none!important;
        }
        

    </style>

    <div class='tw_float_ads_main_Wrap' id='tw_float_ads_main_Wrap'>
        <div class='tw_float_ads_close'>
           
           <span id='tw_close_button' style='float: right'>
               
               <i id='TW_Close_Button' class="fa fa-window-close-o" aria-hidden="true" title='close the Advertisment'></i>
               
           </span>
           
           <div>
               
    <!-- Your Advertisement Code Here -->
               
           </div>

       <span id='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>
        
        <div style='clear:right'></div>
        
    </div>


    <script type="text/javascript">

    var tw_closeButton = document.getElementById('tw_close_button')

    tw_closeButton.onclick = function(){
        
      document.getElementById("tw_float_ads_main_Wrap").style.display = 'none'; 

        
    }

    </script>

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

    Customization:

    • The <!-- Your Advertisement Code Here --> 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 Maximum Width and Height of the Ads Widget If you want to add the larger ads then increase the width and height so that the widget should not break.

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


      Conclusion:

      Now We Know How to Add Floating Ads But Use 300*250 Or 336*280px or ads larger then this can be annoying for the viewers. But if you want to use large Ads Then after customization you can achieve this or if you don't want to do your hands dirty by touching the code then contact us we will help you. Again we are stressing Adsense Publishers Don't use this Floating Ads.

      That's It Thanks For Following our Tutorial '' How To Add Floating Rectangular Ads widget Center of Blogger Blog? '' 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.




      Labels:

      Hello MD M Nauman is a passionate Web Designer and write Reviews on Games and Software. He love blogging, Designing Blogger templates, Web Developing.

      Google+ Pinterest