Hướng dẫn cách làm Popup chuyên nghiệp cho Blogspot

Popup là một cách quảng cáo hiệu quả trên các website tin tức - chia sẻ nhằm quảng cáo chương trình, sự kiện, bán hàng...

Bài viết này xin được copy trên phamhuuthanh.com và post lại trên weblog này để hướng dẫn cách chèn popup vào chân trang website một cách chuyên nghiệp dành cho những bạn nào chưa biết.

Công việc chèn này khá dễ nên hy vọng những bạn không biết quá nhiều về code cũng có thể chèn vào được.

Điều quan trọng đầu tiên trước khi thực hiện chèn popup vào website là bạn phải có quyền chỉnh sửa code trên website.

(Lưu ý: phần chữ tô đỏ trong phần code phía dưới sẽ là phần bạn có thể chỉnh sửa tùy theo ý mình)

Bước 1: Chèn code vào phần sau thẻ <head>

Bạn cần chèn đoạn code dưới đây vào sau thẻ <head> để quy định kiểu hiển thị của popup sẽ chèn. Cụ thể hơn cách chèn code:

- Với bạn nào sử dụng Blogspot: Truy cập quyền quản trị > Mẫu > Chỉnh sửa HTML trong giao diện code html đó bạn tìm đến thẻ đóng </head> và chèn đoạn code phía dưới vào trước thẻ đóng đó.

Code cần chèn 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>

Bước 2: Chèn code hiển thị popup

Dưới đây chính là đoạn code hiển thị popup, bạn cần chèn nó trước thẻ đóng </body>. Cụ thể hơn cách chèn code:

- Với Blogspot: Vẫn tiếp tục ở giao diện chỉnh sửa html (bước 1) tìm đến thẻ đóng </body> và chèn đoạn code dưới đây trước thẻ đóng đó.

Code cần chèn vào:

<div id="mobile-hide" class="float-ck" style="right: 0px" >
<div id="hide_float_right">
<a href="javascript:hide_float_right()">Tắt [X]</a></div>
<div id="float_content_right">


</div>
</div>

Vậy là xong phần code để chèn quảng cáo. Bạn có thể tùy ý thêm ảnh hay đoạn text thế cho đoạn chữ đỏ ở code trên ( )

Ví dụ: bạn muốn chèn 1 bức ảnh (link ảnh ví dụ: http://abc.com/anh.jpg) và khi người dùng click vào ảnh thì chuyển sang website đích (ví dụ website đích là http://xyz.net) thì bạn chèn đoạn code: