Blogger ฉบับสมบูรณ์

0

เอกสารบันทึกความรู้ในรายวิชาเทคโนโลยีเพื่อการออกแบบนิเทศศิลป์

นายณัฐวุฒิ นุชนา วันพุธที่ 24 สิงหาคม พ.ศ. 2556

1

เอกสารบันทึกความรู้ในรายวิชาเทคโนโลยีเพื่อการออกแบบนิเทศศิลป์

คานา Blogger เป็นเว็บไซต์ที่ใช้ในการการบันทึกบทความของตนเองลงบนเว็บไซต์ โดยเนื้อหาของ blog นั้นจะครอบคลุมได้ทุกเรื่อง ไม่ว่าจะเป็นเรื่องราวส่วนตัว หรือเป็นบทความเฉพาะด้านต่าง ๆ เช่น เรื่องการเมือง เรื่องกล้องถ่ายรูป เรื่องกีฬา เรื่องธุรกิจ เป็นต้น โดยจุดเด่นที่ทาให้บล็อกเป็นที่ นิยมก็คือ ผู้เขียนบล็อก จะมีการแสดงความคิดเห็นของตนเอง ใส่ลงไปในบทความนั้น ๆ หรือ เรียก ง่าย ๆ สั้น ๆ ก็คือ Blog คือเว็บไซต์ที่มีรูปแบบเนื้อหาเป็นเหมือนบันทึกส่วนตัวออนไลน์ มีส่วนของ การ comments และก็จะมี link ไปยังเว็บอื่น ๆ ที่เกี่ยวข้องได้ตลอดเวลา การสร้างเว็บบล็อกทาได้ ง่าย ทุกคนสามารถสร้างเพื่อไว้เป็นประโยชน์ต่อตัวเองและผู้อื่นได้ เว็บบล็อกจะมีเครื่องมือสาหรับ เขียนบทความ โพสรูป และเครื่องมือการตกแต่งกราฟิก ฯลฯ รายงานเล่มนี้จัดขึ้นมาเพื่อให้ผู้ที่สนใจในการที่จะเริ่มเขียนบล็อกของตัวเองได้เข้ามาศึกษา และเพื่อรวบรวมข้อมูล หลักฐาน กระบวนการศึกษาและการตกแต่งกราฟิกและพื้นหลัง Blogger อัน เป็นเนื้อหาที่ผ่านกระบวนการเรียนการสอนในรายวิชา เทคโนโลยีเพื่อการออกแบบนิเทศศิลป์ ( arti3319 ) สอนโดย ผศ.ประชิด ทิณบุตร เขียนโดย นายณัฐวุฒิ นุชนา 24 สิงหาคม 2556

นายณัฐวุฒิ นุชนา วันพุธที่ 24 สิงหาคม พ.ศ. 2556

2

เอกสารบันทึกความรู้ในรายวิชาเทคโนโลยีเพื่อการออกแบบนิเทศศิลป์

Blogger คืออะไร รวมบทความการใช้ Blogger อย่างละเอียด Blogger เป็นอีกหนึ่งบริการของ Google ที่จะช่วยให้คุณมีพื้นที่สาหรับเขียนเรื่องราวต่าง ๆ ที่คุณต้องการในลักษณะของ Webblog บริการเหล่านี้คุณสามารถใช้งานได้ฟรี โดยไม่มีค่าใช้จ่าย สาหรับคนที่อยากมีเว็บไซต์ส่วนตัว แต่ไม่อยากมีค่าใช้จ่าย blogger สามารถช่วยคุณได้ หากคุณ ต้องการใช้blogger เพียงแค่สมัคร Gmail ก็สามารถสร้าง blog ได้อย่างมากมาย นอกจากนี้การสร้าง blog ด้วย blogger นั้นเชื่อมโยงพื้นที่เก็บรูปภาพเข้ากับ picasa ซึ่งเป็นบริการด้านภาพถ่าย ทาให้ คุณมีพื้นที่เขียน blog และพื้นที่เก็บรูปภาพที่สัมพันธ์กัน

Webblog กับ Website ต่างกันอย่างไร 1. Website ต้องมี Domain Name และ Hosting เป็นของตนเอง และเสียค่าใช้จ่าย ส่วน Webblog นั้นเราสามารถสมัครใช้บริการได้ฟรี แต่เราต้องใช้ Domain ของผู้ให้บริการ Webblog นั้น ๆ อยู่ใน ชื่อ domain ของเราด้วย เช่น http://arti3319-nattawutnuchanaa.blogspot.com/ เป็นต้น 2. Website คุณสามารถสร้างรูปแบบของเว็บไซต์ได้เองมีความยืดหยุ่น ส่วน Webblog นั้นมี Template ให้เลือก โดยการเขียน blog ก็จะมีโครงสร้างที่ตายตัวไม่สามารถปรับเปลี่ยนได้มากนัก 3. Website หากคุณต้องการเขียนเองต้องเรียนรู้ภาษาคอมพิวเตอร์หลายภาษาอยู่พอสมควร แต่ Webblog คุณเพียงแค่เรียนรู้การใช้งานเล็กน้อยคุณก็สามารถใช้งานได้

