บทความ

Template ใน Blogger.com มีแบบไหนให้เลือกบ้าง

รูปภาพ
หลายท่านอยากทราบข้อมูลเบื้องต้นว่าถ้าจะทำเว็บไซต์ด้วย Blogger.com มีแบบเว็บสวย ๆ ไหมนะ แต่การจะดูแบบตัวอย่างเว็บหรือที่เรียกว่า Template นั้น ท่านต้องเข้าสู่ระบบของ Blogger.com ก่อน ซึ่งหลายท่านต้องการข้อมูลเบื้องต้นก่อนการเข้าเป็นสมาชิกของ Blogger.com  วันนี้เราได้รวบรวมภาพตัวอย่าง Template ที่มีใน Blogger.com มาให้ดูกันค่ะ ซึ่งนอกจาก Template ใน Blogger.com เองแล้ว ท่านยังสามารถพิมพ์ค้นหาใน Google ซึ่งมีหลายเว็บไซต์ให้ดาวน์โหลด Template มาใช้ได้ มีทั้งฟรีและเสียเงินค่ะ แต่ตัวอย่างที่เรามาให้ชมในนี้เป็นแบบฟรีทั้งหมดค่ะ เพราะมาจากใน Blogger.com ค่ะ แต่ถ้าอยากดูตัวอย่างที่เป็นภาพใหญ่ต้องเข้าระบบไปดูใน Blogger.com ได้เลยค่ะ ภาพตัวอย่างหน้าเว็บไซต์  Template Blog From Blogger.com Template From Blogger.com มีตามภาพด้านบนค่ะ แต่ทุก Template สามารถปรับแต่งใหม่ได้ หรือจะออกแบบ Template เองก็ได้ หรือดาวน์โหลด Template จากเว็บไซต์อื่นที่มีแจก มาใส่ก็ได้ค่ะ และถ้าต้องการที่ปรึกษาในการสร้างสรรค์เว็บไซต์สำเร็จรูปจาก Blogger.com สามารถติดต่อกับฝ่ายบริการของ iEasyCom ได้นะคะ  ติดต่อได้...

วิธีแสดงกล่องข้อความโค้ด ( code textbox) ใน blogger

รูปภาพ
วิธีแสดง code ในหน้าเว็บ  หากเราต้องการแสดง code ลงในเว็บไซต์ ต้องใส่แท็ก  <pre>   และ    <code>  แท็ก <code> ใช้ระบุว่าเป็น code  โดยปกติ จะรวมแท็กนี้ไว้ในแท็ก  <pre>  เพื่อบอก Browser และ Google ว่า code ในแท็กนี้เป็น code ที่ต้องการแสดง ไม่ใช่ให้แสดงผล รูปแบบ การแสดงอักขระต้องห้ามใน code  อักขระ < > ใน code อาจไม่แสดงแม้จะอยู่ในแท็กด้านบน เนื่องจากเป็นอักขระตัองห้ามของ HTML  ในกรณีนี้ให้แปลง  HTML tags  เป็น HTML entities  โดยแทนที่ < ด้วย  &lt;  และ > ด้วย  &gt;  ตัวอย่าง  code ที่อยากแสดง  ตัวอย่าง    code ที่เขียนเพื่อแสดง code การแสดง Code อยู่ในกล่องหรือเฟรม  กรณีต้องการแสดง Code อยู่ในกล่องหรือเฟรม สามารถเพิ่ม css จัดรูปแบบได้  ตัวอย่าง ใส่กล่อง code ลงใน blogger  ใช้โค้ด แบบที่ 1 ใช้ code แบบที่ 2   ถ้ามีวิธีที่น่าสนใจ เราจะนำมาเสนอเพิ่มเติมต่อไป หากสนใจการใช้ code ในการทำเว็บของท่าน ต้องการศึกษาเพิ่มเติม...

ทำไอค่อนติดต่อลอยด้านข้าง ด้วยภาพ

รูปภาพ
โค้ดไอค่อนข้อมูลติดต่อ /* โทร */ /* เฟซบุก */ /* อีเมล์ */ /* ไลน์ */ กรณีต้องการให้ไอค่อนอยู่ด้านล่าง ให้ใส่ระบุ    bottom: 0; กรณีให้อยู่ด้านขวา right: 0; ไปเห็นเว็บนี้มาทำไอค่อนได้สวยมาก https://www.missuri.shop/articles/promotion/

แก้ไขคำเตือนเมื่อปรับ Template Blogger

 1. Error:  There should be one and only one skin in the theme, and we found: <b>0</b> Template Code Problem เพิ่ม <b:skin> </b:skin>   ก่อน body 2. Error: We did not find any section in your template. A template must have at least one b:section tag I Make This Template Before Blogger Delete The Old Dashboard Interface, So I’m Sorry If the Code not Compatible with the New Dashboard Interface, for Solution... 1. Open “Supersized Under Construction.xml” in Notepad (Or) Adobe Dreamweaver or More, 2. Find this code… </body> 3. Add this code above it… <b:section id='fixelements' showaddelement='no'/> 4. Save Template.

css เรียงภาพ

รูปภาพ
ตัวอย่างโค้ด ตัวอย่างที่ได้ (2ภาพสีเหลืองด้านล่างของภาพ) ภาพจากเว็บ  เรียนพิมพ์สัมผัสกับครูน้อย, UP SKILL TOUCH TYPING, FREE ONLINE LEARNING.  https://upskilltouchtyping.blogspot.com/ 

อ้างอิงไฟล์ภาพ html

  < img  src =" url "  alt =" alternatetext " > กรณีอ้างอิงจากในโฟลเดอร์เดียวกัน <img src="touchtype1text.jpg" alt="UpSkill by Kru Noi" width="80%" height="auto"> กรณีอ้างอิงจากที่อยู่เว็บไซต์ < img  src =" url "  alt =" alternatetext " >

Tag สำหรับการแสดงตัวอย่าง Code ในหน้าเว็บ

สำหรับตัวอย่างโค้ดใช้ Tag <xmp> </xmp> สำหรับตัวอย่างผลลัพธ์จากโค้ดใช้ Tag <precode> </precode> อาจเพิ่ม style เพื่อให้เป็นกรอบของส่วน Tag นั้น ตัวอย่าง <precode  style="background-color: #eee;   border: 1px solid #999;   display: block;   padding: 20px;">