Code chèn quảng cáo ở góc trái và góc phải màn hình

Bạn đang tìm code chèn quảng vào góc trái và góc phải màn hình thì đây là bài viết dành cho bạn. Hãy theo dõi bài viết để xem Code Pro đã chèn quảng cáo vào góc trái, góc phải như thế nào nhé!

Code chèn quảng cáo là gì?

Hiểu đơn giản thì nó là một đoạn code nhằm cố định hoặc tạo hiệu ứng chuyển động cho một đoạn mã quảng cáo hoặc một banner. Có rất nhiều code chèn quảng cáo khác nhau, mỗi code được sử dụng vào một vị trí hoặc mục đích riêng. Ở bài viết này, Code Pro sẽ chia sẻ cho các bạn đoạn code hiển thị quảng cáo dạng banner ở góc dưới bên trái và bên phải màn hình!

Domo code chèn quảng cáo banner

Code chèn quảng cáo banner

Quảng cáo banner thường cố định một hình ảnh hoặc video, vì vậy khi nó xuất hiện nhiều lần sẽ gây nhàm chán cho người xem. Để khắc phục điều này Code Pro đã viết một đoạn code random hình ảnh, tức là sau mỗi lần tải lại trang hình ảnh banner sẽ thay đổi (không giới hạn số banner).

Demo code chèn quảng cáo ở góc trái và góc phải màn hình

Code chèn quảng cáo ở góc trái

Sao chép đoạn code dưới đây:


<!-- Start quảng cáo góc trái màn hình by Code Pro -->
<style>#codepro-ads-bottom-left-corner{position:fixed;bottom:0;left:0;z-index:9999}.exit-codepro-ads-bottom-left-corner{position:fixed;display:flex;align-items:center;justify-content:center;background:linear-gradient(179.83deg,rgb(255,75,91) 0.15%,rgb(255,148,158) 92.02%);height:30px;width:30px;z-index:100;border-radius:100%;bottom:230px;left:230px}.exit-codepro-ads-bottom-left-corner i{font-size:15px;margin:0;color:#fff}@media(max-width:1024px){#codepro-ads-bottom-left-corner{display:none!important}}.codepro-ads-bottom-left-corner-hover:hover{opacity:.9}#codepro-setAds-left{width:250px;height:250px;border-radius:10px;background-position:center center;background-size:cover;background-repeat:no-repeat}</style>
<div id='codepro-ads-bottom-left-corner'>
    <div class='exit-codepro-ads-bottom-left-corner'>
        <a href='javascript:;' onclick='hideitem()'><i aria-hidden='true' class='fa fa-times'/></a>
    </div>
    <a href='https://www.code.pro.vn/' target='_blank' title='Chia sẻ kiến thức, tư duy sáng tạo!'>
        <div class='codepro-ads-bottom-left-corner-hover' id='codepro-setAds-left'/>
    </a>
</div>
<script language='JavaScript'>
    function hideitem() {
        document.getElementById("codepro-ads-bottom-left-corner").style.display = "none";
    }
</script>
<script>
    //<![CDATA[
        var random = Math.floor(Math.random() * 4) + 0;
        var imagearray = [
            "url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEijsfU7POD-c6pAKj95soiZN7sQqGOhGqvdh9f9QfQhuJqtiSsX4IerKhVrRTl30HhsTAuMdARpysV2WPi5oqD48kEj4l6eICpSO4EHVMc0Uxowr14j1L8SuFp3fxsC1dKbPPLo9E7wLx/s0/demo-codepro-ads-bottom-1.png')",
            "url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjobd_peUQ-ZBys4Is4c4m1KRDv5_wx1et7YL2Lmo7IL84MQY_S9JQ7seugb-7pgE0rjSO0bhBZBwdM_QXInIevYqM0S4LCNeVullHQD4JkLpBSvTqWnvis-w94yPxb8ummWs6nsSDNaIYJ/s0/demo-codepro-ads-bottom-2.png')",
            "url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVFt7UZEaLlD-pRlrW51lYkeGq5agP_6yHpPY_Vmduvi0KmBJN-Aqvg7rjrjXycKiy7pW_ScjP3VdFuKmMPYAVf0pXhg2gqbJNELIE8ocJJVtmvgRqryKVLZJBxZbFhej7ycTIHRMsIZh3/s0/demo-codepro-ads-bottom-3.png')",
            "url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLmvF9d3dMh3mgoojoSisRK2hZFWGoFZXnt35UbqEb4mtTdsz-kSDNs6MjcurNXOU0ZfIEtwBwJpktiKhWTk4xF7UQolh0BLW8YAeqZ-ZIcRZmUWjMTpZ9TkZ0rPGgSQEaHQCm7ulsbhNo/s0/demo-codepro-ads-bottom-4.png')"
        ];
        document.getElementById("codepro-setAds-left").style.backgroundImage = imagearray[random];
    //]]>
