Tạo cửa sổ Popup liên kết hiển thị bất kỳ bằng Javascript cho blogspot

Cửa sổ bật lên pop-up là một cửa sổ tự động xuất hiện khi bạn duyệt web. Cửa sổ pop-up có thể hiển thị ở trung tâm hoặc một góc nào đó của trang web với kích thước khác nhau. Nội dung trong cửa sổ này thường là những thông điệp quảng cáo hoặc cũng có thể là những thông tin khác.

Popup liên kết hiển thị bất kỳ bằng Javascript cho blogspot.

Ở bài viết này mình sẽ hướng dẫn các bạn làm cửa sổ Popup mà khi click vào liên kết hoặc hình ảnh nó mới hiện lên. Nó sẽ không tự động hiện như các popup thông thường gây khó chiệu cho người xem.

XEM DEMO: Click Vào Để Xem Demo

Tạo cửa sổ Popup cho Blogspot mới nhất

Cách làm:

Bước 1: Vào Chủ đề >> Chỉnh sửa HTML

Bước 2: Thêm đoạn mã dưới đây vào trước thẻ đóng </head> trong Blogspot

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

Bước 3: Lưu lại và tiến hành setup vị trí muốn sử dụng popup liên kết.

Bước 4: Lựa chọn kiểu Popup:

Để 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('https://www.anhtrainang.com','WindowName','570','300','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('https://www.anhtrainang.com','WindowName','550','290','scrollbars=1');"><img alt="Popup hình ảnh" border="0" src="https://blogger.googleusercontent.com/img/a/AVvXsEhy87Or7Jpcb_z3pvf83yBaqQ6oZnSfPizKL9GIWgi72ExS1R__ndir_FKFCzihRpiI6Z22SbwibrcnD2OpzkeMM-pAxnQezNhRh6CaHAohYBCE5gtDPc73cvnN3QZisHr8So4fAiy5ToTXh5_M7eplPgMFZa9ZxO-n9v4LeNmOA5tCNii5iKlqN9pALcTT=s300" title="Mô tả ảnh" /></a>

Tùy chỉnh

• https://www.anhtrainang.com: Đây là link trang web (hoặc hình ảnh) sẽ hiện thị trong cửa sổ popup.
• 570: Chính là chiều rộng của cửa sổ popup sẽ hiện thị.
• 300: Chính là chiều cao của cửa sổ popup sẽ hiện thị.
• Thay thế link hình ảnh của bạ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