คู่มือการเรียนรู้การใช้งาน blogger. เบื้องต้น

2

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

คํานํา คูมือการจัดการเรียนรูการใชงาน Blogger ในเบื้องตนที่จัดทําขึ้นนี้ เป น เอกสารประกอบการเรี ย นรู ใ นรายวิ ช าเทคโนโลยี เ พื่ อ การออกแบบ นิเทศศิลป ARTI3319 ของนายประเสริฐ สิงหครุธ โดยใชชื่อ ตนแบบการ จัดการความรูออนไลนวา “ คูมือการเรียนรูการใชงาน Blogger ในเบื้องตน ” โดยเริ่มทําการสรางขึ้นเมื่อวันที่ 10 กรกฎาคม พ.ศ. 2556 การจั ด ทํ า คู มื อ การจั ด การเรี ย นรู อ อนไลน ฉ บั บ นี้ ผู จั ด ทํ า พยายาม เขียนใหเขาใจไดงาย สะดวกตอการปฏิบัติตาม และนําไปใชตอยอดการ เรียนรูได อยางไรก็ตามในการจัดทําคูมือการจัดการเรียนรูออนไลนฉบับนี้ หากมี ข อ บกพร อ ง ในขั้ น ตอนใด ผู จั ด ทํ า ขออภั ย มา ณ ที่ นี่ และสามารถสอบถาม ติชม หรือใหคําแนะนําตอผูจัดทําไดโดยตรงที่ เบอรโทรศัพท 089-9669261 หรืออีเมลล prasert.singkurt@gmail.com

นายประเสริฐ สิงหครุธ, 2556

นายประเสริฐ สิงหครุธ วันพุธที่ 10 กรกฎาคม 2556

3

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

สารบัญ วิธีลงชื่อสมัครสมาชิกของ Gmail………………………………………..4 ขั้นตอนการลงชื่อสมัครเขาใชเปนสมาชิกของ Gmail…………………...4 วิธีการลงชื่อเขาใชงาน Blogger………………………………………..11 วิธีลงชื่อเขาใชงาน Blogger…………………………………………....11 การสราง Blogger………………………………………………………13 วิธีการปรับแตงขนาดและกราฟฟกพื้นของ Blogger เบื้องตน…………..16 วิธีการปรับแตงขนาดและกราฟฟกพื้นของ Blogger……………………15 วิธีการทํา Creative Commons ………………………………………..21

นายประเสริฐ สิงหครุธ วันพุธที่ 10 กรกฎาคม 2556

4

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

วิธีลงชื่อสมัครสมาชิกของ Gmail ขั้นตอนการลงชื่อสมัครเขาใชเปนสมาชิกของ Gmail ขั้นตอนแรกใหเขาไปที่ http://www.gmail.comเพื่อทําการสมัครสมาชิก ตามภาพที่ 1.1

1

2

ภาพที่ 1.1 แสดงหนาตางลงชื่อเขาใชงานของ Gmail ที่มา : นายประเสริฐ สิงหครุธ, 2556

หมายเลข1 คือ Create an account หรือ สมัครสมาชิกใหม หมายเลข2 คือ กรอกชื่ออีเมลลของผูใช หากลงชื่อเปนสมาชิกอยูก  อนแลว ทําการเลือก Create an account ที่หมายเลข 1 เพื่อตองการสมัครสมาชิก

นายประเสริฐ สิงหครุธ วันพุธที่ 10 กรกฎาคม 2556

5

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

เมื่อเลือก Create an account เรียบรอยแลว จะปรากฎหนาเพจ ให Create a new Google account ตามภาพที่ 1.2 หมายเลข 3 คือ ใหกรอกชื่อและนามสกุล

3

หมายเลข 4 คือ กรอกอีเมลลของผูใชงาน

4

หมายเลข 5 คือ ตั้งรหัสผานสําหรับลงชื่อเขาใช

5

หมายเลข 6 คือ ยืนยันรหัสผานอีก 1 ครั้ง

6

หมายเลข 7คือ แจงวัน เดือน ป เกิด

7 หมายเลข 8คือ ระบุเพศ หมายเลข 9คือ ระบุหมายเลขโทรศัพท

8 9

