#Update 2012.03.21 วิธีประยุกต์เพิ่มเติม

   สำหรับคนที่ชอบเขียนเอนทรีที่เนื้อหาโคตรเยอะ ซึ่งนอกจากจะเป็นเอนทรี Howto ต่าง ๆ แล้ว ไม่ว่าจะเป็นเอนทรีจำพวกอธิบายเชิงวิชาการ หรือเอนทรีที่มีขั้นตอนหลายหลาก เอนทรีที่มีหัวข้อแยกย่อยเยอะ ๆ น่าจะนำไปประยุกษ์ใช้อย่างยิ่งยวด เพราะ จขบ. รับรองได้เลยว่า คนอ่านจะอ่านสบายขึ้นเป็นกอง อีกทั้งเนื้อหายังดูอ่านง่ายขึ้นอย่างมากมายทันตา

ถ้าสงสัยว่าลิงค์กระโดดคืออะไร ลองคลิกลิงค์นี้ดู ไปล่างสุดของเอนทีนี้

หรือเวลาเอาไปใช้งานจริงจะได้ประมาณนี้ [Link] (เข้าไปแล้วลองกดดูตรง Contents ครับ)

แจ่มเลยมั้ยล่ะ Smile

   ก่อนอื่นต้องขออธิบายก่อนว่า สิ่งที่เราต้องทำมีทั้งหมด 2 จุด คือ "ลิงค์" ที่เอาไว้กดกับ "เป้าหมาย" หรือบรรทัดที่ต้องการให้กระโดดไปหานั่นเอง ดังนั้นเรามาดูวิธีทำกันเลยดีกว่า

1. การทำลิงค์

สำหรับการทำลิงค์นั้นไม่ยากเลย แค่คลุมดำข้อความหรือรูปภาพ จากนั้นก็กดปุ่มลิงค์ตามปกติ แล้วใส่ชื่อที่เราตั้งไว้สักชื่ออะไรก็ได้ ในที่นี้ผมจะใช้ชื่อว่า jump แล้วกัน และผมก็จะใส่ในช่อง URL ไปว่า #jump สังเกตว่าจะมี "#" ด้วย สำคัญนะครับ อย่าลืมใส่

▼ คลุมดำ แล้วกด Insert link

▼ อย่าลืมใส่ "#" เพราะมันเป็นการบอก Browser ว่า กดลิงค์แล้วไม่ต้องไปไหนไกล มันอยู่ในหน้านี้นี่แหละ

 

2. ทำเป้าหมาย

สำหรับการทำเป้าหมายก็อาจจะไม่สะดวกเหมือนทำลิงค์ แต่ก็สามารถทำได้ไม่ยากเลย แต่อาจจะมึน ๆ หน่อยกับคนที่ไม่ถูกกับ Code โดยให้เข้าไปโหมด HTML

มันจะมีตัวหนังสือเป็นพรืดอยู่มากมายเลยแหละ อันนี้ทุกท่านต้องลองจับจุดเอาว่าจะดูยังไง ว่าบรรทัดไหนเป็นบรรทัดไหนนะครับ แล้วหลังจากได้บรรทัดที่ต้องการแล้ว ก็ให้แทรกคำนี้ลงไป

▲ สังเกตว่า ผมได้ใส่คำว่า jump เหมือนกับคำที่ผมตั้งไว้ก่อนหน้านี้นั่นเอง แต่คราวนี้จะไม่มี "#" อย่าเผลอใส่ละ ส่วนคำว่า jump สามารถเปลี่ยนเป็นอะไรก็ได้ แต่ขอให้คำที่ลิงค์กับที่เป้าหมายเป็นคำเดียวกันก็พอ

ในที่นี้ผมจะใส่คำดังกล่าวไว้บรรทัดล่างสุดของเอนทรี เพื่อให้กดลิงค์แล้วกระโดดมาบรรทัดล่างสุดนั่นเอง แล้วก็กด Update หลังจากเขียนเอนทรีของเราเสร็จเรียบร้อยแล้ว ก็ให้ทำการ Publish หรือจะ Save เอนทรีไปเลย แล้วโค้ดที่ว่าจะถูกบันทึกไว้ พร้อมใช้งานได้ทันที เมื่อเรา Publish เอนทรี

