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

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

4. Copy-paste the code below and place it above the code </body>.

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

5. If you have installed the code above in Theme> Edit HTML, now save your theme.

6. 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.