นายณัฐวุฒิ นุชนา วันพุธที่ 24 สิงหาคม พ.ศ. 2556

3

เอกสารบันทึกความรู้ในรายวิชาเทคโนโลยีเพื่อการออกแบบนิเทศศิลป์

1.

2.

3.

4.

5.

Webblog ทาอะไรได้บ้าง ทาเป็นเว็บไซต์ส่วนตัว ไม่ค่อยเกิดปัญหาเรื่องเว็บล่ม เขียนเรื่องราวต่าง ๆ และแบ่งปันให้กับผู้อื่น หารายได้กับ google เช่น การเขียนบทความ นาโฆษณาของ google มาติดลง webblog ของตนเอง ทาธุรกิจที่เรียกว่า E-commerce ก็พอจะใช้ได้อยู่บ้างครับ

นายณัฐวุฒิ นุชนา วันพุธที่ 24 สิงหาคม พ.ศ. 2556

4

เอกสารบันทึกความรู้ในรายวิชาเทคโนโลยีเพื่อการออกแบบนิเทศศิลป์

สื่อการเรียนรู้ขั้นตอนและวิธีการเข้าใช้งาน Blogger รายงานนี้คือบันทึกความรู้เรื่องการปรับแต่งการจัดการบริหารเว็ปบล็อก

(Blogger) ใน

ฐานะผู้จัดการระบบ (Admin) Gooogle Blogger Domain & Hosting ที่ blogspot.com โดยจะ อธิบายรายละเอียดขั้นตอนดังนี้ ขั้นตอนแรกก่อนที่เราจะสามารถใช้งาน Blogger ได้นั้นเราจะต้องมี gmail ซะก่อนโดยเข้า ไปสมัครได้ที่ www.gmail.com

1

2

ภาพที่ 1 แสดงหน้าเวปของ gmail ที่มา : www.gmail.com, 2556

ขั้นตอนการเรียนรู้การใช้งาน Blogger หมายเลข 1 ขั้นแรกเราจะต้องมี gmail ซะก่อนโดยการสมัคร gmail เพื่อการสร้าง Blogger หมายเลข 2 เมื่อทาการสมัคร gmail เรียบร้อยแล้ว เราก็สามารถเข้าสู้ระบบ gmail ได้เลย

นายณัฐวุฒิ นุชนา วันพุธที่ 24 สิงหาคม พ.ศ. 2556

5

เอกสารบันทึกความรู้ในรายวิชาเทคโนโลยีเพื่อการออกแบบนิเทศศิลป์

เมื่อเข้าสู่ระบบของ gmail ได้แล้วเราก็สามารถ ทาการสร้าง Blog ได้เลยโดยไม่ต้อง login เข้า Blog เพราะมันเชื่อมต่อกับ gmail อยู่แล้วด้วยการเข้า www.blogger.com เพื่อการสร้าง Blog

6

3

9 7

4 8 5 ภาพที่ 2 แสดงหน้าเว็ปของ http://arti3319-nattawutnuchanaa.blogspot.com/ ที่มา : นายณัฐวุฒิ นุชนา, 2556

ขั้นตอนการเรียนรู้การใช้งาน Blogger หมายเลข 3 แสดงชื่อบล็อกของผู้ใช้งาน หมายเลข 4 สามารถสร้างบล็อก ใหม่ขึ้นมาเพื่อใช้งาน สามารถสร้างได้มากกว่า 1 บล็อก เพื่อการเผยแพร่หลายรูปแบบ หมายเลข 5 เมื่อเคลิ๊กปุ่มบล็อกใหม่ (หมายเลข 4 ) จะปรากฏหน้าต่างใหม่ขึ้นมาเพื่อการตั้ง ค่าบล็อกที่เรากาลังสร้าง หมายเลข 6 ช่องตั้งชื่อบล็อกการใช้งาน หมายเลข 7 ชื่อ Domain ของเราเช่น nattawut.blogspot.com หมายเลข 8 Template หรือ แม่แบบของบล็อกที่เราจะสร้าง

โดยสามารถเลือกจาก

blogger หรือสามารถ Download จากเว็บไซต์ได้ หมายเลข 9 คลิ๊กเพื่อเปลี่ยนภาษา นายณัฐวุฒิ นุชนา วันพุธที่ 24 สิงหาคม พ.ศ. 2556

6

เอกสารบันทึกความรู้ในรายวิชาเทคโนโลยีเพื่อการออกแบบนิเทศศิลป์

พอเราสร้างบล็อกขึ้นมาสาเร็จขั้นตอนต่อไปเราจะเข้าสู่กระบ วนการศึกษารายละเอียดของ หน้าที่แต่ละคาสั่งของ blogger

12

11

10

ภาพที่ 3 แสดงหน้าเว็ปบล็อกของ http://arti3319-nattawutnuchanaa.blogspot.com/ ที่มา : นายณัฐวุฒิ นุชนา, 2556

