Chia Sẻ Code Popup Quảng Cáo Góc Trái – Góc Phải Website

Các Popup Quảng Cáo cho phép bạn hiển thị các banner trên trang web khi người dùng truy cập vào 1 website. Nếu biết sử dụng đúng cách, loại hình này sẽ đem lại hiệu quả cao cho việc tiếp thị. Hãy tham khảo 1 popup được tạo ra như thế nào qua bài viết “Chia Sẻ Code Popup Quảng Cáo Góc Trái – Góc Phải Website”.

Hình 1 - Popup Quảng Cáo

Trong kỹ thuật được chia sẻ bạn có thêm chức năng ẩn – tắt khung quảng cáo, giúp người xem tương tác dễ dàng với trang web khi không muốn hiển Popup trên trang. Ở bài viết này, bạn sẽ khám phá cách tạo khung với 2 sự lựa chọn: Chèn Code Popup Quảng Cáo Góc Trái và Code Popup Quảng Cáo Góc Phải Website.

Nào, bây giờ chúng ta cùng bắt thực hiện:

Lựa chọn 1: Chèn Code Popup Quảng Cáo Góc Trái Trang Web

Bước 1: Đăng nhập trang quản lý

Bước 2: Ở đây bạn có 2 cách chèn code

Cách 1: Tạo một widget HTML/javascript, sau đó dán code sau vào

<script type="text/javascript">
function hide_float_left() {
    var content = document.getElementById('float_content_left');
    var hide = document.getElementById('hide_float_left');
    if (content.style.display == "none")
    {content.style.display = "block"; hide.innerHTML = '<a href="javascript:hide_float_left()">Tắt quảng cáo [X]</a>'; }
        else { content.style.display = "none"; hide.innerHTML = '<a href="javascript:hide_float_left()">Xem quảng cáo...</a>';
    }
    }
</script>
<style>
.float-ck { position: fixed; bottom: 0px; z-index: 9000}
* html .float-ck {position:absolute;bottom:auto;top:expression(eval (document.documentElement.scrollTop+document.docum entElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0))) ;}
#float_content_left {border: 1px solid #01AEF0;}
#hide_float_left {text-align:left; font-size: 11px;}
#hide_float_left a {background: #01AEF0; padding: 2px 4px; color: #FFF;}
</style>
<div class="float-ck" style="left: 0px" >
    <div id="hide_float_left">
<a href="javascript:hide_float_left()">Tắt Quảng Cáo [X]</a></div>
<div id="float_content_left">
<!-- Start quang cao-->
     <a href="http://www.ikhampha.com/" taget="_blank" ><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQvDEXTXr_Bf8sdpcZ9H1YZvRMT49deWQzEnJKbhNDj1HVeIhaIKEYfhFlzRTTNnvYNV1-6YO7p5esw6S8rbbbs4BkUkKrDgpuYek_ntJ927qxvI5hYEYGpQKN3JrM1NPW6B4BRvwDozA5/s1600/popup-quang-cao.gif" width="250" height="200"></a>
<!-- End quang cao -->
</div>
</div>

Chú ý:  

Bạn thay đổi các mục dưới đây để phù hợp với trang web của bạn:
- http://www.ikhampha.com/: Link dẫn đến nội dung quảng cáo của bạn

- https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQvDEXTXr_Bf8sdpcZ9H1YZvRMT49deWQzEnJKbhNDj1HVeIhaIKEYfhFlzRTTNnvYNV1-6YO7p5esw6S8rbbbs4BkUkKrDgpuYek_ntJ927qxvI5hYEYGpQKN3JrM1NPW6B4BRvwDozA5/s1600/popup-quang-cao.gif: Hình ảnh bạn muốn quảng cáo

Cách 2: Dán trực tiếp vào code HTML

<script type="text/javascript">
function hide_float_left() {
    var content = document.getElementById('float_content_left');
    var hide = document.getElementById('hide_float_left');
    if (content.style.display == "none")
    {content.style.display = "block"; hide.innerHTML = '<a href="javascript:hide_float_left()">Tắt quảng cáo [X]</a>'; }
        else { content.style.display = "none"; hide.innerHTML = '<a href="javascript:hide_float_left()">Xem quảng cáo...</a>';
    }
    }
</script>
<style>
.float-ck { position: fixed; bottom: 0px; z-index: 9000}
* html .float-ck {position:absolute;bottom:auto;top:expression(eval (document.documentElement.scrollTop+document.docum entElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0))) ;}
#float_content_left {border: 1px solid #01AEF0;}
#hide_float_left {text-align:left; font-size: 11px;}
#hide_float_left a {background: #01AEF0; padding: 2px 4px; color: #FFF;}
</style>
<div class="float-ck" style="left: 0px" >
    <div id="hide_float_left">