หมายเลข 10คือใหระบุอีเมลลสํารอง

10

หมายเลข 11คือ กดยืนยันวามีชื่อผูใชอยูจริง และพิมพตัวอักษรตามภาพ หมายเลข 12 คือ เลือกภูมล ิ ําเนาของผูใช

11

หมายเลข 13 คือ กดเครื่องหมายยอมรับเงื่อน ไขการลงชื่อเขาใช และเลือกกด Next step

12 13

เพื่อดําเนินการขั้นตอไป

ภาพที่ 1.2 แสดงหนาตางกรอกรายละเอียดของผูสมัคร Gmail ที่มา : นายประเสริฐ สิงหครุธ, 2556

นายประเสริฐ สิงหครุธ วันพุธที่ 10 กรกฎาคม 2556

6

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

1.3 หนาตางแสดงบัญชีของผูใชจะปรากฎขึน ้ มาตามภาพที่ 1.3

14

ภาพที่ 1.3 แสดงหนาตางบัญชีของผูใชงาน ที่มา : นายประเสริฐ สิงหครุธ, 2556

หมายเลข 14 Add profile photo ใหใสรูปภาพประจําตัวของผูใช

นายประเสริฐ สิงหครุธ วันพุธที่ 10 กรกฎาคม 2556

7

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

หลังจากคลิกเลือกที่ Add profile photo จะปรากฎหนาตางของภาพที่ 1.4

15

16

ภาพที่ 1.4 แสดงหนาตางใหผูใชอัพโหลดรูปภาพประจําตัว ที่มา : นายประเสริฐ สิงหครุธ, 2556

หมายเลข15 คือ อัพโหลดรูปภาพจากกลอง หมายเลข16 คือ เลือกรูปภาพจากคอมพิวเตอร

นายประเสริฐ สิงหครุธ วันพุธที่ 10 กรกฎาคม 2556

8

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

ในที่นี้จะทําการเลือกรูปภาพจากคอมพิวเตอรและอัพโหลด ตามภาพที่ 1.5 หมายเลข 17เมื่อจัดขนาดของภาพไดเรียบรอย ใหคลิกที่ Set as profile photo ตามหมายเลข 17

17

ภาพที่ 1.5 แสดงหนาตางอัพโหลดรูปภาพจากเครือ ่ งคอมพิวเตอร ที่มา : นายประเสริฐ สิงหครุธ, 2556

นายประเสริฐ สิงหครุธ วันพุธที่ 10 กรกฎาคม 2556

9

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

18

19

ภาพที่ 1.6 แสดงหนาตางบัญชีของผูใชงานหลังจาก อัพโหลดรูปประจําตัว ที่มา : นายประเสริฐ สิงหครุธ, 2556

เมื่ออัพโหลดรูปประจําเรียบรอยจะประกฎตามภาพที่ 1.6 หมายเลข 18 หากตองการจะเปลี่ยนรูปประจําตัวอีกครั้งหนึ่ง ใหเลือกที่นี่ หมายเลข 19 คลิกเพือทําการตอไปตามภาพที่ 1.7

20

21 ภาพที่ 1.7 แสดงเพจหนาแรกของผูเริ่มใชงาน Gmail ครั้งแรก ที่มา : นายประเสริฐ สิงหครุธ, 2556

หมายเลข 20 คือ ชื่อผูใชงานและจํานวนของขอความในกลองจดหมาย หมายเลข 21 คือ ใหทําการคลิกที่นี่เพื่อเขาสู Gmail

นายประเสริฐ สิงหครุธ วันพุธที่ 10 กรกฎาคม 2556

10

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

วิธีการสมัครเขาใชงานเปนสมาชิกของ Gmail

ภาพที่ 1.8 แสดงกลองขอความจดหมายของผูใช Gmail ที่มา : นายประเสริฐ สิงหครุธ, 2556

นายประเสริฐ สิงหครุธ วันพุธที่ 10 กรกฎาคม 2556

11

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

วิธีการลงชื่อเขาใชงาน Blogger 2. การลงชื่อเขาใช Blogger 2.1 วิธีลงชื่อเขาใชงาน Blogger

22

23