ขั้นตอนการเรียนรู้การใช้งาน Blogger หมายเลข 10 ปุ่มแสดงโปรไฟร์ของ Blogger หมายเลข 11 ปุ่มแสดงคลิกดูบล็อก เมื่อเราต้องการเข้าไปดูเว็บบล็อคที่เราสร้างขึ้นมา หมายเลข 12 ปุ่มคลิกเพื่อสร้างโพสใหม่ เมื่อต้องการที่จะเขียนบทความอัพเดทบล็อก อาจ เป็นงาน หรืออะไรก็แล้วแต่ที่เราต้องการจะเผยแพร่

นายณัฐวุฒิ นุชนา วันพุธที่ 24 สิงหาคม พ.ศ. 2556

7

เอกสารบันทึกความรู้ในรายวิชาเทคโนโลยีเพื่อการออกแบบนิเทศศิลป์

เมื่อเราสร้างบล็อกขึ้นมาสาเร็จแล้วขั้นตอนต่อไปจะเป็นวิธีการเขียนบทความ หรือการใส่ รายงายของเรานั่นเอง โดยมีวิธีดังนี้

13

15

18

16

17

20

19 14 ภาพที่ 4 แสดงการเขียนบทความ http://arti3319-nattawutnuchanaa.blogspot.com/ ที่มา : นายณัฐวุฒิ นุชนา, 2556

ขั้นตอนการเรียนรู้การใช้งาน Blogger หมายเลข 13 ชื่อหัวข้อของบทความที่เราเขียน เช่น โครงสร้างคณะมนุษยศาสตร์ เพื่อการดู ข้อความง่ายยิ่งขึ้น หมายเลข 14 หน้ากระดาษที่ใช้เขียนบทความ หมายเลข 15 แถบเครื่องมือต่างๆที่ใช้ในการเขียนบทความ (คล้ายๆกับ Microsoft Office Word) หมายเลข 16 ปุ่มบันทึกบทความ เวลาเราเขียนบทความสามารถกดบันทึกได้เรื่อยๆ เมื่อมี การขัดข้องคอมดับ หรือเว็ปค้างเมื่อเปิดบล็อกเข้ามาใหม่มันจะบันทึกบทความที่เรายังไม่ได้บันทึกไว้ โดยอัตโนมัติ หมายเลข 17 หน้าแสดงตัวอย่างก่อนเผยแพร่ สามารถแก้ไขหรือดูการวางหน้ากระดาษก่อน เผยแพร่ได้ หมายเลข 18 คลิกเผยแพร่บทความ บทความจะถูกเผยแพร่ หมายเลข 19 แถบเครื่องมือการตั้งค่าโพสต์ในแต่ละบทความ

นายณัฐวุฒิ นุชนา วันพุธที่ 24 สิงหาคม พ.ศ. 2556

8

เอกสารบันทึกความรู้ในรายวิชาเทคโนโลยีเพื่อการออกแบบนิเทศศิลป์

หมายเลข 20 HTML เราสามารถลิงค์เข้ากับ www.Issuu.com (คือเว็บหนังสืออนไลน์ ) ได้ โดยสามารถโพสต์หนังสือออนไลน์ได้ในบล็อค แต่ต้องสมัคร Issuu ก่อนจึงจะสามารถอัพโหลดได้

21

23 22

ภาพที่ 5 แสดงการเขียนบทความ http://arti3319-nattawutnuchanaa.blogspot.com/ ที่มา : นายณัฐวุฒิ นุชนา, 2556

ขั้นตอนการเรียนรู้การใช้งาน Blogger หมายเลข 21 แทรกรูปภาพสามารถอัพโหลดจากคอมพิวเตอร์หรือจากที่อื่นๆได้ เมื่อเรา ต้องการเขียนบทความโดยที่ต้องการเสนอรูปภาพควบคู่ไปด้วย โดยสามารถปรับขนาดได้ตามความ ต้องการ หมายเลข 22 ลบการจัดรูปแบบ เราอาจชอบบทความจากเว็บบล็อคอื่น หรืออาจ Copy บทความที่เกี่ยวกับสายงานของเรามาเสนอใน blogger ของเราจาเป็นต้องลบการจัดรูปแบบเสียก่อน เพราะขนาดที่เราไป Copy มานั้นจะไม่ได้ขนาดตัวอักษรของ blogger หมายเลข 23 แทรกวีดีโอ เมื่อต้องการอัพเดทคลิปวีดีโอ หรือสื่อการสอนแบบ Multimedia

นายณัฐวุฒิ นุชนา วันพุธที่ 24 สิงหาคม พ.ศ. 2556

9

เอกสารบันทึกความรู้ในรายวิชาเทคโนโลยีเพื่อการออกแบบนิเทศศิลป์

เพิ่ม นาออก แก้ไขแกดเจ็ตในบล็อกของคุณ คลิกและลากเพื่อจัดเรียงแกดเจ็ต ต่อไปเป็นการตกแต่งบล็อกของเราให้น่าใช้มากขึ้น ด้วยการออกแบบ

