ขับเคลื่อนโดย Blogger.

ปรับแต่ง templates เวบบล็อก ด้วยการแก้ไข code html

Written By Aucharaporn Theemcle on วันศุกร์ที่ 27 พฤษภาคม พ.ศ. 2554 | 20:36

เพื่อนใหม่ท่านหนึ่ง  ถามถึงวิธีการปรับแต่ง template   ดิฉันแนะนำ เครื่องมือออกแบบแม่แบบ แต่ทว่า templates บางตัวไม่สนับสนุนเครื่องมือนี้  หากว่าใช้เครื่องมือการออกแบบแม่แบบไม่ได้แล้วหล่ะก็จำเป็นต้องปรับแต่ง code html ค่ะ 

  ปรับแต่ง template ด้วยการแก้ไข code html

ตัวดิฉันเองก็มีความรู้ภาษา html แค่หางอึ่ง จะไปอธิบายให้เพื่อนได้ทราบ   ก็คงจะงงกันทั้งผู้อธิบายและผู้รับสาร    ค้นหาข้อมูลอยู่พักใหญ่  และแล้วก็เจอจนได้  ดิฉันเองลองปรับแต่งดูแล้ว  ต่อให้มีความรู้เรื่องของ code html น้อยเต็มที แต่ยืนยันว่าแก้ไขได้แน่นอนค่ะ  ตามมาดูกันนะคะ

 ปรับแต่ง template ด้วยการแก้ไข code html

ตัวช่วยในการปรับแต่ง templates ด้วยการแก้ไข code html ในครั้งนี้คือ addon ของ firefox ซึ่งเป็น extension ใน chrome ด้วย ค่ะ มันคือ firebug   ตัวช่วยตัวนี้จะช่วยค้นหา code html ตรงบริเวณที่เราเอาเมาส์ไปชี้   และสามารถปรับแต่งค่า   และเห็นการแสดงผลได้ในทันที  ทำให้ง่ายขึ้น    ลองไป  ดาวน์โหลด firebug มาปรับแต่ง template เวบบล็อกกันดูนะคะ

ปรับแต่ง template ด้วยการแก้ไข code html

หลังดาวน์โหลด เลือก ติดตั้งแล้ว restart firefox ใหม่ จะปรากฏไอคอนเล็ก ๆ ของ firebug ด้านล่าง ใกล้ ๆ task bar ดับเบิ้ลคลิ๊กขึ้นมาใช้งานได้เลยค่ะ

firebug

นี่คือหน้าตาของ firebug  ซึ่งเพื่อน ๆ สามารถ แก้ไข (edit)  ได้ทั้ง css หรือ html โดย ด้านขวามือจะมีช่องให้เลือกการแก้ไข  เลือกแก้ไข style(รูปแบบ) และ layout (ความกว้างหรือโครงร่าง)ทางช่องด้านนี้ได้เลย โดยเปลี่ยนค่าตัวเลข เช่น หากดิฉันต้องการเปลี่ยน ความกว้างของบริเวณ template ส่วนใด ดิฉันจะคลิ๊กเลือก icon เล็ก ๆ ด้านซ้ายมือบนหน้าต่าง firebug ดังรูปด้านบน  เสร็จแล้วนำเม้าส์ไปชี้ที่บริเวณที่ต้องการจะเปลี่ยน  กรอบขวามือจะปรากฏ code ขึ้นให้โดยปรากฏเป็นแถบสีน้ำเงิน  หลังจากนั้นก็ไปเปลี่ยนค่าตัวเลข layout ด้านซ้ายมือ  สังเกตการแสดงผลที่หน้าบราวเซอร์

firebuginblog

หากผลที่ได้พอใจ ให้เพื่อน ๆ ไปแก้ไข code html ในบล็อกของเราโดย login เข้า blogger >การออกแบบ>แก้ไข html  คลิ๊ก crtl+f เพื่อค้นหา code ที่จะเปลี่ยน โดยดูจากหน้าต่างฝั่งซ้ายของ firebug ที่เราแก้ไข  เมื่อหาเจอแล้วให้เปลี่ยนค่าไปตาม code ที่เราแก้ไขใน firebug เสร็จแล้ว เลือก แสดงตัวอย่าง  หากพอใจแล้วเลือกบันทึกแม่แบบค่ะ

 

บทความที่เขียน ก็แค่นำทาง ส่วนวีดีโอเพิ่มได้อีกนิด ที่เหลือคงต้องลงมือแล้วหล่ะค่ะ

