Cara Aman Membuat Tombol Download Popup dan Menampilkan Ads Google AdSense di Bawahnya

Tombol Download Popup adalah suatu tampilan melayang jika ditekan yang dimana terdapat fungsi Tombol perintah untuk menuju ke halaman yang telah ditentukan.

Apakah Tombol Download Popup bisa di sertai Iklan Google AdSense?

Jawabanya sangat bisa, karena Tombol Download Popup adalah sebuah script yang dijalankan pada html yang telah di setting sebelumnya.

Yang perlu Anda lakukan untuk membuat Tombol Download Popup dan Menampilkan Ads Google AdSense sebagai berikut:

Cara Aman Membuat Tombol Download Popup dan Menampilkan Ads Google AdSense di Bawahnya

1. Login ke blogger.com.
2. Cari kode </style> pada Tema > Edit HTML.
3. Copas (copy-paste) kode di bawah ini sebelum kode </style>.

/* Popup container - can be anything you want */
.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;
}

Anda dapat merubah warna, ukuran, dan tampilan style di atas sesuai keinginan.

4. Copas (copy-paste) kode di bawah ini dan letakkan di atas kode </body>.

// Ketika pengguna mengklik div, Popup muncul
function myFunction() {
  var popup = document.getElementById("myPopup");
  popup.classList.toggle("show");
}

5. Jika sudah memasang kode di atas pada Tema > Edit HTML, sekarang simpan tema Anda.
6. Sekarang untuk menerapkan kode di atas, tambahkan kode HTML di bawah ini di dalam postingan pada tab HTML (bukan compose).

<div class="popup" onclick="myFunction()"><button class="btn">Download</button>
<span class="popuptext" id="myPopup"><a href="s"><button class="btn red">Klik Disini</button></a>
Tempel Script Iklan Disini</span>
</div>

Pastikan untuk menambah Baris baru tidak menggunakan tag <br>, melainkan Tekan "Enter" untuk baris baru.

Result:Press

Cobalah kreasikan sendiri di sini Tryit Editor

Related Search Pages:

• Kebijakan penempatan iklan - Bantuan AdSense - Google Support
• Cara Aman Membuat Tombol Download Popup dan Menampilkan ...
• Cara Memasang Iklan PopUp Adsense di Blogger - Blog Bisnis Online ...
• Cara Memasang Iklan Google AdSense Auto Ads [Terbaru]
• Trik Earning Adsense Secret V.1 - Indonesia Publisher