24 รูปแบบ

ภาพที่ 6 แสดงการเข้าสู่รูปแบบ http://arti3319-nattawutnuchanaa.blogspot.com/ ที่มา : นายณัฐวุฒิ นุชนา, 2556

28 27

29

26 25 ภาพที่ 7 แสดงการเพิ่ม Gadget http://arti3319-nattawutnuchanaa.blogspot.com/ ที่มา : นายณัฐวุฒิ นุชนา, 2556

นายณัฐวุฒิ นุชนา วันพุธที่ 24 สิงหาคม พ.ศ. 2556

10

เอกสารบันทึกความรู้ในรายวิชาเทคโนโลยีเพื่อการออกแบบนิเทศศิลป์

ขั้นตอนการเรียนรู้การใช้งาน Blogger หมายเลข 24 วิธีการเข้าสู่รูปแบบ เพื่อออกแบบบล็อกได้ตามต้องการ หมายเลข 25 แสดงหน้ารูปแบบการจัดหน้าเว็บบล็อค โดยสามารถแก้ไขหน้าเว็บได้ตาม ความต้องการ หมายเลข 26 ปุ่มเพิ่ม Gedget เราสามารถเพิ่ม Gadget ได้ตามความต้องการ เช่นนาฬิกา ปฏิทิน หรือสถิติของการดูหน้าเว็บ เราก็สามารถเพิ่มได้ที่ตรงส่วนนี้ หมายเลข 27 ปุ่มแสดงตัวอย่าง เมื่อเราเพิ่ม Gadget ตามต้องการแล้วเราสามารถแสดง ตัวอย่างก่อนที่เราจะใช้กับบล็อกได้ หมายเลข 28 ปุ่มบันทึกการจัดเรียง หากเรามั่นใจกับการเพิ่ม Gedget แล้วก็กดเพื่อบันทึก การจัดเรียง หมายเลข 29 ปุ่มลบ หากต้องการลบ Gedget ที่ไม่ต้องการออกก็คลิ๊กที่ปุ่มลบ เริ่มต้นด้วยเทมเพลตพื้นฐาน และปรับแต่งพื้นหลัง การออกแบบ สี แบบอักษร และอื่นๆ

30 สารอง/กู้คืน

31

ภาพที่ 8 แสดงการดีไซน์ Blogger http://arti3319-nattawutnuchanaa.blogspot.com/ ที่มา : นายณัฐวุฒิ นุชนา, 2556

ขั้นตอนการเรียนรู้การใช้งาน Blogger หมายเลข 30 แสดงปุ่มกู้คืน เมื่อเรามีความต้องการในการเปลี่ยน Template ของ blogger สามารถคลิกได้ที่ตรงส่วนนี้ สารอง

/กู้คืน เราสามารถหา

Template

ต่างๆได้ตามเว็บ

www.btemplates.com/ สามารถ Download ได้ฟรี หมายเลข 31 คลิกเลือกไฟล์ ถ้าเปลี่ยน Template blogger จะต้องเลือกไฟล์ .xml นายณัฐวุฒิ นุชนา วันพุธที่ 24 สิงหาคม พ.ศ. 2556

11

เอกสารบันทึกความรู้ในรายวิชาเทคโนโลยีเพื่อการออกแบบนิเทศศิลป์

32 33 34 ภาพที่ 9 แสดงการดีไซน์ Blogger http://arti3319-nattawutnuchanaa.blogspot.com/ ที่มา : นายณัฐวุฒิ นุชนา, 2556

ขั้นตอนการเรียนรู้การใช้งาน Blogger หมายเลข 32 การปรับแต่ง Template บนมือถือ หมายเลข 33 การกาหนดค่าแม่แบบของหน้าเว็บบล็อคซึ่งมี แม่แบบให้เลือกในหลายรูปแบบ และสามารถเข้าไปปรับการออกแบบในส่วนอื่นๆได้ หมายเลข 34 แสดงแม่แบบต่างๆ ในblogger

นายณัฐวุฒิ นุชนา วันพุธที่ 24 สิงหาคม พ.ศ. 2556

12

เอกสารบันทึกความรู้ในรายวิชาเทคโนโลยีเพื่อการออกแบบนิเทศศิลป์

เริ่มต้นด้วยเทมเพลตพื้นฐาน และปรับแต่งพื้นหลัง การออกแบบ สี แบบอักษร และอื่นๆ ขั้นตอนต่อไปจะเป็นการกาหนดค่า Template blogger โดยการกาหนดค่านี้สามารถทาได้ เฉพาะกับ Template blogger ที่มีให้เปลี่ยนใน blogger เท่านั้น ถ้าเป็น Template blogger ที่ ดาวน์โหลดมาจะไม่สามรถปรับแต่งได้ แต่สามารถเข้าไปแก้ไขโค้ด HTML ต่างๆเพิ่มเติมได้ ดังนั้น ขั้นตอนต่อไปนี้คือการจัดการบริหาร blogger ในแบบละเอียด

35 กาหนดค่า

