วิธีเปลี่ยนรูปแบบ Font บน Blogger ด้วย Cufon Font

สอนทำบล็อก วิธีทำ blogspot
ต่อเนื่องจากบทความ 3 วิธีการปรับแต่ง Fonts ใน Blogger ที่ได้กล่าวถึงวิธีการปรับแต่ง Fonts ใน Blogger ในรูปแบบต่าง ๆ 3 รูปแบบ  บทความนี้ก็จะนำเสนอการปรับแต่ง Fonts ใน Blogger ด้วย จาวาสคริปต์ที่สร้างจากบริการของ Cufon

cufon.shoqolate.com เป็น website ที่ให้บริการ Generate โค้ดจาวาสคริปต์เพื่อให้สำหรับเปลี่ยนรูปแบบ Fonts ของ wesite รวมถึง Blogger ด้วย

ขั้นตอนการเปลี่ยนรูปแบบ Fonts โดยใช้ สคริปต์ของ Cufon

ขั้นที่ 1 เตรียมและเลือก Fonts ที่ต้องการให้แสดงผลใน Blogger
คุณสามารถดาวน์โหลด Font ที่แจกฟรีจากรายชื่อเว็บไซต์ด้านล่างที่นี้
(ผมแนะนำให้เท่านี้นะครับที่เหลือลองค้นเพิ่มเติม)

http://www.f0nt.com
http://www.wazu.jp/gallery/Fonts_Thai.html
http://www.dafont.com
http://www.fontstock.net
http://www.urbanfonts.com
http://www.1001freefonts.com
http://www.pickfonts.com
http://www.highfonts.com
http://www.fontsquirrel.com
http://www.wonderfonts.com
http://www.fontspace.com
http://www.gmkfreefonts.com/index.php
http://font.downloadatoz.com
http://www.freepremiumfonts.com
http://www.downloadfreefonts.com
http://www.pickafont.com


ขั้นที่ 2 สร้างโค้ดจาก Cufon
เมื่อได้ Fonts ที่ต้องการแล้วไฟล์ของ Fonts อาจจะมีสกุลไฟล์เป็น TTF หรือ OTF หรือ PFB

สมมติว่าตอนนี้ผมจะใช้ Font ชื่อ TH Krub ผมก็เอาไฟล์มาวางไว้ที่ Desktop เพื่อความสะดวก

สอนทำ Blogger

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



ขั้นที่ 3 สร้าง Script จาก Cufon
ในขั้นนี้ให้ทุกคนไปที่
http://cufon.shoqolate.com/ 
สคริปต์ที่เราต้องใช้มี 2 สคริปต์ด้วยกัน ดังนั้นเราสร้างสคริปต์ 2 ครั้งดังนี้

3.1 คลิกที่ ปุ่ม Download เพื่อรับ Script คำสั่งหลัก

วิธีสร้าง blogger

ผลที่ได้คือ ไฟล์  cufon-yui.js ซึ่งเป็นไฟล์ของจาวาสคริปต์ที่เราจะนำไปใช้ต่อไป ดังนั้นให้เก็บไฟล์นี้เอาไว้กอ่น

3.2 ขั้นต่อมาให้ Upload ไฟล์ของ Fonts ที่ได้เตรียมไว้และตั้งค่าต่าง ๆ ดังนี้
ในที่นี้ผมเตรียมไฟล์ไว้ 4 ไฟล์ตามที่ได้อธิบายไว้ข้างต้นแล้ว  ดังนั้นผมก็จะ upload ไฟล์ทั้ง 4 ขึ้นไปให้หมด และสำหรับการตั้งค่าผมจะกล่าวถึงจุดที่สำคัญเท่านั้น ซึ่งแสดงดังรูปด้านล่าง

เลือกไฟล์จากเครื่องเพื่อ upload >> ถ้ามีหลายไฟล์ให้ตั้งชื่อใหม่

แต่ง blogspot และ Blogger
การตั้งค่าการแสดงผลของ Fonts
 
สอนแต่งบล็อก
ถ้าไม่จำกัดผู้ใช้สคริปต์ที่กำลังสร้างให้เว้นว่างเอาไว้

