วันอาทิตย์ที่ 24 กุมภาพันธ์ พ.ศ. 2562

✿ วิธีเพิ่มขนาด Clip Video ใน Blog

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

     เริ่มกันตั้งแต่การอัปโหลดคลิปและวิธีเช็คขนาดจริงของคลิปวิดีโอกันไปเลย อาจจะยาวหน่อย แต่ถ้าเรารู้ว่าต้องหาอะไรจากตรงไหนก็จะจำได้ และเข้าใจการทำงานมากยิ่งขึ้นค่ะ ✧ (´・ᴗ・ ` )





1. การอัปโหลดคลิปวิดีโอจากเครื่องคอมพิวเตอร์ขึ้นสู่บล็อก

     1.1 คลิกที่สัญลักษณ์ Slate Film เพื่อแทรกวิดีโอลงในบล็อก




     1.2 จะมีหน้าต่างเด้งขึ้นมาให้เราเลือกการอัปโหลดรูป แบบแรกอัปโหลดจากเครื่องคอมพิวเตอร์ของเรา




     1.3 แบบที่สอง เลือกจากลิงก์ Youtube โดย Copy URL ที่เราต้องการลงในช่องใส่ URL และคลิกที่สัญลักษณ์แว่นขยาย ระบบจะดึงคลิปนั้นขึ้นมาจากนั้นคลิก 'เลือก' 




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






2. การปรับขนาดคลิปวิดีโอที่อัปโหลดจากเครื่องคอมพิวเตอร์

     ไม่ว่าเราจะเลือกอัปโหลดด้วยวิธีไหนใน 3 แบบข้างบน เมื่อคลิปวิดีโอถูกอัปโหลดขึ้นสู่บล็อก คลิปจะอยู่ที่ขนาด width="320" height="266" ทั้งหมดค่ะ

     2.1 ไฟล์วิดีโอนี้เป็นตัวอย่างการอัปโหลดวิดีโอจากเครื่องคอมพิวเตอร์นะคะ มีขนาดจริงอยู่ที่ width="568" height="320" แต่เมื่อนำมาอัปโหลดขึ้นบล็อกปุ๊บขนาดจะถูกปรับอัตโนมัติอยู่ที่ width="320" height="266" ทันทีแบบนี้




     2.2 เราจะมาเพิ่มขนาดคลิปนี้กันนะคะ โดยเข้าไปที่โหมด HTML เหมือนเดิม มองหาคำสั่งขนาดของวิดีโอ ซึ่งมองได้ง่ายค่ะเพราะเป็นลักษณะคำสั่งแบบนี้ width="320" height="266" 




     2.3 ลบตัวเลขเดิมออกแล้วพิมพ์ใหม่ไปเลยค่ะ จะพิมพ์ทับไปเลยก็ได้ให้เป็นขนาด width="568" height="320" ซึ่งคือขนาดเดิม แค่นี้เราก็จะได้คลิปวิดีโอที่ใหญ่ขึ้นและภาพชัดเจนเรียบร้อยค่ะ




คลิปวิดีโอที่มีขนาดเท่าต้นฉบับค่ะ



     ** ทีนี้เราจะรู้ได้ยังไงว่าคลิปต้นฉบับที่อยู่ในเครื่องของเรามีขนาดเท่าไหร่ ให้ทำแบบนี้ค่ะ เข้าไปที่โฟลเดอร์ที่เราเก็บคลิปไว้ > นำเมาส์ชี้ไปที่คลิปวิดีโอแล้วคลิกขวา >  เลือก Properties > เลือก Detials จะมีหน้าต่างรายละเอียดโผล่ขึ้นมา เราก็จะเห็นขนาดจริงของคลิปวิดีโอค่ะ






3. การปรับขนาดคลิปวิดีโอที่อัปโหลดจาก Youtube (แบบในข้อ 1.3)

     เมื่อวาง URL และกดเลือกเรียบร้อยแล้ว คลิปจะถูกดึงมาในบล็อกทันทีค่ะ ของจริงคลิปออกจะใหญ่ พอมาอยู่ในบล็อกเหลืออันนิดเดียว ヾ(`ε´)ノ





     3.1 เรามาแก้ไขกันค่ะ เข้าไปที่โหมด HTML แล้วเปลี่ยนตัวเลขเหมือนเดิมค่ะ โค้ดของ Youtube จะหน้าตาแบบนี้ แต่การมองหาคำสั่งขนาดคลิปวิดีโอยังเหมือนเดิม




     3.2 ใส่ตัวเลขขนาดเท่าต้นฉบับลงไป คือ width="560" height="315"




