Blogger: สมัครใช้และติดตั้ง Google Custom Search Engine

Google Custom Search Engine เป็นการสร้างเครื่องมือค้นหาซึ่งกำหนดค่าได้เอง สำหรับให้ผู้เข้าชมใช้ค้นหาข้อมูลในเว็บไซต์หรือบล็อก ซึ่งใช้งานได้ฟรีไม่ต่องเสียค่าใช้จ่ายและสามารถทำได้ง่ายๆ ดังนี้

ซึ่งบทความนี้จะจำแนกการอธิบายโดยแบ่งออกเป็น 3 ส่วนคือ

• ขั้นตอนที่ 1-10 > วิธีสร้างเครื่องมือค้นหาด้วย Google Custom Search
• ขั้นตอนที่ 11-14 > วิธีเปลี่ยนรูปลักษณ์และความรู้สึกของ Google Custom Search
• ขั้นตอนที่ 15-18 > ตัวอย่างการติดตั้ง Google Custom Search ใส่ลงในบล็อกของ Blogger

---

วิธีสร้างเครื่องมือค้นหาข้อมูลด้วย Google Custom Search

ขั้นตอนที่ 1. เริ่มแรกให้ไปที่ http://www.google.com/cse/ แล้วกดปุ่ม 'สร้่าง Google Custom Search' แล้วก็ใส่ข้อมูลของเครื่องมือค้นหาที่ต้องการลงไปตามขั้นตอนด้านล่าง โดยข้อมูลที่ใส่ลงไปนี้ส่วนใหญ่จะสามารถแก้ไขได้ในภายหลังเมื่อเข้าไปเลือกที่ 'แผงควบคุม'

ขั้นตอนที่ 2. ตั้งชื่อให้เครื่องมือค้นหา

ขั้นตอนที่ 3. ช่องสำหรับคำอธิบายของเครื่องมือค้นหา (จะไม่ใส่ก็ได้)

ขั้นตอนที่ 4. ใส่ URL เว็บไซต์ที่จะให้ถูกรวมอยู่ในผลการค้นหาของเครื่องมือนี้
โดยตามภาพนี้ผมต้องการสร้างให้เป็นเครื่องมือสำหรับค้นหาข้อมูลที่ครอบคลุมทั้งโดเมนจึงใส่ค่าลงไปเป็น maxlayout.com ดังรูป แต่ถ้าหากต้องการทำแบบอื่นก็ลองอ่านวิธีใส่ได้โดยกดที่ 'เคล็ดลับการจัดรูปแบบ URL.'

อธิบายเพิ่มเติม
นอกจากนี้สามารถอ่านรายละเอียดเกี่ยวกับรูปแบบ URL ของ google custom search ได้ที่
http://www.google.com/support/customsearch/bin/answer.py?hl=th&answer=71826

ขั้นตอนที่ 5. เลือก 'ยอมรับข้อกำหนดในการให้บริการ'

ขั้นตอนที่ 6. กดที่ 'ถัดไป'

ขั้นตอนที่ 7. กดที่ 'เสร็จสิ้น'

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

ขั้นตอนที่ 9. จะเข้าสู่หน้า 'ข้อมูลเบื้องต้น' โดยจะพบว่ามีข้อมูลต่างๆ ของที่ใส่ลงไปแสดงไว้อยู่ ซึ่งเราสามารถเปลี่ยนแปลงใหม่ได้ตามต้องการ

ขั้นตอนที่ 10. ถ้าหากลองกดปุ่ม 'รับโค้ด' ที่เมนูทางซ้ายมือ จะพบโค้ดของเครื่องมือค้นหาอันนี้แสดงอยู่

ซึ่งในตอนนี้ถ้านำโค้ดไปใช้เลยก็จะได้เครื่องมือค้นหาเป็นแบบ 'Search Element' ที่ผลการค้นหาจะปรากฎออกมาในหน้าบล็อกหน้านั้นเลยตามแบบภาพข้างล่างนี้

ภาพตัวอย่างผลการค้นหาแบบ 'Search Element'

แต่อาจมีบางคนที่ชอบเครื่องมือค้นหาแบบ 'หน้าเว็บที่โฮสต์โดย Google' ซึ่งจะแสดงผลการค้นหาเหมือนในภาพข้างล่างนี้มากกว่า โดยเราสามารถเปลี่ยนวิธีแสดงผลการค้นหาได้ตามวิธีในขั้นตอนต่อจากนี้ (ส่วนคนที่ชอบแบบ 'Search Element' ที่แสดงผลในหน้านั้นเลยก็ให้ข้ามขั้นตอนที่ 11-14 ไปแล้วทำต่อในขั้นตอนที่ 15-18 ได้เลย)

ภาพตัวอย่างผลการค้นหาแบบ 'หน้าเว็บที่โฮสต์โดย Google'