ทำ blog

ยอมรับเงื่อนไขและ คลิก Let’s do this! เพื่อ Generate โค้ด

วิธีแต่ง Blogger


เมื่อดาวน์โหลดสคริปต์ที่ 2 ได้แล้ว ถ้าหากไฟล์ที่ได้มีชื่อยาวเกินไป ก็ควรปรับแต่งให้ชื่อสั้นลง (ในที่นี้ผมปรับเป็นชื่อ TH_Krub)

แก้ไขโค้ด template blogger สอนสร้างบล็อก




ขั้นที่ 4 ฝาก Java Script ไว้ที่ Free Host หรือ Server ของคุณเอง
จากขั้นที่ 3 ตอนนี้เราได้ไฟล์ 2 ไฟล์คือ cufon-yui.js  และ  TH_Krub.js  
ให้ทำการฝากจาวาสคริปต์ทั้ง 2 ไฟล์นี้ ไว้ที่ Free Host หรือ Server ของคุณเอง โดยอาจจะใช้ Host หรือ วิธีต่อไปนี้

http://www.sigmirror.com
http://www.yourjavascript.com

ซึ่งเมื่อฝากไฟล์แล้วคุณจะได้ URL ไฟล์ 2 ไฟล์ดังนี้

http://hackublog.googlecode.com/files/cufon-yui.js
http://hackublox.googlecode.com/files/TH_Krub.js

หมายเหตุ
ถ้าคุณมีปัญหาเรื่อง Server คุณอาจจะใช้ไฟล์แรก คือ
http://hackublog.googlecode.com/files/cufon-yui.js
ที่ผมได้ทำการ upload เลยก็ได้ แต่ไฟล์ที่ 2 คุณจะต้อง upload เองเพราะรูปแบบ Font ที่คุณต้องการอาจจะไม่เหมือนกับที่ผมทำให้ดูในตัวอย่างนี้



ขั้นที่ 5 การเรียกใช้สคริปต์ใน Blogger

ตำแหน่งในการวางสคริปต์ นั้นเราจะวางใน HTML ของ Template โดยวางเอาไว้ก่อนหน้าโค้ด </head>

แก้ไข Fonts ใน Blogger

การใช้โค้ด

สคริปต์ที่เราจะใช้ในการปรับแต่ง Fonts ใน blogger ทำโดยใช้โค้ดต่อไปนี้

5.1 ถ้าต้องการใช้ Fonts เพียงรูปแบบเดียวให้ใช้โค้ด