</script>
<!-- End quảng cáo góc trái màn hình by Code Pro -->

Thay link ảnh banner
Thêm số ảnh tuỳ thích
Dán toàn bộ code đã chỉnh sửa vào trước thẻ </body>
Lưu lại là xong!

Code chèn quảng cáo ở góc phải

Sao chép đoạn code dưới đây:


<!-- Start quảng cáo góc phải màn hình by Code Pro -->
<style>#codepro-ads-bottom-right-corner{position:fixed;bottom:0;right:0;z-index:9999}.exit-codepro-ads-bottom-right-corner{position:fixed;display:flex;align-items:center;justify-content:center;background:linear-gradient(179.83deg,rgb(255,75,91) 0.15%,rgb(255,148,158) 92.02%);height:30px;width:30px;z-index:100;border-radius:100%;bottom:230px;right:230px}.exit-codepro-ads-bottom-right-corner i{font-size:15px;margin:0;color:#fff}@media(max-width:1024px){#codepro-ads-bottom-right-corner{display:none!important}}.codepro-ads-bottom-right-corner-hover:hover{opacity:.9}#codepro-setAds-right{width:250px;height:250px;border-radius:10px;background-position:center center;background-size:cover;background-repeat:no-repeat}</style>
<div id='codepro-ads-bottom-right-corner'>
    <div class='exit-codepro-ads-bottom-right-corner'>
        <a href='javascript:;' onclick='hideitem()'><i aria-hidden='true' class='fa fa-times'/></a>
    </div>
    <a href='https://www.code.pro.vn/' target='_blank' title='Chia sẻ kiến thức, tư duy sáng tạo!'>
        <div class='codepro-ads-bottom-right-corner-hover' id='codepro-setAds-right'/>
    </a>
</div>
<script language='JavaScript'>
    function hideitem() {
        document.getElementById("codepro-ads-bottom-right-corner").style.display = "none";
    }
</script>
<script>
    //<![CDATA[
        var random = Math.floor(Math.random() * 4) + 0;
        var imagearray = [
            "url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEijsfU7POD-c6pAKj95soiZN7sQqGOhGqvdh9f9QfQhuJqtiSsX4IerKhVrRTl30HhsTAuMdARpysV2WPi5oqD48kEj4l6eICpSO4EHVMc0Uxowr14j1L8SuFp3fxsC1dKbPPLo9E7wLx/s0/demo-codepro-ads-bottom-1.png')",
            "url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjobd_peUQ-ZBys4Is4c4m1KRDv5_wx1et7YL2Lmo7IL84MQY_S9JQ7seugb-7pgE0rjSO0bhBZBwdM_QXInIevYqM0S4LCNeVullHQD4JkLpBSvTqWnvis-w94yPxb8ummWs6nsSDNaIYJ/s0/demo-codepro-ads-bottom-2.png')",
            "url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVFt7UZEaLlD-pRlrW51lYkeGq5agP_6yHpPY_Vmduvi0KmBJN-Aqvg7rjrjXycKiy7pW_ScjP3VdFuKmMPYAVf0pXhg2gqbJNELIE8ocJJVtmvgRqryKVLZJBxZbFhej7ycTIHRMsIZh3/s0/demo-codepro-ads-bottom-3.png')",
            "url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLmvF9d3dMh3mgoojoSisRK2hZFWGoFZXnt35UbqEb4mtTdsz-kSDNs6MjcurNXOU0ZfIEtwBwJpktiKhWTk4xF7UQolh0BLW8YAeqZ-ZIcRZmUWjMTpZ9TkZ0rPGgSQEaHQCm7ulsbhNo/s0/demo-codepro-ads-bottom-4.png')"
        ];
        document.getElementById("codepro-setAds-right").style.backgroundImage = imagearray[random];
    //]]>
</script>
<!-- End quảng cáo góc phải màn hình by Code Pro -->

Thay link ảnh banner
Thêm số ảnh tuỳ thích
Dán toàn bộ code đã chỉnh sửa vào trước thẻ </body>
Lưu lại là xong!

Lưu ý: Quảng cáo sẽ không hoạt động trên thiết bị di động mà chỉ hoạt động trên máy tính và màn hình kích thước lớn!

Lời kết

Trên đây là toàn bộ code và hướng dẫn chèn quảng cáo ở góc trái và góc phải màn hình. Chúc các bạn thành công và có một ngày làm việc thật hiệu quả. Xin chào và hẹn gặp lại!