ภาพที่ 2.1 แสดงกลองขอความจดหมายของผูใช Gmail ที่มา : นายประเสริฐ สองหครุธ, 2556

ทําการคลิกที่หมายเลข 22 More จะมีหัวขอยอยเรียงลงมา ใหผใ ู ชเลือกที่ หัวขอ Blogger ตามหมายเลข 23

นายประเสริฐ สิงหครุธ วันพุธที่ 10 กรกฎาคม 2556

12

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

หมายเลข 24 คือ การปรับเปลีย ่ นภาษา

24

ภาพที่ 2.2 แสดงหนาแรกของบัญชีผูใช Blogger ที่มา : นายประเสริฐ สิงหครุธ, 2556

นายประเสริฐ สิงหครุธ วันพุธที่ 10 กรกฎาคม 2556

13

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

2.2 การสราง Blogger

25

ภาพที่ 2.3 แสดงหนาบัญชีของผูใช Blogger ที่มา : นายประเสริฐ สิงหครุธ, 2556

คลิกที่ New Blog ตามหมายเลข 25 เพื่อเปนการสราง Blog ขึ้นมาใหม จะประกฎหนาตางตามภาพที่ 2.4

26

หมายเลข 26 ใหใสชอ ื่ ที่จะใชแสดง

27

บนหนา Blogger หมายเลข 27 ใหใสชอ ื่ เพื่อเปนการ กําหนด URL ของ Blogger

ภาพที่ 2.4แสดงหนาตาง CreateNew Blog ที่มา : นายประเสริฐ สิงหครุธ, 2556

นายประเสริฐ สิงหครุธ วันพุธที่ 10 กรกฎาคม 2556

14

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

หมายเลข 28เลือก Template

28

เบื้องตน เพื่อใชใน Blogger หมายเลข 29เมื่อใสขอมูลและ เลือก Template เบื้องตนแลว

29

ภาพที่ 2.5 แสดงหนาตาง Create New Blog ที่มา : นายประเสริฐ สิงหครุธ, 2556

หลังจากทําการสราง Blogger ขึ้นมาใหมแลว หนา Home ของผูใ  ช จะปรากฏชื่อ Blog ใหมที่ถูกสรางขึ้นมาดังภาพที่ 2.6

30

ภาพที่ 2.6แสดงหนา Home ของผูใช ที่มา : นายประเสริฐ สิงหครธ, 2556

หมายเลข 30 คือBlog ที่ถูกสราง และกําหนดชื่อขึ้นมาใหมใหคลิกที่นี่เพื่อ ไปสูหนา Dashboard เพื่อดําเนินการปรับแตง Blogger ตอไป

นายประเสริฐ สิงหครุธ วันพุธที่ 10 กรกฎาคม 2556

15

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

วิธีการลงชื่อเขาใชและการสราง Blogger

ภาพที่ 2.7แสดงหนา Dashboard ของ Blog ที่มา : นายประเสริฐ สิงหครุธ, 2556

นายประเสริฐ สิงหครุธ วันพุธที่ 10 กรกฎาคม 2556

16

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

วิธีการปรับแตงขนาดและกราฟฟกพื้นของ Bloggerเบื้องตน 3.วิธีการปรับแตงขนาดและกราฟฟกพื้น

ภาพที่ 3.1แสดงหนาแผงควบคุม (Dashboard) ของผูใชงาน Blogger ที่มา : นายประเสริฐ สิงหครุธ, 2556

หมายเลข 31 คือ หัวขอยอยของคําสั่งแมแบบ หมายเลข 32 คือ การกําหนดคา เลือก (Customize)

31

32

ภาพที่ 3.2แสดงหัวขอของแมแบบในแผงควบคุม ที่มา : นายประเสริฐ สิงหครุธ, 2556

นายประเสริฐ สิงหครุธ วันพุธที่ 10 กรกฎาคม 2556

17

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

หมายเลข 33 คือ เทมเพลต หมายเลข 34 คือ พื้นหลัง

34

33 35

หมายเลข 35 คือ ปรับความกวาง หมายเลข 36 คือรูปแบบ

36

37

หมายเลข 37 คือปรับแตงขั้นสูง