คลิปวิดีโอที่มีขนาดเท่าต้นฉบับค่ะ




     ** ขนาดต้นฉบับจาก Youtube ดูได้จากการคลิกเข้าไปที่ลิงก์นั้นโดยตรงค่ะ ใต้คลิปจะมีสัญลักษณ์เหล่านี้อยู่ คลิกที่ 'แชร์' 




     คลิก 'ฝัง'




     ระบบจะโชว์โค้ด HTML ขึ้นมา เราดูขนาดคลิปวิดีโอได้จากตรงที่ขีดเส้นเอาไว้ค่ะ นอกจากนี้เรายังสามารถ Copy โค้ดนี้ไปวางในบล็อกเลยก็ได้เช่นกัน






4. การวางโค้ด HTML ที่ Copy จากลิงก์ Youtube โดยตรง

    4.1 เราสามารถคัดลอกโค้ดจาก Youtube ไปวางในบล็อกได้เลยค่ะ แต่คลิปนี้เจ้าของบล็อกจะเพิ่มขนาดคลิปให้ใหญ่ขึ้นอีกหน่อย อันนี้เปลี่ยนคลิปบ้างเดี๋ยวจะเบื่อกันซะก่อน 




     4.2 นำโค้ดไปวางแล้วเพิ่มขนาดให้ใหญ่ขึ้น จากเดิมที่คลิปมีขนาด width="560" height="315" เจ้าของบล็อกจะบวกเพิ่มไปอีกอย่างละ 100 นะคะ เป็น width="660" height="415"




คลิปวิดีโอที่มีขนาดใหญ่ขึ้นจากปกติค่ะ




     การเพิ่มขนาดคลิป อย่าเพิ่มให้ใหญ่จนเกินไปนะคะเพราะภาพจะแตกและอาจจะล้นหน้าเว็บไซต์ของเราด้วยก็ได้ เอาให้พอดีกับความสวยงามก็พอ ส่วนเรื่องการย่อขนาดคลิปก็แค่ลดตัวเลขให้สัดส่วนมันสัมพันธ์กันก็เพียงพอแล้วค่ะ ヾ(❀╹◡╹)ノ゙





วันพฤหัสบดีที่ 21 กุมภาพันธ์ พ.ศ. 2562

✿ สอนวิธีเปลี่ยนสีตัวอักษรในบล็อกได้ทุกเฉดบนโลกใบนี้

     สอนวิธีเปลี่ยนสีตัวอักษรในกรณีที่ระบบมีสีให้เลือกน้อย สีไม่ถูกใจ สีไม่ตรงตามแนวคิด ฯลฯ เจ้าของบล็อกก็เลยจะมาบอกวิธีเปลี่ยนสีตัวอักษรแบบง่าย ๆ  เพียงแค่รู้ชื่อสีหรือโค้ดสีที่ถูกต้องก็พอ โดยจะสอนให้เข้าไปเปลี่ยนในโหมด HTML ค่ะ ซึ่งวิธีที่จะอธิบายต่อไปนี้มาจากความเข้าใจของเจ้าของบล็อกเอง ภาษาที่ใช้อาจจะง่าย ๆ  แต่ทุกคนทำได้แน่นอนค่ะ

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





ไอคอนบอล ขั้นตอนการสร้างบทความและการเปลี่ยนสีตัวอักษร à¹„อคอนบอล

1. ก่อนจะเปลี่ยนสีตัวอักษร เราต้องพิมพ์ข้อมูลต่าง ๆ  ที่ต้องการอัปเดตให้เรียบร้อยทั้งหมดเสียก่อน ซึ่งสีอักษรที่เป็นค่าเริ่มต้นเจ้าของบล็อกตั้งค่าไว้ที่สีดำ ยกเว้นในส่วนที่เป็นลิงก์ได้ตั้งค่าไว้ที่สีแดง ที่มาที่ไปของภาพตัวอย่างด้านล่างก็ตัดมาจากส่วนหนึ่งในตอน 'วิธีฝังโค้ด HTML ลงใน Blog' นะคะ เดี๋ยวเราจะมาลองเปลี่ยนสีลิงก์ตรงที่ลูกศรชี้ให้เป็นสีอื่นที่นอกเหนือจากสีที่บล็อกกำหนดกัน




2. เข้าไปในส่วนแก้ไขบทความจะเห็นข้อความของเราที่เหมือนกับหน้าบทความ ให้คลิกช่อง HTML




