itshee

หลังจากที่มาสเตอร์แชมป์ได้เปิด custom code ซึ่งเป็นฟีเจอร์ใหม่ (22 เม.ย. 51) ขึ้นมาก็มีของเล่นมาอีกแล้วครับ คราวนี้คือกล่องค้นหา หรือ กล่อง search ของผมติดตรงมุมขวาบนของบล็อก (ลองเล่นกันได้ ถ้าไม่ขึ้นให้ refresh ดู) โดยวิธีติดตั้งนั้นไม่ยากอย่างที่คิด (แต่ยาวหน่อย) โดยมีขั้นตอน 5 ขั้นตอนดังนี้ครับ (1) สร้างหน้าปลายทาง (2) ขอโค้ดจากกูเกิลมาใส่ (3) ติดตั้งลงในเอ็กซ์ทีน (4) แก้ CSS ให้กล่องค้นหาลอยขึ้นมา (5) ตกแต่ง ซึ่งขั้นตอนทั้งหมดผมจะอธิบายในรูปแบบที่ผมทำละกันนะครับ ซึ่งแต่ละคนสามารถดัดแปลงกันได้ตามใจชอบโดยถ้าทำขั้นตอน 1-3 ก็จะเห็นกล่องแล้ว ส่วน 4-5 ก็ตกแต่งเพิ่มนิดหน่อย

1) สร้างหน้าปลายทางที่เวลาค้นหาแล้วจะโผล่มา โดยอันนี้จะเป็นการค้นหาต่างจากของชาวบ้านเขาหน่อย คือ ค้นแล้วจะยังอยู่ในเว็บเรา ไม่โผล่ข้ามไปในเว็บกูเกิลเหมือนที่เคยเห็นกัน โดยผมเองก็เข้าไปสร้าง page (Manage → Pages) แล้วก็สร้างขึ้นมาหนึ่งหน้า โดยอาจจะเขียนข้อความอะไรซักอย่างไปก่อนแล้วเซฟ ซึ่งจะกลับมาแก้ในส่วนนี้อีกรอบหนึ่ง

2) ขอโค้ดมาใส่ เริ่มแรกก็เข้าไปที่ Google Custom Search (http://www.google.com/coop/cse/) แล้วเลือก Create a Custom Search Engine (CSE) พอเข้าไปแล้วก็จะมีช่องให้กรอกก็ใส่เข้าไป

• Search Engine Name - อันนี้ก็ใส่แล้วแต่เราตั้งชื่อครับ ผมใส่ว่า Exteen
• Search Engine Description - อันนีก็ใส่รายละเอียด ใส่อะไรเข้าไปก็ได้ จะได้แบ่งแยกเผื่อเรามี CSE หลายอัน
• Search Engine Keywords - อันนี้เป็นคำสำคัญของเว็บเรา ว่าเว็บเราเกี่ยวกับอะไร อันนี้ผมก็เดาว่าคงสำหรับโฆษณาที่จะขึ้นมา
• Search Engine Language - ก็เลือกแล้วแต่ความชอบครับไม่ว่า จะไทยหรืออังกฤษ
• What do you want to search? - อันนี้จะมีให้เลือกสามอย่างคือ (1) เฉพาะไซต์ที่เราใส่ในช่องถัดไป (2) ค้นทุกเว็บเลยแต่เน้นไซต์เรา และ (3) ค้นทุกเว็บ โดยอันนี้ผมเลือกตัวเลือกแรก เพราะต้องการหาเฉพาะบล็อกผม
• Sites to search:- อันนี้ใส่เว็บไซต์ที่เราต้องการค้นหา ถ้าเราต้องการให้กล่องค้นหา หาได้หลายบล็อกพร้อมกัน ก็ใส่ในช่องนี้หนึ่งไซต์ต่อหนึ่งบรรทัด ของผมใส่ว่า http://itshee.exteen.com
• Editions - อันนี้ก็เลือก standard
• ช่องสุดท้ายก็ติ๊กถูกไว้ว่าได้อ่านเงื่อนไขแล้ว

พอไปหน้าต่อไป ก็จะมีให้ทดลองใช้งาน คราวนี้ก็กด Finish ล่างสุด อันนี้ก็ถือว่าสร้างเสร็จแล้วก็จะกลับมาที่หน้าหลัก คราวนี้ก็กดเข้าไปตรง Control Panel หน้านี้ก็จะปรับแต่งค่าได้เยอะแยะ แต่เราจะมาเอาโค้ดก็กดเข้าไปที่ Code จะเห็นเหมือนรูปด้านล่าง



เข้าไปก็จะมีให้เลือก Hosting options สามแบบ ซึ่งของผมเองเลือกแบบ iframe และต่อมาในช่อง Specify search results details ก็ใส่ชื่อหน้าที่เราสร้างไว้ในขั้นตอนแรกไป ซึ่งของผมก็คือ "http://itshee.exteen.com/page-search" ใส่เข้าไปในช่องเสร็จ คราวนี้จะมีโค้ดให้ใส่สองกล่อง

• Search box code (กล่องบน) อันนี้คือตัวโค้ดที่จะแสดงเป็นช่องให้ค้นหา ซึ่งผมเอาไปใส่ใน custom code ในขั้นตอนต่อไป
• Search results code (กล่องล่าง) อันนีจะเป็นโค้ดสำหรับแสดงผล ซึ่งโค้ดอันนี้นำไปใส่ในหน้าที่เราทำไว้ในขั้นตอนแรก

3) ใส่โค้ดเข้าไปใน exteen คราวนี้ก็ถึงตอนใส่โค้ด ในส่วน custom code (เรื่อง custom code สามารถอ่านได้ที่บล็อกคุณ XViStA เขียนอธิบาย - ขออ้างอีกรอบครับ) โดยขั้นตอนนี้ เริ่มต้นด้วยการลาก custom code ขึ้นมาไว้ตำแหน่งที่เราจะใส่กล่องค้นหา ของผมจะมี 4 อัน แต่ใส่โฆษณาตรง Custom code 3 (จริงแล้วไม่มีผลเท่าไร เพราะว่าตัวกล่องค้นหาของผมจะอยู่บนสุด ไม่ได้อยู่ในเมนู) พอได้แล้วก็กดปุ่มดินสอ ก็จะเรียกหน้าจอขึ้นมาให้เราใส่

