Skip to main content
Blogger Byte

follow us

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.

If you want to be buddy donors please contact admin via Whatsapp .Proceeds from donations will be used to extend the domain bloggerbyte.net. Thank you

You Might Also Like :

Comment Policy : Please write your comments that match the topic of this page's posts. Comments that contain links will not be displayed until they are approved.
Open Comments