ภาพที่ 3.3 แสดงหนาเครื่องมือออกแบบเทมเพลตของ Blogger ที่มา : นายประเสริฐ สิงหครุธ, 2556

ใหทําการเลือกเทมเพลตตามหมายเลข 33ในที่นี้เลือกเทมเพลตแบบ Picture Window หรือกรอบหนาตาง ตอไปใหเลือกที่พื้นหลัง (Background) ตามทีไ ่ ดเลือกไว

3839

ภาพที่ 3.4แสดงหัวขอใหปรับแตงพื้นหลังของเทมเพลต ที่มา : นายประเสริฐ สิงหครุธ, 2556

นายประเสริฐ สิงหครุธ วันพุธที่ 10 กรกฎาคม 2556

18

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

หมายเลข 38 ในหัวขอพื้นหลังใหเลือกอัพโหลดรูปภาพจากคอมพิวเตอร และตั้งคาการจัดเรียง (Alignment) ใหอยูที่ตําแหนงกลางดานบน และเลือก ไมจัดเรียง (Don’t Tile) และคลิกเครื่องหมายถูกทีS ่ croll with page หรือ คําสั่งเลื่อนไปพรอมกับหนาเว็บ

40 39

ภาพที่ 3.5 แสดงหัวขอใหปรับขนาดความกวางของหนาเทมเพลต ที่มา : นายประเสริฐ สิงหครุธ, 2556

หมายเลข 39 คือ แถบปรับขนาดความกวางของหนาเทมเพลต ในที่นี้จะตั้ง ความกวางทั้งหมด (Entire blog) เปน 980 pxและแถบดานขางขวา (Right Sidebar) เปน 330 px

41 40

41 42 ภาพที่ 3.6แสดงหัวขอใหปรับรูปแบบ (Layout) ของหนาเทมเพลต ที่มา : นายประเสริฐ สิงหครุธ, 2556

นายประเสริฐ สิงหครุธ วันพุธที่ 10 กรกฎาคม 2556

19

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

การออกแบบรูปแบบของเทมเพลต ในที่นี้ผูใชจะเลือกใชการออกแบบ เนื้อความ (Body layout) เปนแบบ 2 แถว (Column) ตามหมายเลข 40และ เลือกใชการออกแบบสวนทาย (Footer layout) เปนแบบ 2 แถว (Column) ตามหมายเลข 41 เมื่อกําหนดคาคําสั่งทัง้ หมดเสร็จสิ้น ใหทําการคลิกที่คําสั่ง ใชกับบล็อก (Apply to blog) ตามหมายเลข 42

42

ภาพที่ 3.6 แสดงหนาเครื่องมือออกแบบเทมเพลตของ Blogger ที่มา : นายประเสริฐ สิงหครุธ, 2556

นายประเสริฐ สิงหครุธ วันพุธที่ 10 กรกฎาคม 2556

20

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

ภาพที่ 3.7 แสดงหนาเว็บ Blogger หลังจากที่ทําการปรับแตงขนาดและกราฟฟกพื้น ที่มา : นายประเสริฐ สิงหครุธ, 2556

หลังจากที่ทาํ การปรับแตงเทมเพลต, พื้นหลัง, ขนาด และรูปแบบ ทั้งหมด เสร็จเรียบรอย และคลิกยืนยันคําสั่ง ใชกับบล็อก (Apply to blog) และทํา การดูบล็อก (View blog) แลวจะปรากฎหนาเว็บบล็อกตามภาพที่ 3.7 ซึ่งถา หากจะทําการแกไขหรือปรับแตงเพิ่มเติมใหทําตามหัวขอที่ 3 อีกครั้งหนึ่ง

นายประเสริฐ สิงหครุธ วันพุธที่ 10 กรกฎาคม 2556

21

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