3. เมื่อเข้ามาด้านใน HTML แล้ว จะเห็นตัวอักษรเยอะแยะไปหมดไม่ต้องตกใจค่ะ เพราะ Ctrl + F ช่วยได้ ถ้าย้อนกลับไปดูภาพตัวอย่างในข้อ1 คำที่อยู่ใกล้กับ 'RevolverMaps' คือคำว่า 'ตัวอย่างโค้ด HTML' ที่เจ้าของบล็อกเลือกคำนี้เพราะนอกจากจะอยู่ใกล้ที่สุดแล้วมันยังเด่นแล้วก็ไม่ซ้ำในหน้านี้ค่ะ (สังเกตคำว่า RevolverMaps จะมีอยู่หลายจุด) 

     หลังจาก Ctrl + F คำว่า 'ตัวอย่างโค้ด HTML' แล้วก็เจอเลย ลองเปรียบเทียบข้อมูลกับภาพในข้อ2 ดูจะเห็นว่าข้อมูลตรงกัน แต่มาในลักษณะภาษา HTML ...ที่เห็นลูกศรหลายจุดอันนั้นแค่ชี้ให้ดูเฉย ๆ  นะคะว่าตรงไหนเป็นตรงไหน ส่วนที่สำคัญจริง ๆ  คือในช่องสี่เหลี่ยมเพราะเราจะพิมพ์เปลี่ยนสีกันตรงจุดนี้






4. เลือกสีที่เราต้องการ สามารถดูรหัสสีได้ที่ Color Names & HTML Color Chart ค่ะ รหัสสีที่เราจะใช้เปลี่ยนจะพิมพ์ชื่อสีก็ได้ เช่น LightSkyBlue, DeepSkyBlue, DodgerBlue เป็นต้น หรือจะใส่เป็นโค้ดก็ได้แต่ต้องใส่  #  นำหน้าด้วย เช่น #87CEFA, #00BFFF, #1E90FF เป็นต้น จะพิมพ์ตัวเล็กหรือตัวใหญ่ก็ได้ค่ะเดี๋ยวระบบจะแปลงเป็นตัวพิมพ์เล็กทั้งหมดให้เอง




5. Copy ชื่อสี หรือ โค้ดสีไปวางตรงจุดที่อยู่ในกรอบสีแดง ในตัวอย่างใส่ชื่อสี DeepSkyBlue จากนั้นคลิกกลับไปที่โหมด 'เขียน'




6. ระบบแก้ไขสีเรียบร้อยแล้วค่ะ




7. ลองเช็คที่หน้าบทความดู เห็นสีที่เปลี่ยนได้ชัดเจนค่ะ






ไอคอนบอล การสร้างคำสั่งสีกรณีที่บทความนั้นมีแต่ตัวหนังสือ à¹„อคอนบอล

1. ถ้าบทความที่เรากำลังพิมพ์มีแต่ตัวหนังสือหมดทั้งหน้า อย่างเช่นบทความในตอน [Talk] ภูมิใจเสนอ...โลกของคนกลัวหมา เมื่อเราคลิกเข้าไปในโหมด HTML ก็จะไม่มีคำสั่งอะไรมากค่ะ ตามภาพด้านล่างจะมีแค่คำสั่งวางไอคอน คำสั่งเว้นวรรค คำสั่งเว้นบรรทัด นอกนั้นก็เป็นข้อความที่เราพิมพ์




2. แล้วถ้าเราอยากจะเพิ่มสีทีหลัง ก็ให้คลุมดำไปบนข้อความที่เราต้องการแล้วคลิกที่สีอะไรก่อนก็ได้เพื่อให้เกิดคำสั่ง HTML ขึ้นมา (แต่จะเขียนเองก็ได้ค่ะคำสั่งจะเป็นแบบนี้ <span style="color: โค้ดสี;">ข้อความที่เราต้องการเปลี่ยนสี</span>)




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




4. ถ้าไปดูที่หน้าบทความก็จะเห็นข้อความที่เป็นสีม่วง Magenta ตามที่เราเปลี่ยนเบื้องต้น




