Code đặt quảng cáo google khi click phải vào hình trên website

Hôm nay hơi ít rảnh. Tôi làm cái code show ảnh và hiển thị quảng cáo google khi click phải chuột vào hình trên website cho các bạn có cùng nhu cầu sử dụng với mình nè. Để dễ hiểu thêm về cách thức hoạt động các bạn xem video dưới đây nhé!

• Cách làm đơn giản như sau:

Các bạn thực hiện chép cả 3 đoạn mã (html, css, và javascript) tôi đặt ngay bên dưới. Tiếp theo, bạn dán cả 3 đoạn mã vào bất kỳ đâu ở website của mình miễn là nội dung của đoạn mã HTML nằm trong thẻ body là được.

Cuối cùng, bạn lấy đoạn mã quảng cáo từ google rồi đặt ngay bên dưới nội dung html tôi đã đánh dấu bằng chú thích “<!– Đặt code quảng cáo google của bạn ở đây–>“, lưu lại là xong.

Thật đơn giản phải không nào?

Code bạn cần ngay bên dưới đây. Hãy tận dụng nghệ thuật copy – dán đi nào!

1. HTML:

<div id="addsense_Model">
    <div style="text-align: center; height: 75%;">
        <img id="click_image" />
    </div>
    <div style="text-align: center; font-size: 30px;">
        <a id="image_download_link"  target="_blank">TẢI HÌNH VỀ</a>&nbsp;&nbsp;&nbsp;
        <a id="close_addsense_Model">ĐÓNG</a>
    </div>
    <div id="addsense_Code">
        <!-- Đặt code quảng cáo google của bạn ở đây-->
    </div>
</div>

2. CSS:

<style type="text/css">
#addsense_Model{
    position: fixed;
    display: block;
    top: 0;
    background: #000000db;
    width: 100%;
    height: 100%;
    padding: 50px;
    z-index: 500;
}
#click_image{
    
    height: 100%;
    z-index: 501;
}
#addsense_Code{
    text-align: center;
}
#image_download_link, #close_addsense_Model{
    color: white;
}
#image_download_link:hover, #close_addsense_Model:hover{
    color: greenyellow;
    cursor: pointer;
}
</style>

3. Javascript:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $('#addsense_Model').hide();
    $('body').bind("contextmenu",function(e){
        return false;
    });
   $('img').mousedown(function(event) {
        
        switch (event.which) {
            case 1:
                //alert('Left mouse button is pressed');
                
                break;
            case 2:
                //alert('Middle mouse button is pressed');
                break;
            case 3:
                //alert('Right mouse button is pressed');
                //console.log(event.currentTarget.src);
                event.preventDefault();
                $('#click_image').prop('src',event.currentTarget.src);
                $('#image_download_link').prop('href',event.currentTarget.src);
                $('#addsense_Model').show();
                
                break;
            default:
                alert('Nothing');
        }
    });

    $('#close_addsense_Model').click(function(){
        $('#addsense_Model').hide();
    });
});
</script>

Hy vọng hữu ích với bạn!

Nosomovo