[BLOGGER] Tạo Nút Tải Xuống Hiển Thị Quảng Cáo

Xin chào mọi người, cũng đã khuya rồi, chắc mọi người cũng ngủ rồi. Hi thời gian này mình mới bắt đầu vào công việc nên đăng bài hơi muộn chút.

Qua bài viết này mình sẽ chia sẽ cho anh em bạn bè một tiện ích khá hay, đó là việc hiẻn thị quảng cáo ở bàng mục tải xuống trên website/blog của mọi người.

Chúng ta bắt đầu nhé.

Cách tạo nút tải xuống và hiển thị hộp quảng cáo Google AdSense, hoặc là nhiều trang quảng cáo khác.
1.Đăng nhập vào blogger.com.

2. Tìm mã </style> trong Chủ đề > Chỉnh sửa HTML.

3. chép và dán mã bên dưới trước mã </style> hoặc ]]></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;
}

Bạn có thể thay đổi màu sắc, kích thước và giao diện của kiểu trên tùy theo ý muốn.
4. Sao chép và dán mã bên dưới và đặt nó phía trên mã </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. Nếu bạn đã cài đặt mã trên trong Theme > Edit HTML, hãy lưu theme của bạn.

6. Thêm mã HTML bên dưới vào bài đăng trên tab HTML (không phải soạn thảo) để hiển thị hộp bật lên Tải xuống.

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

Đảm bảo thêm dòng mới không sử dụng thẻ <br> nhưng nhấn "Enter" để thêm dòng mới.

Chúc mọi người thành công với tiện ích này, để tăng thêm thu nhập từ quảng cáo trên website/blog của các bạn nhé.

DEMO POPUP ADS DOWNLOAD