สวัสดีทุกท่าน ไม่คิดว่าตัวเองจะได้กลับมาโพสต์อะไรที่นี่อีกนะเนี่ย คิดถึงจริง ๆ  อย่างที่รู้กันว่าก่อนหน้านี้ Exteen นั้นกลายเป็นนิยามของของความอืดและเออเร่อร์ อย่างต่อเนื่อง จนผมต้องย้ายบ้านไป BKWorld ทุกวันนี้เหมือนสถานการณ์จะกลับมาดีขึ้นมากแล้ว วันนี้เลยแวะเวียนมาเขียนสักหน่อย โดยตั้งใจไว้ว่า ถ้า Exteen ไม่เน่าอีก ผมจะกลับมาเขียนเทคนิกการแต่งบล็อก Exteen ตอนว่าง ๆ ไปเรื่อย ๆ นะครับ ท่านไหนหลงเข้ามาแล้วสนใจละก็ ติตดามกันได้เลยครับที่บล็อกนี้ และผมขอเพิ่มหมวดใหม่สำหรับเทคนิคแต่งบล็อก Exteen โดยเฉพาะ Theme category

เข้าประเด็นหัวบล็อกดีกว่า...

วันนี้ขอเริ่มจากอะไรที่หัว ๆ สุด ๆ เลยอย่าง Favicon ที่อยู่หัวเว็บ ซึ่งหลายคนก็น่าจะรู้จักกันดี และที่จริงแล้วก็มีหลายต่อหลายบล็อกเขียนเอาไว้แล้ว ที่สำคัญผมเองก็เคยทำตามวิธีเหล่านั้นเหมือนกันตอนสมัยที่ยังสิงอยู่ที่นี่ ทว่าวันนี้ผมขอแนะนำวิธีที่ดีที่สุดสำหรับการใส่ Favicon ใน Exteen ครับ

ขออธิบายสั้น ๆ แล้วกันว่า Favicon ก็คือไอคอนที่จะแสดงอยู่ที่หัวแท็บของเบราเซอร์ที่เราใช้ตามรูปเลย ทีนี้วิธีการปกติที่เราจะใส่ Favicon เข้าไปได้ก็คือ ต้องใส่โค้ดเข้าไปในส่วน <head> ของหน้าเว็บ ดังนี้

<link rel="shortcut icon" href="favicon.ico" />

แต่อย่างที่รู้กันว่า Exteen นั้นไม่ได้ปล่อยให้เราเข้าไปแก้ไขอะไรได้มากนัก และนั่นรวมถึงส่วนของ <head> ด้วย ดังนั้นเราจะแทรกโค้ดดังกล่าวด้วยวิธีปกติไม่ได้ครับ หลาย ๆ บทความจึงแนะนำว่าให้นำโค้ดไปใส่ใน Custom Code widget โดยตรงบ้าง เอาไปแทรกใน Link ของ Exteen บ้าง ซึ่งนั่นไม่ถูกต้องครับ ทำให้บางครั้งมันไม่แสดงหรือบางเบราเซอร์อย่าง Chrome ไม่สามารถแสดง Favicon ให้เราเห็นได้ ซึ่งผมขอแก้ปัญหานี้ได้ด้วย jQuery ครับ

jQuery คืออะไรนั้นผมขอละไว้นะครับ ไม่อยากให้บล็อกยาวเกินไป แต่ที่แน่ ๆ คือ หลังจากที่ Exteen ปรับโฉม จึงทำให้มี jQuery เวอร์ชั้น 1.7.1 built in มาให้เราใช้โดยปริยายครับ (เพราะ Exteen ใหม่ ใช้ความสามารถของ jQuery ด้วย) ทำให้เราไม่ต้อง Embed jQuery เพิ่่มเติมตามปกติแต่แย่างใด (ใครไม่เข้าใจข้ามไปเลยครับ)

วิธีใส่ที่ถูกต้องและดีที่สุดสำหรับ Exteen ก็คือ นำโค้ดนี้ไปใส่ใน Custom Code widget อันไหนก็ได้ครับ

<script>
<$(function() {
   $('head').append('<link rel="shortcut icon" href="http://yourfaviconlink.ico" />')
});
</script>

สำหรับตรงคำว่า http://yourfaviconlink.ico ก็คือลิงก์ไอคอนที่คุณต้องการครับผม ซึ่งในที่นี้เป็นสกุล .ico ถ้าหากว่าหาที่ฝากไฟล์สกุลนี้ไม่ได้ ก็อนุโลมให้ใช้ .png แทนได้ครับผม ใช้ได้เหมือนกัน

ส่วนโค้ดนี้มันทำอะไรกับเว็บ ผมขอแปลภาษาโค้ดให้เข้าใจสั้น ๆ แล้วกันครับว่า ให้เอาโค้ด <link..> ไปแทรกต่อบรรทัดสุดท้ายของ <head> ด้วยคำสั่ง append นั่นเองครับ นั่นหมายความว่าวิธีนี้จะทำให้ <link..> ของเรานั้นไปอยู่ถูกที่ตามที่มันควรจะเป็นแล้วละครับ ทำให้ไม่ว่าจะเปิดบนเบราเซอร์ไหน ก็ไม่มีปัญหาอีกต่อไป

เอาละครับสำหรับบทความต้อนรับการกลับมา ก็ขอจบเท่านี้แหละครับ ไม่สั้นไม่ยาว ใครชอบเทคนิคแต่งบล็อกแบบนี้ ก็อย่าลืมตามอ่านกันนะครับ แล้วผมจะทยอยมาเขียนให้เรื่อย ๆ

Recommend