ภาพที่ 10 แสดงปุ่มกาหนดค่า http://arti3319-nattawutnuchanaa.blogspot.com/ ที่มา : นายณัฐวุฒิ นุชนา, 2556

39 36

42 37

38

40

41 ภาพที่ 11 แสดงการกาหนดค่า Blogger http://arti3319-nattawutnuchanaa.blogspot.com/ ที่มา : นายณัฐวุฒิ นุชนา, 2556

ขั้นตอนการเรียนรู้การใช้งาน Blogger หมายเลข 35 ปุ่มกาหนดค่า Blogger หมายเลข 36 ปุ่มตั้งค่าพื้นหลัง นายณัฐวุฒิ นุชนา วันพุธที่ 24 สิงหาคม พ.ศ. 2556

13

เอกสารบันทึกความรู้ในรายวิชาเทคโนโลยีเพื่อการออกแบบนิเทศศิลป์

หมายเลข 37 ปุ่มตั้งค่าความกว้าง Blogger หมายเลข 38 พื้นหลังของ Blogger หมายเลข 39 พื้นหลังของ blogger สามารถเลือกภาพของคุณเองจากคอมพิวเตอร์ แต่ต้อง อยู่ในขนาดของ blogger หมายเลข 40 ความกว้างของหน้าเว็บบล็อคเวลาแสดงบทความและเขียนบทความ ควรปรับ ให้ได้ 980px 330px เพื่อจะได้ขนาดตามความเหมาะสมมากที่สุด หมายเลข 41 การคืนค่าเดิม ถ้าไม่ต้องการขนาดที่ปรับ ก็สามารถกดปุ่มเพื่อคืนค่าเดิมได้ หมายเลข 42 ปุ่มใช้กับบล็อก เมื่อเราปรับตามความชอบใจแล้ว ก็บันทึกการใช้กับบล็อก

45

47

46

43 44

ภาพที่ 12 แสดงการกาหนดค่า Blogger http://arti3319-nattawutnuchanaa.blogspot.com/ ที่มา : นายณัฐวุฒิ นุชนา, 2556

ขั้นตอนการเรียนรู้การใช้งาน Blogger หมายเลข 43 รูปแบบการจัดวางคอลัมม์ หมายเลข 44 การออกแบบคอลัมม์ในส่วนเนื้อความ หมายเลข 45 การออกแบบคอลัมม์ในส่วนท้ายของบล็อก หมายเลข 46 กลับสู่ blogger เมื่อต้องการกลับไปหน้า home หมายเลข 47 Preview blogger ดูบล็อคได้หลังจากการแก้ไขเปลี่ยนแปลง blogger

นายณัฐวุฒิ นุชนา วันพุธที่ 24 สิงหาคม พ.ศ. 2556

14

เอกสารบันทึกความรู้ในรายวิชาเทคโนโลยีเพื่อการออกแบบนิเทศศิลป์

49 50 48

ภาพที่ 13 แสดงการกาหนดค่าขั้นสูง Blogger http://arti3319-nattawutnuchanaa.blogspot.com/ ที่มา : นายณัฐวุฒิ นุชนา, 2556

หมายเลข 48 เครื่องมือออกแบบเทมเพลตขั้นสูง จะเป็นการออกแบบตัวอักษร สี ขนาด ตัวอักษรหรือเปลี่ยนตัวอักษรตามที่เราต้องการ หมายเลข 49 การตั้งค่าต่างๆของข้อความหน้าบล็อกของเรา หมายเลข 50 แสดงเครื่องมือการเปลี่ยนสีตัวอักษร การทาให้บล็อกเป็นแบบโปร่งใส

นายณัฐวุฒิ นุชนา วันพุธที่ 24 สิงหาคม พ.ศ. 2556

15

เอกสารบันทึกความรู้ในรายวิชาเทคโนโลยีเพื่อการออกแบบนิเทศศิลป์

52 53 54 51 55 ภาพที่ 14 แสดงการตั้งค่าพื้นฐาน Blogger http://arti3319-nattawutnuchanaa.blogspot.com/ ที่มา : นายณัฐวุฒิ นุชนา, 2556

ขั้นตอนการเรียนรู้การใช้งาน Blogger หมายเลข 51 ปุ่มการตั้งค่าพื้นฐานของบล็อก หมายเลข 52 ปุ่มแก้ไขชื่อของบล็อก เราสามารถแก้ไขชื่อของบล็อกได้ถ้าไม่พอใจ หมายเลข 53 ปุ่มแก้ไขคาอธิบายใต้บล็อก สามารถแก้ไข้คาอธิบายได้ หมายเลข 54 สามารถแก้ไข Domain ของบล็อกเราได้ หมายเลข 55 สิทธ์ในการเป็น Admin ร่วม สามารถเพิ่มผู้เขียนโดยใส่ที่อยู่ Gmail จากนั้นทั้ง คนสร้างบล็อคและคนถูกเชิญสามารถเข้ามาแก้ไขบล็อกนี้ได้เหมือนกัน