---

วิธีเปลี่ยนรูปลักษณ์และความรู้สึกของ Google Custom Search

ขั้นตอนที่ 11. เลือก 'รูปลักษณ์และความรู้สึก' ในเมนูข้่างซ้ายมือ

ขั้นตอนที่ 12. เปลี่ยนตัวเลือกการโฮสต์จาก 'Search Element' ให้กลายเป็น 'หน้าเว็บที่โฮสต์โดย Google'

ขั้นตอนที่ 13. จากนั้นกดที่ปุ่ม 'บันทึก'

ขั้นตอนที่ 14. หลังจากนั้นก็ให้กดเลือกที่ 'รับโค้ด' ทางซ้ายมืออีกครั้งจะพบว่าโค้ดในกรอบสี่เหลี่ยมจะเปลี่ยนไป โดยถ้าสั่งคัดลอกโค้ดในกรอบนี้ไปวางใส่ลงเว็บไซต์หรือบล็อกของเราก็จะมีช่องค้นหาปรากฎออกมา

ซึ่งโค้ดในกรอบที่เห็นตามภาพตัวอย่างนั้นจะมีลักษณะเหมือนกับด้านล่างนี้
<form action="http://www.google.com/cse" id="cse-search-box">
  <div>
    <input type="hidden" name="cx" value="006897406992532767808:a51mzinfg5s" />
    <input type="hidden" name="ie" value="UTF-8" />
    <input type="text" name="q" size="31" />
    <input type="submit" name="sa" value="ค้นหา" />
  </div>
</form>
<script type="text/javascript" src="http://www.google.com/cse/brand?form=cse-search-box&lang=th"></script>

---

ตัวอย่างการติดตั้ง Google Custom Search ใส่ลงในบล็อกของ Blogger

ขั้นตอนที่ 15. วิธีนำโค้ดที่ได้มาไปใส่ลงบล็อกเริ่มโดยคัดลอกโค้ดจากช่อง 'รับโค้ด' ที่เลือกมาจากนั้นเข้าไปที่เมนูของบล็อกแล้วเลือกที่
การออกแบบ > องค์ประกอบของหน้า > เพิ่ม Gadget > HTML/จาวาสคริปต์

อธิบายเพิ่มเติม
อาจสงสัยว่าในเมื่อ Blogspot มันมีตัวเลือก 'Gadget ช่องค้นหา' เหมือนในรูปข้างล่างนี้ไว้ให้ใช้อยู่แล้ว แต่ทำไมต้องไปเอาโค้ดสร้าง Google Custom Search มาใส่อีก

นั่นก็เป็นเพราะว่า ในขณะนี้ 'Gadget ช่องค้นหา' ที่มีไว้ให้เลือกนั้นยังไม่สามารถตั้งค่าให้แสดงผลแบบ 'หน้าเว็บที่โฮสต์โดย Google' และนอกจากยังไม่มีการตั้งค่าจัดรูปแบบ URL ที่ถูกครอบคลุมในผลการค้นหา

ขั้นตอนที่ 16. วางโค้ดที่คัดลอกมาลงใส่ในช่องที่ปรากฎ

ขั้นตอนที่ 17. ตั้งชื่อ 'หัวข้อ' ของ Gadget นี้ (จะไม่ใส่ก็ได้)

ขั้นตอนที่ 18. กดที่ 'บันทึก' ก็เสร็จแล้ว หลังจากนั้นถ้าลองเข้าไปที่หน้าแรกของบล็อกก็จะเห็นเครื่องมือค้นหาแสดงไว้อยู่ โดยถ้าลองสั่งค้นหาดูก็จะได้ผลลัพธ์ออกมาตามการแสดงผลที่เราเลือกไว้

ภาพตัวอย่างเมื่อเลือกใช้การแสดงผลแบบ 'หน้าเว็บที่โฮสต์โดย Google'

อธิบายเพิ่มเติม
สำหรับผู้ที่ใช้การแสดงผลแบบ 'หน้าเว็บที่โฮสต์โดย Google' ถ้ารู้สึกว่าขนาดช่องค้นหาที่แสดงอยู่ในบล็อกมันสั้นหรือยาวมากไป ก็สามารถปรับขนาดได้ง่ายๆ
ด้วยการแก้ไขตัวเลขโค้ดจากขั้นตอนที่ 16 ในบรรทัดที่ 6 ซึ่งได้เขียนเอาไว้ว่า
<input type="text" name="q" size="31" />
โดยถ้าอยากให้ช่องสำหรับใส่คำค้นหามันสั้นลงก็ลดเลขให้น้อยกว่า 31 แต่ถ้าอยากให้ยาวขึ้นก็เพิ่มเลขให้มากกว่า 31 ดังที่แสดงในตัวอย่างตามภาพด้านล่างนี้