4. วิธการทํ ีการทํา Creative Commons CC (เงื ่ นไขในการใหอนุญาติของครี ของครี การ (เงือ เอทีฟคอมมอนส) สัญญาอนุญาตใชงาน (เงื่อนไขในการใหอนุญาตของครีเอทีฟคอมมอนส) คือ สัญญาของครีเอทีฟคอมมอนตนี้ จะเอื้อใหมีการใชสื่อ ภาพ เสียง ขอมูล โดยแบงสัญญาอนุญาตออกในรูปแบบของการแจกจายและใชขอมูล โดย เนนที่การอางอิงเจาของลิขสิทธิ์เดิม หมายเลข 43 คือ Creative Commons CC (เงื่อนไขในการใหอนุญาติ ของครีเอทีฟคอมมอนส)

43

ภาพที่ 4.1 แสดงหนาเว็บ Blogger วิธีการทํา Creative Commons CC ที่มา : นายประเสริฐ สิงหครุธ, 2556

นายประเสริฐ สิงหครุธ วันพุธที่ 10 กรกฎาคม 2556

22

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

หมายเลข 44 คือ คลิกที่ Creative Commons

44

ภาพที่ 4.2 แสดงหนาเว็บ Blogger วิธีการทํา Creative Commons CC ที่มา : นายประเสริฐ สิงหครุธ, 2556

หมายเลข 45 คือ คลิกเลือกใบอนุญาต

45 ภาพที่ 4.3 แสดงหนาเว็บ Blogger วิธีการทํา Creative Commons CC ที่มา : นายประเสริฐ สิงหครุธ, 2556

นายประเสริฐ สิงหครุธ วันพุธที่ 10 กรกฎาคม 2556

23

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

ปรับตั้งคาตามความเหมาะสมของการใชงาน

ภาพที่ 4.4 แสดงหนาเว็บ Blogger วิธีการทํา Creative Commons CC ที่มา : นายประเสริฐ สิงหครุธ, 2556

1

2

3

4

ความหมายไอคอน 1. Creative Commons CC 2. แสดงที่มา ตองมีการแสดงทีม ่ าของงานดังกลาว ตามรูปแบบของผู สรางสรรค หรือผูอนุญาตกําหนด 3.ไมใชเพื่อการคา ยินยอมใหผูอื่นคัดลอก แจกจาย จัดแสดง และเผยแพร แตตองไมเปนการนําไปใชเพื่อการคาผลกําไรใดๆ 4.ไมดัดแปลง ยินยอมใหผูอื่น คัดลอก แจกจาย จัดแสดง แตหามแกไขใดๆ นายประเสริฐ สิงหครุธ วันพุธที่ 10 กรกฎาคม 2556

24

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

หมายเลข 46 คือ จะเปลี่ยนไปตามตั้งคาที่เราไดเลือก

46

ภาพที่ 4.5 แสดงหนาเว็บ Blogger วิธีการทํา Creative Commons CC ที่มา : นายประเสริฐ สิงหครุธ, 2556

หมายเลข 47 คือ กรอกขอมูล หมายเลข 48 คือ สุดทาย Copy Code

47

48

ภาพที่ 4.6 แสดงหนาเว็บ Blogger วิธีการทํา Creative Commons CC ที่มา : นายประเสริฐ สิงหครุธ, 2556

นายประเสริฐ สิงหครุธ วันพุธที่ 10 กรกฎาคม 2556

48 25

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

หมายเลข 49 คลิกรูปแบบ หมายเลข 50 มาหนาจัดการบล็อก กดเพิ่ม Gadget หมายเลข 51 เลือก จาวาสคริปต กดตรงตัว + แลวนํา Code ที่ Copy มา นําไปวาง

49

51 50

ภาพที่ 4.7 แสดงหนาเว็บ Blogger วิธีการทํา Creative Commons CC ที่มา : นายประเสริฐ สิงหครุธ, 2556

หมายเลข 51 คือ ผลที่เราทําจะแสดงออกมาเปนแบบนี้

52

ภาพที่ 4.8 แสดงหนาเว็บ Blogger วิธีการทํา Creative Commons CC ที่มา : นายประเสริฐ สิงหครุธ, 2556

นายประเสริฐ สิงหครุธ วันพุธที่ 10 กรกฎาคม 2556

26

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

การดูบล็อก (View blog) แลวจะปรากฎหนาเว็บบล็อกตามภาพที่ 3.7 ซึ่งถา หากจะทําการแกไขหรือปรับแตงเพิ่มเติมใหทําตามหัวขอที่ 3 อีกครั้งหนึ่ง

นายประเสริฐ สิงหครุธ วันพุธที่ 10 กรกฎาคม 2556