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

Anh Trai Nắng
2
Hướng dẫn Blogger: Tạo cửa sổ Popup liên kết hiển thị bất kỳ bằng Javascript cho blogspot không gây khó chiệu người xem.

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.

Tạo cửa sổ Popup liên kết hiển thị bất kỳ bằng Javascript cho blogspot
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

Đăng nhận xét

HƯỚNG DẪN BÌNH LUẬN

2 Nhận xét

Đăng nhận xét

#buttons=(Thanks!) #days=(7)

À mình có làm website tăng tương tác MXH giá rẻ. Mọi người nếu cần thì ghé sử dụng các dịch vụ thử nha. Ghé xem dịch vụ
Ok, Go it!

HƯỚNG DẪN BÌNH LUẬN

Chèn link

Sử dụng công cụ Tạo link

Chèn hình ảnh

LINK_ANH - sử dụng công cụ upload ảnh. Và chỉ cần lấy link ảnh chèn vào bình luận là ảnh tự động hiển thị.

Định dạng chữ

<b>Chữ in đậm</b>
<i>Chữ in nghiêng</i>
<u>Chữ gạch chân</u>
<strike>Chữ gạch ngang</strike>

Chèn một đoạn Code

Đầu tiên sử dụng công cụ này để mã hóa đoạn code muốn chèn.
Sau đó dùng thẻ [code] CODE_ĐÃ_MÃ_HÓA [/code]

Khác

Nhập Email bạn hay dùng để nhận thông báo khi mình trả lời bình luận của bạn.
Vui lòng không nhập bất kỳ Liên kết Spam nào trong hộp nhận xét.
Tích vào ô "Thông báo cho tôi" để nhận thông báo nội dung phản hồi của bình luận.
Chèn emoji: Nhấn tổ hợp phím “Windows + . (dấu chấm)”

Đã hiểu