Buy this Amazing Template : PLUS UI Demo! Buy Now!

How to Create a Download Popup Button and Display Google AdSense Ads Box

How to Create a Download Popup Button and Display Google AdSense Ads Box
BloggerByte - Download Popup Button is a floating display when pressed which has a command button function to go to the specified page.

Can the Download Popup Button be included with Google AdSense Ads?

The answer is very easy - Yes !!, because the Download Popup Button is a script that runs on html that has been set before.

All you need to do, make an AdSense Account to show google ads with the Download Popup Button as follows:

How to Create a Download Popup Button and Display Google AdSense Ads Box

  1. Login to blogger.com.
  2. Look for the code </style> in Themes> Edit HTML.
  3. Copy and paste the code below before the code </style> or ]]></b:skin>.
  4. /* Popup download button by bloggerbyte.net */
    .popup {
      position: relative;
      display: inline-block;
      cursor: pointer;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
    }
    /* The actual popup */
    .popup .popuptext {
      visibility: hidden;
      width: 160px;
      background-color: #555;
      color: #fff;
      text-align: center;
      border-radius: 6px;
      padding: 8px 0;
      position: absolute;
      z-index: 1;
      bottom: 125%;
      left: 50%;
      margin-left: -80px;
    }
    /* Popup arrow */
    .popup .popuptext::after {
      content: "";
      position: absolute;
      top: 100%;
      left: 50%;
      margin-left: -5px;
      border-width: 5px;
      border-style: solid;
      border-color: #555 transparent transparent transparent;
    }
    /* Toggle this class - hide and show the popup */
    .popup .show {
      visibility: visible;
      -webkit-animation: fadeIn 1s;
      animation: fadeIn 1s;
    }
    /* Add animation (fade in the popup) */
    @-webkit-keyframes fadeIn {
      from {opacity: 0;}
      to {opacity: 1;}
    }
    @keyframes fadeIn {
      from {opacity: 0;}
      to {opacity:1 ;}
    }
    /* Style button */
    .btn {
      background-color: #4CAF50; /* Green */
      border: none;
      color: white;
      padding: 6px 16px;
      text-align: center;
      text-decoration: none;
      display: inline-block;
      font-size: 16px;
      margin: 2px;
      cursor: pointer;
      border-radius: 4px;
    }
    .btn:hover {
      background-color: blue;
    }
    .red {
      background-color: red;
    }
    .red:hover {
      background-color: blue;
    }

    You can change the color, size, and appearance of the style above as desired.

  5. Copy-paste the code below and place it above the code </body>.
  6. <script type='text/javascript'>
    // When the user clicks on the div, a Popup appears
    function myFunction() {
      var popup = document.getElementById("myPopup");
      popup.classList.toggle("show");
    }
    <script>
  7. If you have installed the code above in Theme> Edit HTML, now save your theme.
  8. Add the HTML code below in the post on the HTML tab (not compose) to Display Download box popup.

<div class="popup" onclick="myFunction()"><button class="btn">Download</button>
<span class="popuptext" id="myPopup"><a href="Link URL"><button class="btn red">Click here</button></a>
Paste Ad Script Here</span>
</div>

Make sure to add newlines not using the <br> tag, but press "Enter" for new lines.

To see Demo please click below Demo button:

Demo

Thanks for reading the post "How to Create a Download Popup Button and Display Google AdSense Ads Box" if you like, please share with others.

About the Author

“Hustle in silence and let your success make the noise.”

1 comment

  1. Nice article sir 👍👍👍

    https://www.1topjob.xyz
Check the "Notify me" box to get an email notification if someone replies to a comment.
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.