[TIP]
กูเกิลเสิร์ชในบล็อกฉัน
posted on 15 Feb 2009 17:14 by farsaiex in TIP
ก่อนหน้านี้หลายๆ ท่านคงได้เห็นเสิร์ชที่บล็อกเป้มาก่อนแล้ว เป้ก็พึ่งได้ลองศึกษาแล้วก็
ทำลงบล็อกตัวเองดูครับ และหลังจากผ่านมาได้สักระยะแล้วก็มีหลายๆ คนได้มาใช้งาน
จริง ส่วนใหญ่คำค้นจะเป็นพันธุ์หมา แล้วก็ชื่อเพลงต่างๆ (เป้ดูผลการค้นหาจาก Google
Analytics) ...ก็สรุปใช้งานได้ดีจริง เป้เลยถือโอกาสมาบอกต่อถึงวิธีทำ เพราะเห็นจาก
บล็อกของหลายๆ คนก็มีข้อมูลที่เป็นประโยชน์ จากเครื่องมือกูเกิลเสิร์ชนี้จะช่วยให้
บล็อกของเพื่อนๆ สะดวกและง่ายต่อการค้นหา หาาาา หาาาา...
วิธีทำกูเกิลเสิร์ชในบล็อกฉัน
ภาพตัวอย่างการแสดงผล
- ก่อนอื่นเลยเราต้องมี Google Account ก่อนนะครับ google.com/accounts
- เมื่อมีแอคเค้าท์แล้ว ก็ทำการขอสร้างเสิร์ชเอนจิ้นเป็นของเราเอง google.com/coop/cse
คลิก Create a Custom Search Engine และดูตัวอย่างของเป้ก็ได้ครับ...
- กรอกข้อมูลครบแล้ว อย่าลืมติ๊กถูก I have read ด้วยนะ
- เสร็จก็ คลิก Next แล้วในหน้าต่อไปก็คลิก Finish เป็นอันจบการขอสร้างเสิร์ชเอนจิ้น
- ขั้นตอนต่อไปเป็นการจัดการรายละเอียด คลิก google.com/coop/manage/cse
คลิก Control Panel ในหัวข้อ Basics หัวข้อย่อย Preferences อันล่างสุด
Advertising status: เราเปลี่ยนเป็น Do not show ads on results pages
คือเราไม่ต้องการให้โชว์โฆษณาในหน้าแสดงผลลัพธ์การค้นหา ...Save Changes
(แต่เป้ไม่รู้ว่าสำหรับบล็อกที่มีโฆษณาด้วยจะใช้ได้ไหมนะครับ)
- หัวข้อ Sites คลิก Add Sites ในช่อง URL: ให้ใส่ชื่อบล็อกเราลงไป แล้วลงท้าย
ด้วย * ตัวอย่าง http://farsaiex.exteen.com/* ...Save (ถ้าหากมีอยู่แล้วก็ลบ
ออกแล้วใส่ใหม่ได้เลย)
- หัวข้อ Look and feel หัวข้อย่อย Customize your search results ในส่วนนี้สามารถ
เปลี่ยนสีตัวอักษรต่างๆ เพื่อให้เข้ากับธีมของบล็อกเราได้
- หัวข้อ Code หัวข้อย่อยอันแรก ให้เลือกเป็นอันที่ 2 คือ Host results on your website:
จากนั้นข้ามมาหัวข้อย่อยที่ 2 ในช่องให้เราใส่ชื่อหน้าเวปเสิร์ชของเราที่จะให้แสดงผลการ
ค้นหา ตัวอย่างหน้าเวปเสิร์ชของเป้เอง http://farsaiex.exteen.com/20090202/search-page-2
ในส่วนของหน้านี้เราสร้างเองจาก Entry หรือ Page ก็ได้ และเลือกเป็น Top and Right
จะเหมาะสมที่สุดครับ
- ต่อมา หัวข้อย่อย Search box code จะมีโค๊ดอยู่ 2 อัน เราก็นำโค๊ดทั้ง 2 อันนี้ไปใส่
ในหน้าเวปเสิร์ชที่เราสร้างขึ้นตะกี้นี้ครับ วิธีการใส่โค๊ด...
- เข้า Edit ที่หน้าเวปเสิร์ชของเรา จากนั้นคลิกที่
เพื่อปิดการแสดง
คำสั่งก่อน (หรือจะใช้แทนก็ได้)
- แล้วนำโค๊ดทั้ง 2 มาใส่เลย ตัวอย่าง...
- เข้า Edit ที่หน้าเวปเสิร์ชของเรา จากนั้นคลิกที่
- ใส่ครบเรียบร้อย คลิก
กลับคืนเป็น Enable แล้วก็ Save เป็นอันจบขั้นตอน
การใส่กูเกิลเสิร์ชที่หน้าเวปเราครับผม
ต่อไปเป็นขั้นตอนนำช่องเสิร์ชออกมาไว้ที่หน้าบล็อก
ตัวอย่างช่องเสิร์ชที่หน้าบล็อก
- ก่อนอื่นเลือกดูจากความเหมาะสมของบล็อกเรา ช่องเสิร์ชควรจะอยู่ตำแหน่งไหนของบล็อก
ดี หลายๆ คนคงอยากให้ช่องเสิร์ชอยู่ในตำแหน่งที่ควรอยู่ เพื่อให้ดูเป็นระเบียบ ซึ่งมันก็ยาก
ที่จะจัดวาง เป้มีวิธีจัดวางตำแหน่ง คือเราสามารถเคลื่อนย้ายช่องเสิร์ชไปตำแหน่งไหนก็ได้ใน
บล็อกของเรา ซึ่งก็มีขั้นตอนอยู่บ้าง เพื่อนๆ บางคนที่ไม่ค่อยเข้าใจเกี่ยวกับ css อาจจะงงบ้าง
เล็กน้อย แต่ก็ไม่ยากหรอกครับ เป้จะอธิบายให้เข้าใจที่สุดดดดดดดด
- ไปที่ Widgets แล้วนำโค๊ดเมื่อตะกี้นี้มา แต่เอาเฉพาะโค๊ดอันแรกมาใส่ไว้ใน Custom Code
เพื่อนๆ ก็เลือกเอาว่าจะใส่ Custom Code ตัวไหน
- เมื่อนำโค๊ดมาใส่แล้ว ให้ใส่คำสั่ง <div id=searchbox> ที่หน้าสุดของโค๊ด
แล้วปิดท้ายด้วย </div> ...OK
ดูวิธีใส่คำสั่งได้จากภาพตัวอย่าง
- ไปที่ CSS Editor แล้วใส่คำสั่งนี้ไปไว้ที่ด้านล่างสุด
position:absolute;
margin-left: 0px;
margin-top: 0px;
}
- margin-left คือย้ายตำแหน่ง ซ้าย-ขวา (ก็ปรับค่าตัวเลขเอา)
margin-top คือย้ายตำแหน่ง ขึ้น-ลง (สามารถปรับตัวเลขได้น้อยกว่า 0px คือ -1px)
โดยเริ่มจากค่า 0px ก่อน แล้วก็ค่อยๆ เปลี่ยนค่าตัวเลข แล้วก็ดูการเปลี่ยนแปลงที่หน้าบล็อก
-
ตัวอย่างใส่คำสั่ง
- เสร็จแล้วอย่าลืม Save ละ
-
...จากวิธีนี้เราก็สามารถจัดวางย้ายตำแหน่งช่องเสิร์ชที่หน้าบล็อกได้อย่างอิสระโดยไม่ต้องรบกวน
แก้ไขธีมให้เหนื่อยเลยละครับ แต่บล็อกของบางคนอาจจะไม่จำเป็นต้องทำวิธีนี้ก็ได้ แบบว่านำไป
ใส่ใน Custom Code ที่อยู่ตำแหน่ง Top menu ใน Widgets พอดี
มีปัญหาข้อสงสัยก็คอมเม้นท์หรือส่ง ems หรือโพสท์ข้อความลงที่ shoutbox ด้านล้่างได้เสมอครับ
ขอบคุณ คุณ xvista ที่ให้คำปรึกษาด้านคำสั่งต่างๆ เรื่อยมา
ขอบคุณ คุณ itimez ที่ช่วยเป็นหนูทดลองยาในการทดลองครั้งนี้ 55555

<< คือไรจ๊ะ .. 555
ส่วนใหญี่เขียนตามอ.ใจ
#1 By i' FY on 2009-02-15 17:23