นายณัฐวุฒิ นุชนา วันพุธที่ 24 สิงหาคม พ.ศ. 2556

16

เอกสารบันทึกความรู้ในรายวิชาเทคโนโลยีเพื่อการออกแบบนิเทศศิลป์

ต่อไปจะเป็นขั้นตอนการเขียนบทความ การนารูปภาพ วีดีโอต่างๆ และ Embed Code ของ www.issuu.com คือหนังสือออนไลน์ นามาโพสในบทความของเราดังนี้ ขั้นแรกจะเป็นการใส่คลิปวิดีโอจาก youtube มาแทรกลงในบทความ

56

ขั้นตอนการเรียนรู้การใช้งาน Blogger หมายเลข 56 ปุ่มแสดงสัญลักษณ์การแทรกวิดีโอลงบทความ

58

57

59 ภาพที่ 15 - 16 แสดงการตั้งค่าพื้นฐาน Blogger http://arti3319-nattawutnuchanaa.blogspot.com/ ที่มา : นายณัฐวุฒิ นุชนา, 2556

หมายเลข 57 เมื่อกดปุ่มสัญลักษณ์การแทรกวิดีโอไปแล้ว จะเห็นหน้าต่างนรูป 57 หมายเลข 58 รายชื่อวิดิโอต่างๆ ที่เราค้นหาไว้ หมายเลข 59 ปุ่มเลือก เมื่อได้วิดิโอที่ต้องการแล้วกดที่ เลือกก็จะได้วิดิโอที่ท่านต้องการ นายณัฐวุฒิ นุชนา วันพุธที่ 24 สิงหาคม พ.ศ. 2556

17

เอกสารบันทึกความรู้ในรายวิชาเทคโนโลยีเพื่อการออกแบบนิเทศศิลป์

61

60

HTML

หมายเลข 60 เมื่อกดเลือกเรียบร้อยแล้ว จะแสดงวิดิโอที่เราเลือก หมายเลข 61 HTML เอาไว้สาหรับแก้โค๊ดต่างๆ ซึ่งเป็นภาษาของเว็บ ส่วนใหญ่จะใช้สาหรับ การย่อขยายรูปเพื่อให้เข้ากับขนาดหน้าเว็บบล็อกของเรา ในส่วนใหญ่จะแนะนาให้จัดขนาดอยู่ที่ height="350" width="575"

โค๊ด HTML ภาพที่ 17 - 18 แสดงการตั้งค่าพื้นฐาน Blogger http://arti3319-nattawutnuchanaa.blogspot.com/ ที่มา : นายณัฐวุฒิ นุชนา, 2556

นายณัฐวุฒิ นุชนา วันพุธที่ 24 สิงหาคม พ.ศ. 2556

18

เอกสารบันทึกความรู้ในรายวิชาเทคโนโลยีเพื่อการออกแบบนิเทศศิลป์

ขั้นตอนการอัพโหลดหนังสือออนไลน์จาก www.issuu.com เว็บนี้เราสามารถอ่านหนังสือ ต่างๆ ได้โดยไม่ต้องเสียค่าใช้จ่ายใดๆ เพียงแค่สมัครใช้งานก็สามารถนาหนังสือที่เราชื่นชอบมาลงโพส ในบล็อกของเราได้

63 62 64

ภาพที่ 19 แสดงหน้าเว็บ http://issuu.com/ ที่มา : นายณัฐวุฒิ นุชนา, 2556

ขั้นตอนการเรียนรู้การใช้งาน ISSUU หมายเลข 62 แสดงช่องค้นหาหนังสือ เพียงพิมพ์ชื่อของหนังสือก็จะปรากฎ หมายเลข 63 แสดงปุ่มลงชื่อเพื่อใช้งาน หมายเลข 64 ปุ่มแสดงการลงชื่อใช้งานผ่าน facebook

นายณัฐวุฒิ นุชนา วันพุธที่ 24 สิงหาคม พ.ศ. 2556

19

เอกสารบันทึกความรู้ในรายวิชาเทคโนโลยีเพื่อการออกแบบนิเทศศิลป์

เมื่อ sign in ได้แล้วจะเป็นดังภาพด้านล่าง

65 66

ภาพที่ 20 แสดงหน้าเว็บ http://issuu.com/ ที่มา : นายณัฐวุฒิ นุชนา, 2556

