WHAT'S NEW?
Loading...
แสดงบทความที่มีป้ายกำกับ bloggertips แสดงบทความทั้งหมด
แสดงบทความที่มีป้ายกำกับ bloggertips แสดงบทความทั้งหมด
          สวัสดีครับ วันนี้ผมจะมาสอนวิธีการใส่ฟอนต์ลงบล็อกด้วย GoogleFonts เพื่อนๆคงเบื่อกับฟอนต์ธรรมดาๆที่ Blogger ให้เรามาใช่มั้ยล่ะครับ? งั้นวิธีที่ผมจะสอนนี้ละครับจะช่วยเพื่อนๆได้ แต่ต้องกล่าวไว้ก่อนเลยนะครับ ตอนนี้ GoogleFonts ยังไม่มีฟอนต์ภาษาไทยนะครับ ถ้าพร้อมแล้วก็เริ่มกันเลย


  1. ไปที่ GoogleFonts และเซาะหาฟอนต์ที่ต้องการ
  2. เมื่อค้นพบฟอนต์ที่ต้องการแล้วก็กดที่ "Add to Collection"
  3. คลิกที่ปุ่ม "use" ทางขวามือล่าง
  4. มันจะพาเราไปที่หน้า https://www.google.com/fonts#UsePlace:use ให้เราเลื่อนลงไปที่ข้อที่ 4 (ของหน้านั้นนะ ไม่ใช่ข้อที่ 4 ของวิธีนี้)
  5. คัดลอกโค้ดเก็บไว้
  6. เข้าสู่ระบบ Blogger และเลือกบล็อกที่คุณต้องการ
  7. เลือกที่ "แม่แบบ"
  8. คลิกที่ "แก้ไข HTML"


  9. กด "Ctrl+F" และค้นหา <head>
  10. นำโค๊ดที่คัดลอกมา (จากข้อ4) และวางข้างล่าง <head>

    11. ตัวอย่างเวลาวางโค๊ด 
    

    <head>
    

    <link href='http://fonts.googleapis.com/css?family=Nunito:400,700' rel='stylesheet' type='text/css'/>
    

    

    

  11. ใส่  /  หน้าเครื่องหมาย > ตามตัวอย่างข้างบนที่ทำสีแดงไว้
    12. 

  12. เมื่อทำทุกอย่างเรียบร้อยแล้ว ก็กด"บันทึกเทมแพลต"
    13. 






วิธีนำฟอนต์ไปพิมพ์ในโพสต์


ใส่โค๊ดตามด้านล่างนี้ก่อนและหลังข้อความที่ต้องการเปลี่ยนฟอนต์



 <span style="font-family: FontName;"> ข้อความ </span>

เปลี่ยน FontName เป็นชื่อฟอนต์ที่ใส่ไป (ดูได้จาก https://www.google.com/fonts#UsePlace:use )

เปลี่ยน ข้อความ เป็นข้อความที่ต้องการ ย้ำอีกรอบมีเฉพาะฟอนต์ภาษาอังกฤษเท่านั้น





































          สวัสดีครับวันนี้ผมจะมาสอนวิธีการใส่ไอคอน FontAwesome ลงในบล็อกของ Blogger ถ้าพร้อมกันแล้วก็ Let's Go!! go go hormones มันร้อนแรง พลุ่งพล่าน ออกไปเจอโลกกว้างใหญ่  เฮ้ยๆไม่ใช่แล้ว ถ้าพร้อมแล้วก็เริ่มกันเลย











    

  1. เข้าสู่ระบบ Blogger และเลือกบล็อกที่คุณต้องการ
    2. 

  2. เลือกที่ "แม่แบบ" 
    3. 

  3. คลิกที่ "แก้ไข HTML"
    4. 

    

    

    

    

  4. กด "Ctrl+F" และค้นหา <head>
    5. 

  5. คัดลอกโค้ดด้านล่างนี้ และวางข้างล่าง <head>
    6. 

    

    <link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>
    

    
ตัวอย่างเวลาวางโค๊ด

    

    <head>
    

    

     <link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>
    

    

    

  6. เมื่อทำทุกอย่างเรียบร้อยแล้ว ก็กด"บันทึกเทมแพลต"
    7. 






วิธีนำไปใช้งาน



    

  1. เลือกไอคอนที่คุณต้องการที่ FontAwesome Icons
    2. 

  2. คลิกที่ไอคอนที่คุณต้องการ และเว็บจะพาคุณไปหน้าของไอคอนนั้นๆ ที่มีโค๊ดของไอคอนนั้นๆอยู่

    <i class="fa fa-ชื่อไอคอน"></i> ให้คัดลอกและนำมาวางในจุดที่คุณต้องการ (HTML)
    3. 









































    

  1. เข้าสู่ระบบ Blogger และเลือกบล็อกที่คุณต้องการ
    2. 

  2. เลือกที่ "แม่แบบ" 
    3. 

  3. คลิกที่ "แก้ไข HTML"
    4. 

    

    

    

    

  4. กด "Ctrl+F" และค้นหา ]]></b:skin>
    5. 

  5. คัดลอกโค้ดด้านล่างนี้ และวางข้างบน ]]></b:skin>
    6. 

    

    
::-moz-selection {
       background-color: #โค๊ดสีคลุมข้อความ;
       color: #โค๊ดสีตัวอักษรคลุมข้อความ;
}

::selection {
       background-color: #โค๊ดสีคลุมข้อความ;
       color: #โค๊ดสีตัวอักษรคลุมข้อความ;
}


    

    

  6. นำโค๊ดสี (HTML Color Code) ที่ต้องการให้เป็นสีคลุมข้อความและสีตัวอักษรคลุมข้อความ มาวางแทนที่ | หาโค๊ดสีที่คุณต้องการได้ที่ HTML Color Codes
    7. 

  7. เมื่อแก้ไขทุกอย่างเสร็จเรียบร้อย ให้กด "บันทึกเทมเพลต"
    8. 

    

    
ตัวอย่าง สีคลุมข้อความเป็นสีดำ และสีตัวอักษรคลุมข้อความเป็นสีขาว

    

    
::-moz-selection {
       background-color: #000000;
       color: #FFFFFF;
}

::selection {
       background-color: #000000;
       color: #FFFFFF;
}


    

















































Social Links:

































Created by ThemeXpose