บทความนี้จะเป็นวิธีแสดงหน้าต่าง Pop-up ของกล่อง Facebook Likebox ลอยขึ้นมาต้อนรับผู้เข้าชมบล็อกในขณะสั่งเปิดหน้าเว็บขึ้นมาไหม่ โดยเราสามารถเลือกความถี่หรือระยะเวลาพักก่อนปรากฏในครั้งต่อไปได้ตามที่เราต้องการ โดยจะมีลักษณะเหมือนภาพกับข้างล่างนี้




ซึ่งค่าเบื้องต้นที่ได้ถูกตั้งไว้ในโค้ดตัวอย่างข้างล่างนี้จะเป็นการสั่งให้หน้าต่าง Pop-up ปรากฏขึ้นมาทุกครั้งพร้อมการเปิดหน้าเว็บขึ้นใหม่ โดยที่ผมตั้งไว้แบบนี้ก็เพื่อให้ง่ายต่อการนำไปทดสอบ แต่เวลานำไปใช้จริงก็ควรเปลี่ยนความถี่ให้น้อยลงตามวิธีจากส่วนอธิบายเพิ่มเติม เพราะถ้าบ่อยไปผู้ชมอาจรำคาญได้

ขั้นตอนที่ 1. เข้าสู่บล็อกของคุณจากนั้นไปที่ 'การออกแบบ > องค์ประกอบของหน้า'

ขั้นตอนที่ 2. ให้เลือกเพิ่ม Gadget แบบ 'HTML/จาวาสคริปต์'

ขั้นตอนที่ 3. คัดลอกโค้ดด้านล่างนี้ใส่ลงไปในช่อง 'เนื้อหา' และกดปุ่ม 'บันทึก' ก็เสร็จแล้ว











Receive all updates via Facebook. Just Click the Like Button Below





Powered By | Blog Gadgets Via Blogger Widgets



อธิบายเพิ่มเติม
เราสามารถตั้งเวลาที่หน้าต่างนี้จะถูกแสดงขึ้นมาพร้อมกับการเปิดหน้าเว็บได้โดยให้สังเกตที่
var fifteenDays = 1000;
โดยโค้ดบรรทัดนี้จะเป็นตัวกำหนดอายุของ Cookies ซึ่งเมื่อครบกำหนดก็จะทำใหหน้าจอ Pop-up นี้ถูกแสดงขึ้นมาอีกครั้ง และค่าเริ่มต้นที่ถูกตั้งไว้นี้ก็คือ สั่งให้แสดงขึ้นมาทุกครั้งที่เปิดหน้าเว็บขึ้นใหม่ซึ่งสามารถเปลี่ยนได้เองดังตัวอย่างด้านล่างนี้
แสดงหน้าต่างนี้เดือนละหนึ่งครั้งเมื่อสั่งเปิดหน้าเว็บขึ้นใหม่คือ
var fifteenDays = 1000*60*60*24*30;
แสดงหน้าต่างนี้สัปดาห์ละหนึ่งครั้งเมื่อสั่งเปิดหน้าเว็บขึ้นใหม่คือ
var fifteenDays = 1000*60*60*24*7;
แสดงหน้าต่างนี้วันละหนึ่งครั้งเมื่อสั่งเปิดหน้าเว็บขึ้นใหม่คือ
var fifteenDays = 1000*60*60*24;
แสดงหน้าต่างนี้ชั่วโมงละหนึ่งครั้งเมื่อสั่งเปิดหน้าเว็บขึ้นใหม่คือ
var fifteenDays = 1000*60*60;
แสดงหน้าต่างนี้นาทีละหนึ่งครั้งเมื่อสั่งเปิดหน้าเว็บขึ้นใหม่คือ
var fifteenDays = 1000*60;
แสดงหน้าต่างนี้ทุกครั้งที่สั่งเปิดหน้าเว็บใหม่ขึ้นคือ
var fifteenDays = 1000;

นอกจากนี้ตอนนำไปใช้เองก็อย่าลืมแก้โค้ดในบรรทัดที่ 12 นับจากข้างล่างสุดที่เดิมเขียนเอาไว้ว่า
maxlayout
ให้เป็นชื่อแฟนเพจของคุณเองด้วยครับ
Categories:
Related Posts Widget For Blogger with ThumbnailsBlogger Templates

0 comments:

Post a Comment