ช่องนี้ก็ไม่ต้องทำอะไรมาก เอาโค้ดจากกูเกิลจากขั้นตอนที่ 2 มาใส่ แล้วก็กด OK ก็จะกลับไปหน้าเดิม แต่ของผมจะให้มันลอยขึ้นไปอยู่ส่วนบนสุด โดยผมใช้ CSS เข้ามาช่วย โดยเพิ่ม

ส่วนบนสุดเพิ่มไว้แรกสุด 
<div class="myTop">
<div id="searchbox">
และ
</div>
</div>
ไว้ท้ายสุด

โดยโค้ดทั้งหมดของผมเป็น

<div class="myTop">
<div id="searchbox">
<!-- Google CSE Search Box Begins  -->
<form action="http://itshee.exteen.com/
page-search" id="cse-search-box">
<input type="hidden" name="cx" 
value="016668095734609069486:fjfuhrlldhw" />
<input type="hidden" name="cof" value="FORID:11" />
<input type="text" name="q" size="25" />
<input type="submit" name="sa" value="Search" />
</form>
<script type="text/javascript" src="http://www.google.com/
coop/cse/brand?form=cse-search-box⟨=en">
<!-- Google CSE Search Box Ends -->
</div>
</div>

พอเสร็จแล้วก็กด OK แล้วอย่าลืมเซฟ ถ้าเราไม่เซฟ ก็จะไม่ีอะไรเกิดขึ้น (ซึ่งจะขึ้นข้อความว่า "custom code here" แทนที่) คราวนี้คุณก็จะมีกล่องค้นหาแล้ว แต่มันจะไม่ยังอยู่ในตำแหน่งด้านบนตามที่ต้องการ

4) แก้ไข CSS ให้กล่องลอยขึ้นมา - คราวนี้ก็เข้าไปในหน้า CSS Editor ของ exteen (Manage → Theme → CSS Editor) เนื่องจากขั้นตอนที่ 3 ผมเพิ่ม class กับ id เข้าไป คราวนี้เลยต้องไปกำหนดเพิ่ม โดยเลือกไปยัง theme อันปัจจุบันที่ใช้อยู่ และลงไปล่างสุด เพิ่มต่อท้ายเข้าไป

.myTop{
position:absolute;
top:0px;
z-index: 10;
}
#searchbox{
z-index:11;
margin:auto;
margin-top:85px;
margin-left:-40px
}

ซึ่งคราวนี้ถ้าได้ลองรีเฟรช (Ctrl+R หรือ Ctrl+F5) ก็จะเห็นว่ามันลอยขึ้นมาแล้ว

โดย CSS ที่ใช้อธิบายคร่าวๆ คือตัว class- myTop จะเป็นกล่องอยู่ด้านบนสุดของจอ และ id - searchbox จะเป็นของเฉพาะตัวค้นหา

• position:absolute - กำหนดตำแหน่งไม่สัมพันธ์กับตัวอื่น
• top:0px - ห่างจากขอบบน 0 พิกเซล
• z-index - อันนี้เป็นเหมือนเลเยอร์ของ div นี้ โดยผมกำหนดเป็น 10 และ 11 โดย searchbox จะอยู่เหนือ myTop อีกต่อ
• margin-top, margin-left - สองอันนี้ก็เป็นระยะห่างจากขอบเดิมที่วางอยู่ ถ้าใครอยากปรับตำแหน่ง ก็ปรับตรงสองตัวนี้ครับ

5) ตกแต่ง -  อันนี้ก็แต่งเพิ่มอีกนิดหน่อยคือ ปุ่มค้นหาของคนอื่นจะเป็นปุ่มสีเทาให้กด ซึ่งผมเห็นว่าไม่สวยงาม เลยทำเป็นภาพแทน ทำในโฟโตชอป ก็ได้เป็นภาพเล็กๆ คราวนี้ก็ย้อนไปในโค้ดที่ใส่ใน custom search ที่ทำขั้นตอนที่ 3 โดยแทนที่บรรทัดที่เขียนว่า

<input type="submit" name="sa" value="Search" />

ด้วย

<input type="image" value="submitname" 
src="http://itshee.exteen.com/images/theme/search_button.jpg"
width="62" height="25" border="0" alt="Search" name="image">

เขียนไปเขียนมายาวเฟื้อย อย่าถือสากันนะ