ขั้นตอนการเรียนรู้การใช้งาน ISSUU หมายเลข 65 แสดงปุ่ม Upload เพื่ออัพโหลดหนังสือของเรา ลงบน issuu ( ต้องทาการ แปลงไฟล์ของเราให้เป็น PDF แล้วทาการรวมหน้าทั้งหมดของ PDE ให้เป็นหน้าเดียวจึงจะสามารถ อัพโหลดลง issuu ได้ หมายเลข 66 สัญลักษณ์แสดงโปรไฟล์ของตัวเอง

นายณัฐวุฒิ นุชนา วันพุธที่ 24 สิงหาคม พ.ศ. 2556

20

เอกสารบันทึกความรู้ในรายวิชาเทคโนโลยีเพื่อการออกแบบนิเทศศิลป์

เมื่อเราอัพโหลดหนังสือของเราเรียบร้อยแล้ว ISSUU จะทาการรวมหนังสือของเราขึ้นมาเป็น เล่ม เปรียบสเหมือนหนังสือของจริงแต่ตั้งอยู่บนเว็บไซต์

67 66 68 ขั้นตอนการเรียนรู้การใช้งาน ISSUU หมายเลข 66 หากต้องการนาหนังสือออนไลน์ของตัวเองลงไปโพสใน Blogger ให้กด สัญลักษณ์คาว่า Share หมายเลข 67 ภาพแสดงหนังสือออนไลน์ ที่เราได้ทาการอัพโหลดลง ISSUU หมายเลข 68 ภาพแสดงสัญลักษณ์ Embed เพื่อนาโค๊ดไปวางในบทความ ใน HTML

70 69 71 72 ภาพที่ 21-22 แสดงหน้าเว็บ http://issuu.com/ ที่มา : นายณัฐวุฒิ นุชนา, 2556

หมายเลข 69 เมื่อกดปุ่ม Embed แล้วจะมีหน้าต่างนี้ขึ้นมา นายณัฐวุฒิ นุชนา วันพุธที่ 24 สิงหาคม พ.ศ. 2556

21

เอกสารบันทึกความรู้ในรายวิชาเทคโนโลยีเพื่อการออกแบบนิเทศศิลป์

หมายเลข 70 ภาพแสดงหนังสือออนไลน์ หมายเลข 71 Styling option เครื่องมือสาหรับปรับแต่งขนาด และสีพื้นหลัง หมายเลข 72 Embed Code เมื่อปรับแต่งขนาดและพื้นหลังเสร็จ เราสามารถคัดลอก Embed Code ตรงนี้เพื่อไปใส่ในบทความในส่วนของ HTML

73 75 76

74 77

ภาพที่ 23 แสดงหน้าเว็บ http://issuu.com/ ที่มา : นายณัฐวุฒิ นุชนา, 2556

ขั้นตอนการเรียนรู้การใช้งาน ISSUU หมายเลข 73 Size ของหนังสือ เราสามารถปรับเล็กใหญ่ได้ตามขนาดที่ให้มา หมายเลข 74 Autofilp the pages ติ๊กคือ จะทาให้หนังสือของเราแสดงแบบ Autoplay ใน บล็อกของเราตลอดเวลา หมายเลข 75 Layout แถบเครื่องมือแสดงหน้าเดี่ยว หรือคู่ หมายเลข 76 Color เครื่องมือปรับสีพ้นหลังของหนังสือ หมายเลข 77 เมื่อตั้งค่าเรียบร้อยแล้วกด Create new เพื่อทาการ Save แล้วเราก็สามารถ นา Embed Code ตรงนี้เพื่อไปใส่ในบทความในส่วนของ HTML

นายณัฐวุฒิ นุชนา วันพุธที่ 24 สิงหาคม พ.ศ. 2556

22

เอกสารบันทึกความรู้ในรายวิชาเทคโนโลยีเพื่อการออกแบบนิเทศศิลป์

78

ภาพที่ 24 แสดง Embed Code หน้าเว็บ http://issuu.com/ ที่มา : นายณัฐวุฒิ นุชนา, 2556

หมายเลข 78 เมื่อคัดลอก Embed Code มาแล้วนามาวางที่บทความใหม่ ใน HTML

79

ภาพที่ 25 แสดงการวาง Embed Code หน้าเว็บ http://arti3319-nattawutnuchanaa.blogspot.com/ ที่มา : นายณัฐวุฒิ นุชนา, 2556 หมายเลข 79 นา Embed Code ที่คัดลอกมาวางใน HTML เรียบร้อยกดอัพเดท เพื่อเผยแพร่หนังสือ

หมายเลข 80 ภาพแสดงผลเมื่อทาการโพส

80

ภาพที่ 26 แสดงหน้าเว็บ http://arti3319-nattawutnuchanaa.blogspot.com/ ที่มา : นายณัฐวุฒิ นุชนา, 2556 นายณัฐวุฒิ นุชนา วันพุธที่ 24 สิงหาคม พ.ศ. 2556

23

เอกสารบันทึกความรู้ในรายวิชาเทคโนโลยีเพื่อการออกแบบนิเทศศิลป์

ต่อไปคือการเขียนบทความทางหน้าเว็บ โดยสามารถเขียนเกี่ยวกับเรื่องที่สาคัญ หรือต้องการ ให้ผู้อ่านได้มองเห็นอยู่ตลอดเวลา หรือมองเห็นง่ายที่สุด

82 81 83 84

ภาพที่ 27 แสดงหน้าเว็บ http://arti3319-nattawutnuchanaa.blogspot.com/ ที่มา : นายณัฐวุฒิ นุชนา, 2556

ขั้นตอนการเรียนรู้การใช้งาน Blogger หมายเลข 81 เลือกสัญลักษณ์คาว่า หน้าเว็บ เพื่อเขียนบทความสาคัญ หมายเลข 82 แสดงปุ่มหน้าเว็บใหม่ หมายเลข 83 เมื่อเรากดปุ่มหน้าเว็บใหม่เรียบร้อย ก็ให้กดปุ่มหน้าเว็บเปล่าเพื่อเข้าสู่หน้าต่าง การเขียนบทความ หมายเลข 84 แสดงผลของการเขียนบทความในส่วนของหน้าเว็บ

นายณัฐวุฒิ นุชนา วันพุธที่ 24 สิงหาคม พ.ศ. 2556

24

เอกสารบันทึกความรู้ในรายวิชาเทคโนโลยีเพื่อการออกแบบนิเทศศิลป์

ขั้นตอนการเพิ่ม Gadget เป็นการเพิ่มแถบด้านข้างของบล็อก คือเราสามารถนาสิ่งที่เรา ต้องการโฆษณา หรือประชาสัมพันธ์ หรือสิ่งที่เราอยากเพิ่มเติมหรือตกแต่งบล็อกของเรา เช่น นาฬิกา ปฏิทิน ฯลฯ

88

85 87 86

ภาพที่ 28 แสดงหน้าเว็บ http://arti3319-nattawutnuchanaa.blogspot.com/ ที่มา : นายณัฐวุฒิ นุชนา, 2556

ขั้นตอนการเรียนรู้การใช้งาน Blogger หมายเลข 85 ปุ่มสัญลักษณ์ รูปแบบ หมายเลข 86 เมื่อกดรูปแบบแล้ว จะแสดงหน้าเว็บตาม หมายเลข 86 หมายเลข 87 เพิ่ม Gadget หมายเลข 88 เมื่อกดเพิ่ม Gadget แล้วจะมีหน้าต่างใหม่ขึ้นมา เราสามารถเลือกได้ตาม ต้องการความเหมาะสม

นายณัฐวุฒิ นุชนา วันพุธที่ 24 สิงหาคม พ.ศ. 2556

25

เอกสารบันทึกความรู้ในรายวิชาเทคโนโลยีเพื่อการออกแบบนิเทศศิลป์

ขั้นตอนการเปลี่ยน Template ของเว็บบล็อก ปกติเราจะสามารถปรับเปลี่ยนได้ตามความ ต้องการอยู่แล้ว แต่เครื่องมือนี้เป็นเครื่องมือที่สามารถนา Code Template ที่หาดาวน์โหลดได้ที่ http://btemplates.com/ เป็นเว็บไซต์ที่เปิดให้โหลดฟรี

90 89

91 92

ภาพที่ 29 แสดงหน้าเว็บ http://arti3319-nattawutnuchanaa.blogspot.com/ ที่มา : นายณัฐวุฒิ นุชนา, 2556

ขั้นตอนการเรียนรู้การใช้งาน Blogger หมายเลข 89 ปุ่มแม่แบบ หมายเลข 90 ปุ่มสารอง / กู้คืน หมายเลข 91 เมื่อกด สารอง / กู้คืนแล้ว จะมีหน้าต่างขึ้นมาตามรูป หมายเลข 92 กดเลือกไฟล์ตามรูป ไฟล์ที่ใช้คือไฟล์ที่เราโหลดมาจาก http://btemplates.com/ เป็นไฟล์ .xml การเปลี่ยน Template ที่เราโหลดมาแล้ว จะไม่สามารถ ปรับแต่งแม่แบบเองได้ และการตั้งค่าต่างๆเช่า ขนาดรูปภาพ วิดิโอจะถูกเซ็ตเป็นค่าเริ่มต้น หากต้องการเปปลี่ยนไปใช้แบบเดิมให้กดดาวน์โหลดเทมเพลตแบบเต็ม

นายณัฐวุฒิ นุชนา วันพุธที่ 24 สิงหาคม พ.ศ. 2556

26

เอกสารบันทึกความรู้ในรายวิชาเทคโนโลยีเพื่อการออกแบบนิเทศศิลป์

รายงานสรุปวิชา : ARIT3319 เทคโนโลยีเพื่อการออกแบบนิเทศศิลป์ รายงาน : การปรับแต่งขนาด กราฟิกและพื้นหลัง Blogger จัดทาโดย : นายณัฐวุฒิ นุชนา รหัสประจาตัว 5211300552 กลุ่มเรียน 201 คณะมนุษยศาสตร์และสังคมศาสตร์ สาขาศิลปกรรม แขนงออกแบบนิเทศศิลป์ Tel. 081-441-2334 E-mail : nattawut.nuchanaa@gmail.com Blogspot : http://artd3319-nattawutnuchana.blogspot.com/

นายณัฐวุฒิ นุชนา วันพุธที่ 24 สิงหาคม พ.ศ. 2556

27

เอกสารบันทึกความรู้ในรายวิชาเทคโนโลยีเพื่อการออกแบบนิเทศศิลป์

นายณัฐวุฒิ นุชนา วันพุธที่ 24 สิงหาคม พ.ศ. 2556