Hướng dẫn tạo Popup chuyên nghiệp chèn vào Website

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 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.

Ảnh minh họa

Đ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 đó.

- Với website sử dụng mã nguồn Wordpress: Truy cập quyền quản trị > Giao diện (Appearance) > Sửa (Editor) > Tìm đến file header.php (bên tay phải) click vào để chỉnh sửa > Tìm đến thẻ đóng </head> và chèn code phía dưới vào trước thẻ đóng đó.

- Với website khác: Truy cập vào quyền quản trị > Tìm đến phần tùy chỉnh hoặc cài đặt website > Chỉnh sửa Header để thêm đoạn code phía dưới vào (hoặc chỉnh sửa trong file index để thêm đoạn code vào trước thể đóng </head>)

Code cần chèn vào:

<!-- Script Popup-->

<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 đó.

- Với web Wordpress (vẫn trong giao diện sửa code ở bước 1): Nếu bạn muốn hiển thị tất cả các trang (kể cả trang chủ) thì chọn sửa file footer.php và chèn đoạn code dưới đây trước thẻ đóng </body>. Còn nếu bạn muốn chỉ hiển thị popup ở các bài viết thì chọn sửa file single.php và chèn đoạn code dưới đây trước hàm gọi footer (kiểu như <?php get_footer(); ?> )

- Với web site khác: Đơn giản nhất là chèn toàn trang => vào chỉnh sửa file index và chèn đoạn code hiển thị popup vào trước thẻ đóng </body>

Code cần chèn vào:

<!-- Code hien thi -->
<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">
<!-- Start quang cao: phần này sẽ hiển thị nội dung của quảng cáo có thể chèn ảnh hoặc video hay flash tùy bạn -->
<!-- End quang cao -->
</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 ( <!-- Start quang cao: phần này sẽ hiển thị nội dung của quảng cáo có thể chèn ảnh hoặc video hay flash tùy bạ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:

<a href="http://xyz.net" target="_blank"><img src="http://abc.com/anh.jpg"/></a>

OK nhé! Cảm ơn các bạn đã ghé qua website tự học SEO của mình và hy vọng kiến thức chia sẻ tại đây bổ ích với bạn.

Nội dung chính