Chắc các bạn cũng từng gặp phải trường hợp khi click chuột vào một hình ảnh hay một liên kết nào đó thì có một cửa sổ popup xuất hiện, cửa sổ này có thể là một trang web, cũng có thể là một hình ảnh,.... chắc chắn nhiều bạn đang thắc mắc phải không, bài viết này mình sẽ giúp các bạn có thể tự tạo một popup đơn giản cho blog của mình.

DEMO

» Cách tạo một cửa sổ Popup đơn giản cho blospot.
1. Đăng nhập vào bảng điều khiển Blog của bạn.
2. Bấm chọn Mẫu (template) => Chỉnh sử HTML
3.Thêm đoạn mã dưới đây vào trước thẻ đóng </head> trong blogspot của bạn.
4.Lưu mẫu của bạn lại và tiến hành các bước tiếp theo.

<script type="text/javascript">
//<![CDATA[
function OpenPopup(Url,WindowName,width,height,extras,scrollbars) {
var wide = width;
var high = height;
var additional= extras;
var top = (screen.height-high)/2;
var leftside = (screen.width-wide)/2; newWindow=window.open(''+ Url +
'',''+ WindowName + '','width=' + wide + ',height=' + high + ',top=' +
top + ',left=' + leftside + ',features=' + additional + '' +
',scrollbars=1');
newWindow.focus();
}
//]]>
</script>

5. Từ giờ tại những vị trí bạn muốn xuất hiện cửa sổ popup bạn chỉ cần dùng code sau:
- Để popup hiển thị khi bấm vào một liên kết bạn sử dụng đoạn code sau:

<a href="javascript: void(0);" onclick=" javascript:OpenPopup('http://namloan.blogspot.com/','WindowName','555','444','scrollbars=1');">Tên Hiển Thị</a>

- Để popup hiển thị khi bấm vào một hình ảnh bạn sử dụng đoạn code sau:

<a href="javascript: void(0);" onclick=" javascript:OpenPopup('http://namloan.blogspot.com/','WindowName','555','444','scrollbars=1');"><img alt="Demo Hiệu ứng tuyết rơi cho Blogspot" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNt0NOE9lE1VeCDPOq7IPzet51U8EOItvlw30WFFcvUte3BRpgdGrfqwwek5WcgAEYggLwX8-mwBhmQOBz8MDWqSiMU0JDkgg10BuONgMks9xJxtxM1AeU4a2j5JWeetIE_xtc7dQrhqjv/s1600/namloan.blogspot.com.png" title="Mô tả ảnh" /></a>

Tuỳ biến code:

http://namloan.blogspot.com/ (màu tím): Đây là link trang web (hoặc hình ảnh) sẽ hiện thị trong cửa sổ popup.
555 (màu đỏ): Chính là chiều rộng của cửa sổ popup sẽ hiện thị.
444 (màu xanh): Chính là chiều cao của cửa sổ popup sẽ hiện thị.
Link URL (tô màu vàng trong đoạn code thứ 2): Khi bạn bấm vào hình ảnh này sẽ có một cửa sổ pop up xuất hiện.
Nếu trang web hoặc hình ảnh trong cửa sổ popup quá to sẽ có một thanh cuôn xuất hiện, bạn có thể tắt thanh cuộn này bằng cách sửa giá trị scrollbars=1 thành scrollbars=0