Tạo cửa sổ popup đơn giản dùng Script cho Blogspot

3/30/16 | 5 nhận xét
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.
Tạo cửa sổ popup đơn giản dùng Script cho Blogspot

Bạn có thể xem tiện tích mình áp dụng trên blog demo sau đây:

Demo Hiệu ứng tuyết rơi cho Blogspot

» 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
Chỉnh sửa HTML trong Blogspot
3.Thêm đoạn mã dưới đây vào trước thẻ đóng </head> trong blogspot của bạn.
<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>
4.Lưu mẫu của bạn lại và tiến hành các bước tiếp theo.
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','550','290','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','550','290','scrollbars=1');"><img alt="Demo Hiệu ứng tuyết rơi cho Blogspot" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVKlp69HJHLAwxVYO982x-boLjfuGdx1llzwuvPdl2ZvZG_d-2dnaeuNvkzCu2NuDIftyDnTvcbjCSFcglFb7Lll84PoCpc6pdLIUcVdj01w7o0N76n1X6BBoaZ3KxsYKg92imWx11nBPS/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.
  • 550 (màu đỏ): Chính là chiều rộng của cửa sổ popup sẽ hiện thị.
  • 290 (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
Như vậy là mình đã hướng dẫn xong cách tạo một cửa sổ Popup đơn giả bằng Script, trong quá trình thực hiện nếu có bất kỳ thắc mắc nào vui lòng comment cuối bài viết nhé.
Cảm ơn bạn đã đọc bài viết! Hãy like nếu bài viết có ích →

5 nhận xét

ChoiBlogs.blogspot.com
4/16/16, 2:02 AM xóa commnet

- Thủ thuật rất hay! cảm ơn bạn đã chia sẻ.

Reply
Unknown
6/25/16, 6:14 PM xóa commnet

Bai viet rat co ich

Reply
Unknown
10/16/16, 7:02 PM xóa commnet

Bài viết hữu ích cám ơn

Reply
aokhoaclibra
12/28/16, 7:34 PM xóa commnet

Thanks bạn nhé,
Mình đang cần cái này :D

Reply

Thank you very murch

Reply

Post a Comment

≡ NỘI QUY PHẢN HỒI
» Blog nhằm mục đích hướng dẫn, chia sẻ những thông tin cho tất cả mọi người, do vậy để hữu ích chúng tôi rất mong nhận được các phản hồi từ các bạn.
» Những chủ đề chúng tôi đưa ra đều được thử nghiệm và kiểm duyệt trước khi chia sẻ do vậy nếu bạn có bất kỳ thắc mắc hãy để lại nhận xét của bạn, chúng tôi sẽ trả lời khi có phản hồi từ các bạn.
» Hy vọng các bạn để lại những phản hồi có tính chất xây dựng không nên spam link.

Mã Hóa Code