<a href="javascript:hide_float_left()">Tắt Quảng Cáo [X]</a></div>
<div id="float_content_left">
<!-- Start quang cao-->
  <a href="http://www.ikhampha.com/" taget="_blank" ><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQvDEXTXr_Bf8sdpcZ9H1YZvRMT49deWQzEnJKbhNDj1HVeIhaIKEYfhFlzRTTNnvYNV1-6YO7p5esw6S8rbbbs4BkUkKrDgpuYek_ntJ927qxvI5hYEYGpQKN3JrM1NPW6B4BRvwDozA5/s1600/popup-quang-cao.gif" width="250" height="200"></a>
<!-- End quang cao -->
</div>
</div>

Sau đó lưu lại và bấm xem kết quả.

Lựa chọn 2: Chèn Code Popup Quảng Cáo Góc Phải Trang Web

Bước 1: Đăng nhập trang quản lý blogspot

Bước 2: Ở đây bạn cũng có tương tự 2 cách chèn

Cách 1: Tạo một widget HTML/javascript, sau đó dán code sau vào

<script type="text/javascript">
function hide_float_right() {
    var content = document.getElementById('float_content_right');
    var hide = document.getElementById('hide_float_right');
    if (content.style.display == "none")
    {content.style.display = "block"; hide.innerHTML = '<a href="javascript:hide_float_right()">Tắt quảng cáo [X]</a>'; }
        else { content.style.display = "none"; hide.innerHTML = '<a href="javascript:hide_float_right()">Xem quảng cáo...</a>';
    }
    }
</script>
<style>
.float-ck { position: fixed; bottom: 0px; z-index: 9000}
* html .float-ck {position:absolute;bottom:auto;top:expression(eval (document.documentElement.scrollTop+document.docum entElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0))) ;}
#float_content_right {border: 1px solid #01AEF0;}
#hide_float_right {text-align:right; font-size: 11px;}
#hide_float_right a {background: #01AEF0; padding: 2px 4px; color: #FFF;}
</style>
<div class="float-ck" style="right: 0px" >
<div id="hide_float_right">
<a href="javascript:hide_float_right()">Tắt Quảng Cáo [X]</a></div>
<div id="float_content_right">
<!-- Start quang cao-->
  <a href="http://www.ikhampha.com/" taget="_blank" ><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQvDEXTXr_Bf8sdpcZ9H1YZvRMT49deWQzEnJKbhNDj1HVeIhaIKEYfhFlzRTTNnvYNV1-6YO7p5esw6S8rbbbs4BkUkKrDgpuYek_ntJ927qxvI5hYEYGpQKN3JrM1NPW6B4BRvwDozA5/s1600/popup-quang-cao.gif" width="250" height="200"></a>
<!-- End quang cao -->
</div>
</div>

Cách 2: Dán trực tiếp vào code HTML

Bạn cũng tìm thẻ đóng </body> và dán dòng lệnh sau đây trước thẻ lệnh tìm được.

<script type="text/javascript">
function hide_float_right() {
    var content = document.getElementById('float_content_right');
    var hide = document.getElementById('hide_float_right');
    if (content.style.display == "none")
    {content.style.display = "block"; hide.innerHTML = '<a href="javascript:hide_float_right()">Tắt quảng cáo [X]</a>'; }
        else { content.style.display = "none"; hide.innerHTML = '<a href="javascript:hide_float_right()">Xem quảng cáo...</a>';
    }
    }
</script>
<style>
.float-ck { position: fixed; bottom: 0px; z-index: 9000}
* html .float-ck {position:absolute;bottom:auto;top:expression(eval (document.documentElement.scrollTop+document.docum entElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0))) ;}
#float_content_right {border: 1px solid #01AEF0;}
#hide_float_right {text-align:right; font-size: 11px;}
#hide_float_right a {background: #01AEF0; padding: 2px 4px; color: #FFF;}
</style>
<div class="float-ck" style="right: 0px" >
<div id="hide_float_right">
<a href="javascript:hide_float_right()">Tắt Quảng Cáo [X]</a></div>
<div id="float_content_right">
<!-- Start quang cao-->
 <a href="http://www.ikhampha.com/" taget="_blank" ><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQvDEXTXr_Bf8sdpcZ9H1YZvRMT49deWQzEnJKbhNDj1HVeIhaIKEYfhFlzRTTNnvYNV1-6YO7p5esw6S8rbbbs4BkUkKrDgpuYek_ntJ927qxvI5hYEYGpQKN3JrM1NPW6B4BRvwDozA5/s1600/popup-quang-cao.gif" width="250" height="200"></a>
<!-- End quang cao -->
</div>
</div>

Bạn lưu lại và xem kết quả.

Chúc các bạn thành công và có Khung Quảng Cáo Popup như ý!

Nguồn: www.ikhampha.com