<script src='http://hackublog.googlecode.com/files/cufon-yui.js' type='text/javascript'/>
<script language='javascript' src=' http://hackublox.googlecode.com/files/TH_Krub.js ' type='text/javascript'/>
<script type='text/javascript'>
    Cufon.replace(
        &#39; #header h1, h2.post-title, #sidebar h2,#content h3, widget h2&#39;,
        { fontFamily: &#39;TH Krub&#39; });
</script>

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

และโค้ดสีม่วงคือ id หรือ class ที่ต้องการให้ Fonts เปลี่ยนรูปแบบ สามารถดูได้จาก template ของคุณเอง
(ถ้าดูไม่เป็นให้สอบถามผมมาอีกทีนะครับ)

เมื่อเอาโค้ดไปวางก่อนโค้ด </head> ผลที่ได้จะเป็นดังภาพ

แต่ง blog

5.2 กรณีที่ต้องการใช้ Fonts มากกว่า 1 รูปแบบใน Template เดียวให้ใช้โค้ดดังนี้

<script src='http://hackublog.googlecode.com/files/cufon-yui.js' type='text/javascript'/>
<script language='javascript' src='http://hackublox.googlecode.com/files/TH_Krub.js' type='text/javascript'/>
<script language='javascript' src='http://hackublog.googlecode.com/files/Bebas_400.font.js' type='text/javascript'/>
<script type='text/javascript'>
Cufon.replace(&#39; #header h1, h2.post-title, #content h3 &#39;, { fontFamily: &#39; TH Krub &#39;});
Cufon.replace(&#39; #sidebar h2,.widget h2&#39;, { fontFamily: &#39; Bebas &#39;});
</script>

ผลที่ได้จะเป็นดังภาพ

ทำบล็อก

คุณสามารถเพิ่มสคริปต์ของ Fonts เข้าไปได้ตามต้องการโดยแทรกสคริปต์ของโค้ด และ ระบุ id หรือ class ที่ต้องการให้ Fonts เปลี่ยนเช่นถ้าต้องการใช้ Fonts 4 แบบ โค้ดที่ใช้เป็น

<script src='http://hackublog.googlecode.com/files/cufon-yui.js' type='text/javascript'/>
<script language='javascript' src=' URL font1.js ' type='text/javascript'/>
<script language='javascript' src=' URL font2.js ' type='text/javascript'/>
<script language='javascript' src=' URL font3.js ' type='text/javascript'/>
<script language='javascript' src=' URL font4.js ' type='text/javascript'/>

<script type='text/javascript'>
Cufon.replace(&#39; ไอดีหรือคลาสที่ต้องการให้ Font เปลี่ยน &#39;, { fontFamily: &#39; ชื่อ Font1 &#39;});
Cufon.replace(&#39; ไอดีหรือคลาสที่ต้องการให้ Font เปลี่ยน &#39;, { fontFamily: &#39; ชื่อ Font2 &#39;});
Cufon.replace(&#39; ไอดีหรือคลาสที่ต้องการให้ Font เปลี่ยน &#39;, { fontFamily: &#39; ชื่อ Font3 &#39;});
Cufon.replace(&#39; ไอดีหรือคลาสที่ต้องการให้ Font เปลี่ยน &#39;, { fontFamily: &#39; ชื่อ Font4 &#39;});
</script>

หมายเหตุ
1. การเพิ่ม รูปแบบ Fonts แต่ละครั้งทำได้โดยทำซ้ำขั้นตอน 1-4 ทุกครั้งครับ
2. โค้ดของ Fonts ในตัวอย่างนี้คุณสามารถเอาไปใช้ได้เลยครับ เพราะผมไม่ได้จำกัดสิทธิ์เอาไว้

ลองทำดูนะครับ ถ้าได้ทำครั้งหนึ่งก็จะพบว่าขั้นตอนที่กล่าวมาทั้งหมดนี้ไม่ยากเลย ทำได้เพียง 5-10 นาทีเท่านั้น สวัสดีครับ

ตอนนี้มีความคิดเห็น : 17 ความคิดเห็น
หากคุณมีปัญหาหรือข้อสงสัยใดๆ สามารถสอบถามได้จากกล่อง comment ด้านล่างนี้ได้เลยครับ

  1. เห็นมีของ Google ด้วยอะครับ http://code.google.com/apis/webfonts/

  1. @ KINGRPG : เคยเข้าไปดูอยู่เหมือนกันครับ แต่ยังหา Font ไทยไม่เจอครับ และรูปแบบ Font ยังมีน้อยไปหน่อยครับ

  1. ดู id หรือ class จาก template ไม่เป็นครับ :(

  1. @ MohawkBoiz : ไม่ทราบว่ามีอะไรให้ช่วยไหมครับ ถ้ายังไงรบกวนบอกรายละเอียดนิดนึงครับ

  1. เดี๋ยวส่งรายละเอียด แนบรูปไปที่ fb นะครับ

  1. @ MohawkBoiz : บอก URL ของบล็อก กับสิ่งที่ต้องการจะเปลี่ยนก็พอครับ

  1. มีคำถามครับ มีเว็บไซต์นึง บังคับให้ใช้ font ใน site โดยใฃ้ "Cordia New" เท่านั้น ซึ่ง heading ของ Cordia New เองแสดงผลออกมา (โดยยังไม่ได้ใช้ Cufon แสดงผลไม่สวยงาม) ผมเลยใช้ technic cufon มาช่วย ปรากฎว่า cufon generate font "cordia new" ภาษาไทยพวกสระ และวรรณยุกต์ แสดงผลไม่ถูกต้อง เช่น วรรณยุกต์เยื้องออกไป หรือสระก็เว้น space มากเกินไป (ผม upload รูปให้ดูไม่ได้ ถ้าเป็นไปได้อยากให้ทดสอบดูครับ) ยังหาวิธีแก้ปัญหาไม่ได้ อยากให้ทดสอบดูครับ ผมว่าน่าจะเป็นที่ตัว font เองมากกว่าที่มีปัญหานี้

  1. @Tanangular: ผมก็พบปัญหาที่ว่านี้เหมือนกันครับ เป็นปัญหา font ไทย ซึ่งอาจจะเกิดจากเราไม่ได้ใส่รูปแบบ Font ตัวหนา หรือตัวเอียงลงไปด้วย แนะนำให้ใช้ font TH Krub ตัวนี้ไม่ค่อยมีปัญหา

  1. ก่อนอื่น ขอบคุนมากคับสำหรับความรู้ ผมลองใช้ดูแล้วคับ ใช้งานได้ดีกับ firefox, chrome, safari แต่ใน ie (8) มันไม่ยอมเปลี่ยน font ตามอะคับ

  1. @ Mentallake : ถ้าเป็น IE9 ให้เอาโค้ดนี้วางต่อจากจาวาสคริปต์ชุดที่ติดตั้งไปแล้ว


    <!--[if gte IE 9]>
    <script type="text/javascript">
    Cufon.set('engine', 'canvas');
    </script>
    <![endif]-->

    แต่ถ้าเป็น IE8 ให้ใส่ Meta Tag นี้เพิ่มเข้าไป
    <meta content="IE=8" http-equiv="X-UA-Compatible" />

    วิธีใส่ meta tag อ่านได้ที่บทความนี้ครับ
    http://www.hackublog.com/2010/01/meta-tag-blogger.html

  1. ใช้กับ bloggang ได้มั๊ยค่ะ
    ลองมาทั้งวันแล้วมันไม่เปลี่ยนค่ะ แหะๆ

    http://www.bloggang.com/mainblog.php?id=blog-chan-eng

    ฝากเมลล์ไว้นะคะ pantha.bb@hotmail.com

  1. ตอบคุณแมวเหมียว: ผมไม่ได้ทดลองปรับแต่งกับ bloggang เพราะไม่ค่อยชินกับมานูการใช้งานเลยไม่ทราบว่าใช้ได้หรือเปล่า ขออภัยด้วยนะครับ

  1. ถ้าต้องการใช้ Fonts เพียงรูปแบบเดียวให้ใช้โค้ด/// จากโค้ดนี้แก้เพียง สีม่วงหรือครับ ดูid หรือclass อย่างไร

  1. นอกจาก cufon และมีอันอื่นอีกมั้ยคะ บางครั้งอัพโหลดไฟล์ font ขึ้นไป พอกด let's do this มันขึ้น sorry แบบว่าไม่สามารถดำเนินตามคำขอได้ เลยทำไม่ได้ซักที

  1. http://watplub.blogspot.com
    นี่คือบล็อคของผมครับ ผมต้องการจะแก้ตัวหนังสือทั้งหมดครับ
    ให้เป็นฟ้อนที่ผมต้องการ ผมได้ลองอัพฟ้อนแล้วครับ >> http://newfont.googlecode.com/files/Layiji_MaHaNiYom_BAO_12_400.font.js

    แต่ผมไม่รู้จะวางไว้ตรงไหนและมีขั้นตอนการวางอย่างไรบ้าง

    รบกวนหน่อยนะครับพี่ ขอบคุณครับ

  1. ช่วยดู id หรือ class จาก template ให้หน่อยดูไม่เป็นคับ
    http://baanpoocoffeesurat.blogspot.com/

  1. คือตรงบทความถ้าจะเปลี่ยน font ต้องใช้ class หรือ ไอดีอะไรอ่ะค่ะ

แสดงความคิดเห็น

ถ้าต้องการโพส HTML ให้แปลงโค้ดที่เครื่องมือด้านล่างนี้ก่อนครับ

สร้างบล็อก Facebook SEO บล็อก Linkwheel iMacros Link Wheel