ส่วนใครที่เข้าไป Edit เอนทรีนั้นก็ไม่ต้องตกใจนะครับว่าโค้ด a name เมื่อกี้ที่เขียนไว้มันหายไป เพราะมันไม่ได้หายไปไหน เพียงแต่เราจะมองไม่เห็น และหากว่าท่าน กลัวที่จะเผลอลบไปโดยไม่ตั้งใจระหว่างแก้เอนทรีละก็ สามารถกด Use Old Editor ที่ด้านล่าง เพื่อให้ใช้ Editor ตัวเก่าของ Exteen แล้วท่านจะเห็นว่ามีสัญลักษณ์โผล่ขึ้นมาในจุดที่เราสร้าง a name โค้ดเอาไว้

▼ จะเห็นเป็นสัญลักษณ์รูปสมอเรือ แสดงให้รู้ว่าถ้ากดลิงค์แล้ว จะเด้งมายังจุดนี้ทันที

====================

จบการเขียนโค้ดแบบธรรมดาไปเรียบร้อยแล้ว ต่อไปนี้เราจะมาประยุกต์โค้ดกันอีกนิดนึง เพื่อให้มันใช้งานได้ดีจริง สำหรับใครที่ได้ลองใช้แล้วจะพบกับปัญหา เวลากดลิงค์ไปแล้ว Browser มันก็เลื่อนจอไปที่เป้าหมายจริง แต่...

a name ที่ตั้งไว้ มันดันเลยขึ้นไปซะงั้น เป็นปัญหาที่เห็นชัดมาก เมื่อใช้อยู่บน Exteen เวอร์ชันใหม่นี้

ดังนั้น วิธีแก้ก็คือให้เราเพิ่มโค้ดนี้ลงไปใน CSS ของบล็อกซะ ใส่ไว้บรรทัดไหนก็ได้

.entry a[name] {position: relative; top: -120px; display: block;}

*อธิบาย

.entry a[name] เป็น Selector ของ CSS ใช้ระบุตำแหน่งว่าโค้ดที่เราจะเขียนต่อไปนี้อยู่ที่ไหน อย่างในที่นี้ ".entry a[name]" หมายถึงจะอยู่ที่ Attribute "a" ที่มี tag "name" อยู่ด้วย และ Attribute "a" จะต้องอยู่ใน Class "entry" ซึ่งหมายถึงเฉพาะในเอนทรีที่เขียนเท่านั้น (หากไม่ใส่ .entry ไว้ข้างหน้า จะทำให้ชื่อคนที่คอมเมนท์ในบล็อกเราเลยขึ้นมา ลองดูสิ)

{position: relative; top: -120px; display: block;} เป็นโค้ด CSS หมายถึง Element ดังกล่าวที่เรากำหนด ให้เขยิบเลยเลยขึ้นไปด้านบน 120px และตำแหน่งที่ใช้อ้างอิงว่าให้เขยิบไปจากเดิมเท่าไหร่ คือตำแหน่งที่มันเคยอยู่เดิม (relative)

ส่วนบรรทัดที่เราต้องการก็ไม่ต้องไปยุ่งอะไร เขียนเหมือนเดิมทุกประการ

====================

เอาละคราวนี้จบจริงแล้ว สำหรับวิธีประยุกษ์ด้านล่างนี่ผมเพิ่มมาใหม่ หวังว่าจะช่วยให้ใช้งานได้จริงมากยิ่งขึ้นนะครับ ใครที่คอมเมนท์ไว้ในเอนทรี ผมจะส่ง EMS ไปบอกหลังไมค์ถึงการอัพเดทวิธีนี้นะครับ ถ้าเป็นการรบกวนต้องขออภัยด้วย

====================

กลับไปด้านบน

Recommend