20:36 | 0 comments | Read More

เพิ่มกล่อง facebook comment ในเวบบล็อก

Written By Aucharaporn Theemcle on วันอาทิตย์ที่ 22 พฤษภาคม พ.ศ. 2554 | 01:50

หายหน้าไปนานอีกละ   ไม่ได้หายไปกับเสียงเปิดหรือระเบิดจากประเทศเขมรหรอกค่ะ  ยังแวะเวียนมาตอบ comment บ่อย ๆ เพียงแต่ไม่ได้เขียนบทความเท่านั้นเอง  เดือนที่แล้วแนะนำเพื่อน ๆ ติดปุ่ม facebook like ในเวบบล็อก  มาวันนี้ลองแนะนำ facebook comment หน่อยดีกว่า  เพราะเห็นว่าเดี๋ยวนี้คนไทยนิยม facebook เป็นอันดับต้น ๆ  ใคร ๆ ก็นิยม ใช้ facebook ในการติดต่อสื่อสารกับกลุ่มเพื่อน หรือธุรกิจ  เพราะฉะนั้นเมื่อเหล่าบรรดาสมาชิก facebook ผ่านเข้าเวบบล็อก ก็จะทำให้สะดวกในการเข้ามาแสดงความคิดเห็น  เปิดช่องทางการสื่อสารในชุมชนโลกออนไลน์ได้อีกวิธีหนึ่งค่ะ

ขั้นตอนแรก ให้เพื่อน ๆ เข้าไปสร้าง application ที่  Create an app - Facebook developers 

เพิ่มกล่อง facebook comment ในเวบบล็อก ใส่ชื่อบล็อก ใน site name   ใส่ site url  และ locate เปลี่ยนเป็นภาษาไทย ดังรูปด้านบน

ใส่กล่อง facebook comment ในเวบบล็อก

ต่อจากนั้นจะมีรหัสอักษรสุ่มให้เติม  เติมครบแล้วคลิ๊ก submit

 เติมกล่อง comment facebook ในบล็อก

เมื่อเสร็จแล้วจะมีค่า id ให้  เสร็จการสร้าง application แล้วค่ะ

ต่อจากนั้น ขั้นตอนที่ 2 ไปใช้บริการ facebook developer   เพื่อสร้างโค้ดไปวางในเวบบล็อกต่อไปค่ะ

facebook comment ใน เวบบล็อก

ในช่อง url to comment on ให้ใส่ url ของเวบบล็อกที่ต้องการติดกล่อง facebook comment

ในช่อง  Number of posts  อยากจะโชว์จำนวนการ comment เท่าใด

ในช่อง width  ใส่ความกว้างของกล่อง comment ค่ะ

color  scheme  ปรับแต่งการแสดงสีพื้นของกล่อง comment 

หากยังไม่ได้ล็อกอิน facebook คลิ๊กเลือก comment using แล้วเลือก facebook ก่อนนะคะ

facebook comment ใน เวบบล็อก

แล้วใน่ use name และ password ของ facebook เข้าใช้งาน comment 

facebook comment ใน เวบบล็อก

ขั้นตอนที่ 3  สร้าง โค้ด ด้วยการคลิ๊ก Get code 

 facebook comment ใน เวบบล็อก

จะปรากฏ code ดังรุปด้านบน  นำโค้ดดังกล่าวไปวางในเวบบล้อกของเราค่ะ

ขั้นตอนที่ 4 นำ โค้ดมาวางใน gadget html/javascript ตามตำแหน่งที่ต้องการวาง

facebook comment ใน เวบบล็อก

เลือกบันทึกผล  แล้วลองคลิ๊กดูการแสดงค่าค่ะ 

หากต้องการให้กล่อง facebook comment แสดงค่าแทนระบบ comment ของ blogger ให้เพื่อน ๆ

facebook comment ใน เวบบล็อก เข้าไปตั้งค่าการแสดงความคิดเห็นที่ เมนู > การตั้งค่า >ข้อคิดเห็น เลือก ซ่อน ความคิดเห็น  แค่นี้ก็เรียบร้อยแล้้วค่ะ    ลองเข้าไปดู ผลที่ facebook กันหน่อย

facebook comment ใน เวบบล็อก

ผลการแสดงความคิดเห็นจะไปปรากฏที่หน้า profile ของ facebook แล้วค่ะ

การเพิ่ม facebook comment ในเวบ
01:50 | 24 comments | Read More