• knife set
  • feed

    หลังจากที่มาสเตอร์แชมป์ได้เปิด 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">
    
    ซึ่งถ้าคุณมีภาพของคุณเอง ก็เปลี่ยนตำแหน่งไฟล์ภาพตรง src และขนาดความกว้าง ความยาวตามต้องการ

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

    ขอบคุณมากครับ ลองทำตามดูแล้ว แต่ว่า หน้า page-search ของแต่ละคนจะรู้ได้ยังไงล่ะครับ
    Hot!

    #31 By Ratcicle on 2008-05-15 18:16

    จะลองเอาไปศึกษาดูค่ะ ขอบคุณมากนะคะ

    #30 By eeddy(อี๊ด) on 2008-05-10 21:46

    ขอบคุณน้อ... ทำตามแล้วล้ะ.. big smile Hot!

    #29 By xViStA on 2008-05-07 23:05

    ^
    เป็นเหมือนคอมเม้นต์ 27 ค่ะ
    ไม่มีอะไรเกิดขึ้น
    แต่ว่าเปลี่ยนไปให้ค้นหาเด้งหน้ากูเกิ้ลแทนแล้ว
    มีประโยชน์มากค่ะHot!
    ผมทำไม่สำเร็จครับ
    กดค้นหาแล้ว ข้อมูลหน้า search page หยุดนิ่ง ไม่มีอะไรเกิดขึ้น

    #27 By มนุษย์กล่อง on 2008-05-05 13:31

    เยี่ยมไปเล้ยHot! Hot!

    #26 By amino-x on 2008-05-01 14:23

    แจ่มเลย


    แต่บล็อกผมคงขอผ่าน ไม่มีอะไรมากมายขนาดนั้น sad smile

    #25 By book on 2008-04-30 20:09

    ยอดเลยละคะ >w<
    ขอบคุณนะคะ big smile

    #24 By ★+::+@MilY+::+★ on 2008-04-30 09:08

    มีประโยชน์มั่กๆbig smile Hot! Hot! Hot!

    #23 By on 2008-04-29 23:39

    entryนี้ความรู้มากมายHot! ขอบคุณค้าบ~

    #22 By 9rockky △□○x on 2008-04-29 22:07

    ไม่เหนได้เลยอ่ะค่ะ พอเค้าไปที่เวปเเล้ว คลิกเข้าไปที่CSG มันก้ให้ sing in เข้าอ่ะค่ะ

    พอสมัครเเล้วเข้าเเล้ว ก้ไม่เห็นมีที่ให้กรอกเลยง่ะ


    เเต่ก้..ขอบคุนมากค่ะ^^

    #21 By Ice Choco on 2008-04-29 18:51

    ขอเอาไปใช้ด้วยคนนะครับ ขอบพระคุณมากครับbig smile

    #20 By chonchonjung on 2008-04-29 17:54

    มีประโยชน์ดีครับ Hot!

    #19 By chubby on 2008-04-29 17:21

    ทำได้แล้วค่ะ ขอบคุณนะคะ คุณเจ้าของบล็อคHot!

    #18 By ruk21us on 2008-04-29 15:51

    หน้า search page กด edit เข้าไปแล้วเลือก

    Disable WYSIWYG ตรงมุมขวาล่างครับ

    เสร็จแล้วก็ copy ลงไปแล้วเซฟครับ

    #17 By manop on 2008-04-29 05:17

    สวัสดีค่ะ ขออนุญาตถามว่าโค้ดที่เราต้องนำไปใส่ในหน้าที่เราสร้างขึ้นเป็น search page นี่ใส่ยังไงหรือคะ ไม่เข้าใจในขั้นตอนนี้น่ะค่ะ ขอบคุณค่ะ

    #16 By ruk21us on 2008-04-29 04:59

    เห!! ขอบคุณนะครับ เพิ่งเห็นสคริปต์มันนี่แหละ

    #15 By Shuu Exteen on 2008-04-26 11:07

    ขอบคุณมากครับ ^^ Hot! Hot! Hot!
    ว้าว
    จะรอดูกล่องคนอื่นบ้าง

    มีสีสันขึ้นอีก

    #13 By PoY on 2008-04-25 19:30

    Hot!
    ไว้ว่างๆเดี๋ยวจะลองทำตามดูบ้างนะค่ะ

    #12 By ~memay~ on 2008-04-25 18:58

    ทำแบบ Custume Code ยากอ่ะ ผมยังไม่ได้ลากฟังค์ชั่นนี้มาเล่นเลย

    #11 By หนึ่ง on 2008-04-25 18:49

    ผมปรับความกว้างของ page search แล้วล่ะครับ
    ขนาดกำลังดี ...

    ผมว่าปุ่ม Search มันอยู่สูงไปน่ะครับ
    มันไม่พอดีกับ search box
    ถ้าจะปรับตำแหน่งมันลงมาจะทำยังไงดีครับ

    big smile
    พี่มานพ ผมลองทำดูแล้วล่ะครับ
    ลองไปตรวจดูการบ้านได้ครับ อิอิ
    big smile
    Hot!

    ครูดีลูกศิษย์เก่ง 555
    ขอบคุณคุณ PseudoMedicine_(。◕‿◕。 ) ครับที่แวะมาบอก ตอนนี้แก้แล้วครับ (โดยต้องลองกด refresh ดูครับ)

    ส่วนคุณ robocon ไม่ต้องกลัวเรื่องแก้โค้ดนะครับ เป็นปกติของการทำเว็บ และส่วนที่แก้ก็เป็นแค่ input form ธรรมดาของ HTML big smile

    #8 By manop on 2008-04-25 13:37

    เออ...ไปแก้โค้ดอย่างนี้ไม่เป็นไรแน่นะครับ...sad smile

    ผมล่ะเสียวสันหลังวาบๆยังไงไม่รู้...sad smile

    #7 By robocon on 2008-04-25 12:12

    อย่างนี้ต้องลอง ขอบคุณคร้าบ Hot!

    #6 By ไอ้แป้น : i-phan on 2008-04-25 11:27

    ขอบคุณมากครับ ไว้เดี๋ยวลองทำดู
    ที่ลองดำน้ำเองก็เฉพาะหน้า page-search question
    เดี๋ยวลองทำส่วน custom code มั่ง Hot!

    #5 By Bucky Ball on 2008-04-25 11:00

    Hot! ไว้ก่อนครับ ว่าแต่ คุณมานพครับ แฟลชเฮดบลอกมันหล่นมาบังเอนทรีใน IE น่ะครับ

    #4 By on 2008-04-25 09:55

    ขอบพระคุณมาก ๆ ครับผม big smile Hot!

    #3 By mondaytakeshi on 2008-04-25 08:14

    Hot!

    #2 By melody in the world of the tale on 2008-04-25 08:01

    โอ้ว สุดยอดไปเลย!
    ไว้ว่างๆลองทำมั่ง > <
    Hot!

    #1 By neko on 2008-04-25 07:39