5. เดี๋ยวเรามาลองเปลี่ยนข้อความเป็นสีเขียว Olive (#808000) กันนะคะ กลับเข้าไปในโหมด HTML เหมือนเดิม Copy ชื่อสีหรือโค้ดสีแล้วก็วางทับชื่อสีเดิม จากนั้นคลิกกลับไปโหมดเขียน บันทึก แค่นี้ก็เรียบร้อยค่ะ




6. ที่หน้าบทความเราได้ข้อความสีเขียว Olive แล้วค่ะ




     การเปลี่ยนสีด้วยภาษา HTML ก็จะมีประมาณนี้ และยังสามารถเข้าไปเลือกเฉดสีได้อีกมากมายที่นี่นะคะ HTML color codes เจ้าของบล็อกชอบเว็บไซต์นี้ เค้าทำเครื่องมือค้นหาโค้ดสีง่ายดีค่ะ




ไอคอนบอล แนะนำวิธีสังเกตเมื่อเข้าไปในโหมด HTML à¹„อคอนบอล

     หากในอนาคตเพื่อน ๆ  อยากเปลี่ยนสีตัวอักษรไม่ว่าจะเปลี่ยนจากที่ไหนก็ตาม แล้วเจอภาษา HTML ...ถ้าเป็นโค้ดที่เกี่ยวกับการเปลี่ยนสี จะเป็นคำสั่งแบบนี้ค่ะ เช่น 

<span style="color: cyan;"> หรือ 
<span style="background-color: #20124d;"> หรือ 
<span style="background-color: #4c1130; color: white;"> เป็นต้น

     ซึ่งทุกคำสั่งที่เกี่ยวกับสีจะมี color: อยู่ด้วย ตามตัวอย่างที่ยกมาจะมีทั้งชื่อสีและแบบโค้ดสีซึ่งใช้ได้เหมือนกัน ยกเว้นบางรูปแบบที่เค้าให้ใส่เป็นโค้ดเท่านั้น การไล่ดูภาษา HTML ก็ไม่ยากค่ะ คำสั่งมันก็มักจะซ้ำ ๆ  กันนี่แหละ ถ้าจับจุดได้ก็จะเปลี่ยนอย่างอื่นได้อีก เช่น เพิ่มหรือลดขนาดวิดีโอ เป็นต้น

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




วันอาทิตย์ที่ 17 กุมภาพันธ์ พ.ศ. 2562

✿ วิธีฝังโค้ด HTML ลงใน Blog

     เนื้อหาในหน้านี้ต่อเนื่องมาจาก ✧ Widget ✧ แสดงที่ตั้งและสถิติของผู้เยี่ยมชมบล็อกหรือเว็บไซต์ ค่ะ ข้อมูลในนั้นเป็นการแนะนำให้ติดตั้งวิดเจ็ตเกี่ยวกับการดูสถิติของผู้เยี่ยมชมว่าอยู่ที่ไหน ประเทศอะไร เข้าเยี่ยมชมกี่ครั้ง เป็นต้น และจะต้องมีการฝังโค้ด HTML ลงในบล็อกด้วย เจ้าของบล็อกก็เลยย้ายข้อมูลการฝังโค้ดมาเขียนไว้ในบล็อก My Pensieve นี้แทนค่ะ เพราะสามารถใช้ในการฝังโค้ดได้ทุกอย่าง

     การยกตัวอย่างจะใช้โค้ดของ RevolverMaps และ Flag Counter นะคะ

วิธีฝังโค้ด HTML ใน Blog


1. เข้าไปที่ 'การออกแบบ'
2. เลือก 'รูปแบบ'



4. คลิก 'เพิ่ม Gadget'



5. คลิกเพิ่ม 'HTML/จาวาสคลิปต์'



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



ตัวอย่างโค้ด HTML



     เมื่อแต่งรายละเอียดทุกอย่างเรียบร้อยแล้ว ถ้าเป็นการฝังโค้ดข้อมูลใหม่ก็ copy code ไปไว้ในช่อง HTML ของ Blog ได้เลย สังเกตด้านข้างจะติ๊กอยู่ในช่อง new map




     แต่ถ้าเป็นการปรับปรุงใหม่ เช่น อยากเปลี่ยนสีจุดหรืออยากเปลี่ยนแบบตัวอักษร โดยที่ยังคงสถิติเดิมเอาไว้ ให้เลือกที่ update จากนั้น Copy โค้ดเก่าทั้งหมดไปวางไว้ในช่องสีเล็ก ๆ  ด้านข้าง แล้วกด Submit รอประมวลผลสักครู่แล้วค่อย copy code ใหม่ในช่องใหญ่กลับไปไว้ในบล็อกค่ะ



2. Flag Counter

     เมื่อปรับแต่งรายละเอียดที่เราต้องการเรียบร้อยแล้ว ก็จะได้โค้ด HTML ค่ะ Copy โค้ดแถวแรกไปวางในบล็อกได้เลย




     แต่ Flag Counter ไม่สามารถปรับปรุงข้อมูลโดยใช้โค้ดเดิมได้ ถ้าอยากเปลี่ยนรูปแบบใหม่ ต้องวางโค้ดใหม่เท่านั้นค่ะ ดังนั้น สถิติเดิมก็จะหายไปด้วย 




     การฝังโค้ด HTML เรายังสามารถฝังในเนื้อหาหลักได้ด้วยค่ะ เพราะมีช่อง HTML ให้เราใส่โค้ดอยู่ ลองนำไปใช้กันดูนะคะ



◕ 10 อันดับบทความยอดนิยมประจำสัปดาห์ ◕