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áoGoogle 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é.
Comments
CHÀO MỌI NGƯỜI, HIỆN TẠI DOMAIN HUNG.PRO.VN ĐANG BỊ SỰ CỐ LỖI KHÔNG THỂ INDEX HAY KIỂM TRA ĐƯỢC THÔNG TIN NÊN MÌNH ĐÃ XÓA BỎ TÊN MIÊN ĐÓ RA KHỎI BLOG VÀ SỮ DỤNG DOMAIN MẶC ĐỊNH, MONG MỌI NGƯỜI BỎ QUA CHO MINH SỰ BẤT TIỆN NÀY, CẢM ƠN MỌI NGƯỜI
ReplyDelete