in , , ,

How To Add Download Button With Adsense Code for Blogger

,Keyword, ,are blogger stats accurate, ,blogger visitor tracking, ,how to check number of views on blogger, ,blog view, ,hit counter, ,how to add total page view counter on blogger, ,mybloggeraide, ,blogger statcounter, ,download counter plugin blogger, ,visitor counter html code, ,blogger stats explained, ,visitor counter for blogger, ,what is counter blogging, ,free blog counters, ,how to check blog traffic,,How To Add Download Button With Adsense Code for Blogger,

Download Popup Button is a floating display when pressed which has a command button function to go to the specified page.

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

HOW TO ACCESS THE FRAMEWORK?

  1. Go To Blogger.com 
  2.  Select Your Blog.
  3.  Select Theme >>  Always Remember to Backup first!!!
  4. Then click on the arrow near ‘Customize’ and click on Edit HTML
  5. Now search for “/ b : skin” then Copy and Paste the CSS code below just above it.

/* Popup download button by mashbyte */

.popup {
position: relative;
left: -20px;
top: 300px;
display: absolute;
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: 350px;
background-color: #0DD3AF;
color: #fff;
text-align: center;
border-radius: 2px;
padding: 20px 0;
position: absolute;
top: 300%
z-index: 1;
bottom: 125%;
left: 230px;
margin-left: -80px;
}

/* Popup arrow */
.popup .popuptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -25px;
border-width: 15px;
border-style: solid;
border-color: #777 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: #EE1A9E; /* Pink */
border: none;
color: white;
padding: 6px 16px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 36px;
margin: 2px;
cursor: pointer;
border-radius: 8px;
}
.btn:hover {
background-color: blue;
}
.red {
background-color: yellow;
}
.red:hover {
background-color: cyan;
}

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:

I hope you find this useful, but if in any case you find it difficult to apply it to your site, then leave a comment below for help and a quick reply, or use our Contact page for a personal assistant.

Note: You have the right to share this with anyone of your choice or on your blog….but Don’t forget to link back to MashByte.com…. Read our ToC  or our DMCA here to understand how our Terms very well.

Remember to Subscribe and  share……. 

What do you think?

Written by Kwabena

Kwabena is a tech freak, passionate about every new gadget and technology that comes his way. Always searching, always curios, he managed to gather an astounding experience that is very useful in his Info-Tech career.....

Comments

Post View Counter for Blogger 100% Working

How to make a Beautiful Mouse Cursor for Blog.