บทความ

กำลังแสดงโพสต์จาก 2022

โค้ดทำตัวเลือกแบบ Drop down, drop-down list code

รูปภาพ
โค้ดทำตัวเลือกแบบ Drop down

ครอบตัดส่วนเกินของภาพด้วย Crop/Pad Fillter : OBS Training

รูปภาพ
ครอบตัดส่วนเกินของภาพด้วย Crop/Pad Fillter : OBS Training ปุ่ม Filter ที่ส่วนบนของเมนู UI ภาพก่อนครอบตัด ภาพแสดงการตั้งค่าครอบตัด ภาพที่แสดงหลังการใช้ Crop/Pad Filter

ปัญหาหน้าเพจในส่วนของ Page List ไม่เรียงกันในมุมมองมือถือ แก้ด้วย class : Blogger

 ปัญหาหน้าเว็บไม่เรียงกันในมุมมองมือถือ แก้ด้วย class 1. แก้ไขส่วน b:section ก่อนอื่นไปที่ ส่วนของ Pagelist ค้นหา บรรทัดนี้ <b:section class='tabs' id=..............................>  ให้แก้ไขเป็นตามนี้ <b:section class='tabs' id='crosscol' maxwidgets='1' name='Cross-Column' showaddelement='true'> 2. แก้ไขระยะห่างระหว่างแต่ละแท็บ  โดยค้นหาคำว่า .tabs ในส่วน header แล้วหาที่คำว่า padding แก้ไขตัวเลขให้เป็นค่าน้อย ๆ เพื่อให้ข้อความชื่อแท็บอยู่ใกล้ ๆ กัน ดัวตัวอย่างที่แก้ไขคือที่เป็นตัวสีแดง .tabs{ list-style:none } .tabs li{ display:inline-block } .tabs li a{ cursor:pointer; display:inline-block; font-weight:700; text-transform:uppercase; padding:3px 3px }

การใช้งาน DroidCam OBS

รูปภาพ
  การใช้งาน DroidCam OBS หลังจากติดตั้งปลั๊กอิน DroidCam OBS แล้ว ให้รีสตาร์ท OBS Studio ที่ข่อง Source คลิกเพิ่มตัวเลือก  'DroidCam OBS'  ตั้งค่าคุณสมบัติ Properties  เลือก 'ใช้ WiFi'  ป้อนที่อยู่ IP ที่แสดงบนแอปโทรศัพท์ ลงในกล่อง droidcam port  โทรศัพท์และคอมพิวเตอร์ของคุณต้องเชื่อมต่อกับเครือข่าย/เราเตอร์เดียวกัน คลิก Activate plugin ในคอมจะทำการเชื่อมต่อกับแอพ DroidCam OBS หากต้องการหยุด/แก้ไขตัวเลือกใดๆ ให้ [Deactivate] *อย่าเปิดใช้งานเสียง หากคุณไม่ต้องการ  สิ่งนี้ใช้ CPU พิเศษ * ขอแนะนำให้เก็บโทรศัพท์ไว้ที่แบตเตอรี่ 100% และเชื่อมต่อกับแหล่งจ่ายไฟ เพื่อหลีกเลี่ยงการใช้แบตเตอรี่และความร้อนที่เพิ่มขึ้น *คลิก [Refresh Device List] เพื่อค้นหาอุปกรณ์โดยอัตโนมัติ  สำหรับการค้นพบ WiFi ตรวจสอบให้แน่ใจว่าแอปโทรศัพท์เปิดอยู่และอนุญาตให้ใช้ multicast ในการตั้งค่าเราเตอร์ของคุณ *หากต้องการใช้โทรศัพท์หลายเครื่อง คุณสามารถเพิ่มแหล่ง DroidCam OBS อื่นในฉากของคุณได้ *หากต้องการใช้โทรศัพท์เครื่องเดียวกันในหลายฉาก ให้เพิ่ม Source เดียวกันในฉากทั้งหมด  หรือตรวจสอบให้แน่ใจว่าได้เปิด

ตัวอย่างทำสีพื้นหลังข้อความสวย ๆ

ไปเห็นกรอบข้อความสวย ๆ มา  https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_colors

สร้างเฟรมสำหรับทดลองแก้ไขด้วยตนเองบนเว็บ : Create frame for try it yourself editor ( HTML, CSS, JS ) online

สร้างเฟรมสำหรับทดลองแก้ไขด้วยตนเองบนเว็บ  Create frame for try it yourself editor ( HTML, CSS, JS ) online สำหรับการสร้างเฟรม try it yourself นี้ จะแบ่งเป็น 4 ส่วนที่จะเขียนโค้ด 1. ส่วนแรกคือ ส่วนแถบบาร์นำทางด้านบน ตัวอย่างโค้ดแถบบาร์นำทางบนเฟรมรันโค้ด 2. ส่วนที่เป็นคำสั่งของกล่องปุ่มรันโค้ด จะมี 2 ส่วนย่อยคือ 2.1 กล่องปุ่มรันโค้ด จะมีโค้ดอยู่ในส่วนที่ 1 แถบบาร์นำทาง หรือหากแยกเฉพาะส่วนปุ่มออกมา จะแบ่งเป็นโค้ด css   2.2 โค้ดของปุ่มรันโค้ด 2.3 สคริปต์โค้ดของปุ่มรันโค้ด ข้อมูลโค้ดข้างต้นเป็นโค้ดจากเว็บ W3schools.com ยังมีตัวอย่างจากอีกเว็บคือเว็บ https://fellowtuts.com/html-css/make-a-html-css-js-try-it-yourself-editor/ ได้แนะนำแนวทางทำหน้าต่างเฟรม try it yourself editor ไว้ด้วย สำหรับในส่วนโค้ดของปุ่มรันโค้ด คือ สำหรับในส่วน script ของปุ่มรันโค้ด คือ โค้ดทั้งหมดของ  Create frame for try it yourself editor  คือ ตัวอย่างเมื่อทำเสร็จ   

กำหนดลักษณะรายการ : List Style

 css สำหรับกำหนดลักษณะรายการ มีดังนี้  รูปแบบของรายการ  list-style-type :  disc ; list-style-type :  circle ; list-style-type :  square ; list-style-type :  decimal ; list-style-type :  decimal-leading-zero ; list-style-type :  lower-alpha ; list-style-type :  lower-greek ; list-style-type :  lower-latin ; list-style-type :  lower-roman ; list-style-type :  upper-alpha ; list-style-type :  upper-greek ; list-style-type :  upper-latin ; list-style-type :  upper-roman ; list-style-type :  armenian ; list-style-type :  cjk-ideographic ; list-style-type :  georgian ; list-style-type :  hebrew ; list-style-type :  hiragana ; list-style-type :  hiragana-iroha ; list-style-type :  katakana ; list-style-type :  katakana-iroha ; list-style-type :  none ; list-style-position : inside ; Choose example 1 list-style-position : outsi de ; nitial value outside Applies to list items Inherited yes Computed value as specified Animation type discrete Coca Cola Coffee Tea Coca Cola Coffee Tea C

เพิ่มส่วนที่ซ่อนในหน้าเว็บ collapsible

 เพิ่มส่วนที่ซ่อนในหน้าเว็บ ทำเว็บที่ซ่อนข้อความดังตัวอย่าง 1 เพิ่มโค้ดในส่วน style <style> .collapsible {   background-color: red;   color: white;   cursor: pointer;   padding: 18px;   width: 100%;   border: none;   text-align: left;   outline: none;   font-size: 20px; } .active, .collapsible:hover {   background-color: yellow;   color: black; } .collapsible:after {   content: '\002B';   color: white;   font-weight: bold;   float: right;   margin-left: 5px; } .active:after {   content: "\2212"; } .content {   padding: 0 18px;   max-height: 0;   overflow: hidden;   transition: max-height 0.2s ease-out;   background-color: #fff4f4; } </style> 2. ใส่เนื้อหาในโค้ด และอย่าลืมใส่ script ไว้ท้ายบทความด้วย ดังตัวอย่าง  <body> <h2>เพิ่มส่วนที่ซ่อนในหน้าเว็บ ด้วย Class: .collapsible </h2> <h3>ตัวอย่าง 1:</h3> <button class="collapsible">ข้อความ</button> <div class="content">   <p>Lorem ipsum

เพิ่มส่วนที่เป็นไฟล์ PDF ในหน้าบล็อกเกอร์

รูปภาพ
หากเราต้องการวางไฟล์เอกสาร เช่นไฟล์ PDF ลงในโพสต์ในบล็อกเกอร์  วิธีหนึ่งที่ทำได้คือ การวางเอกสารไว้ในส่วนที่เรียกว่า iframe โดยมีขั้นตอนหลักอยู่ 2 ขั้นตอน คือการเตรียมไฟล์และการลิงก์ไฟล์วางไว้ใน iframe code ขั้นตอนที่ 1 การเตรียมไฟล์ 1.1 Upload File ที่จะนำเข้า Blogger ไปไว้ที่ My Google Drive   1.2 คลิกขวาที่ไฟล์ เลือกคำสั่ง >  Preview  ดูตัวอย่าง 1.3 คลิกที่คำสั่งเพิ่มเติม (...) ด้านขวาของตัวอย่างไฟล์ เลือกคำสั่ง >  Open in a new window . เปิดในหน้าต่างใหม่ 1.4 คลิกที่ คำสั่งเพิ่มเติม (...)   ด้านขวาของตัวอย่างไฟล์ เลือกคำสั่ง  Embed item .   ฝังรายการ  (อย่าลืมตั้งค่าไฟล์เป็น   publicly visible เพื่ออนุญาตให้แสดงไฟล์นี้ให้ทุกคนเห็น ) 1.4 Copy the embed code  ขั้นตอนที่ 2  วางไฟล์ ในบล็อก 2.1 ไปที่หน้าต่างเขียนโพสต์/เพจ  มุมมอง html   2.2 วาง Embed Code ที่คัดลอกมา ลงตำแหน่งที่ต้องการให้แสดง <iframe   allow="autoplay"   height="480"   src=" ลิงก์ไฟล์ใน Google Drive "   width="640" ></iframe> ภาพตัวอย่างในหน้าบล็อก

ขั้นตอนการเพิ่มปุ่มรับชำระเงินผ่านเว็บไซต์ด้วย PayPal

รูปภาพ
 ขั้นตอนการเพิ่มปุ่มชำระเงินผ่านเว็บไซต์ด้วย PayPal ในบทความนี้ ผู้เขียนจะกล่าวถึงขั้นตอนการเพิ่มปุ่มชำระเงินโดยใช้เครื่องมือจากแพลตฟอร์มรับชำระเงินระดับโลก PayPal  ซึ่งการที่จะสามารถเข้าไปรับโค้ดปุ่มได้ ท่านต้องเป็นสมาชิกก่อน สามารถไปสมัครสมาชิกได้โดยเข้าเว็บไซต์  PayPal  นี้ แล้วไปที่เมนู >เครื่องมือทั้งหมด ที่หน้าต่างรวมเครื่องมือรับชำระเงิน เลือกเมนู  >ปุ่ม PayPal  คลิก >เปิด จากนั้นเลือกรูปแบบปุ่มที่ต้องการ ในที่นี้เราขอเลือกปุ่มแบบที่มีตะกร้าสินค้า เป็นตัวอย่างค่ะ คลิกที่ตัวเลือก >เพิ่มสินค้าลงในตะกร้า  จะเข้าสู่หน้าต่างการตั้งค่า สร้างปุ่มการชำระเงิน PayPal  ให้กรอกข้อมูลลงในช่องที่มีให้ครบถ้วน เมื่อกรอกข้อมูลทุกขั้นตอนเรียบร้อย คลิกปุ่ม >สร้างปุ่ม จะเข้าสู่หน้าต่างที่มีโค้ด ให้เราคลิกที่ >เลือกรหัส เพื่อคัดลอกโค้ดที่ได้ไปวางในหน้าต่างเว็บของเรา (การวางโค้ดที่หน้าเว็บเราต้องเปิดมุมมอง HTML วางในตำแหน่งที่จะให้ลูกค้าทำการสั่งซื้อสินค้า) สามารถกลับไปแก้ไขปุ่มหากมีข้อมูลเปลี่ยนแปลง  หรือสร้างปุ่มสำหรับสินค้าอื่นโดยใช้ปุ่มนี้เป็นแม่แบบได้ เลือกจากเมนูคำสั่งในหน้าจอ

โค้ดตั้งค่าให้ภาพส่วนหัวของเว็บอยู่ตรงกลาง -Blogger

รูปภาพ
 โค้ด ตั้งค่าให้ภาพส่วนหัวของเว็บอยู่ตรงกลาง Blogger เพิ่มโค้ดนี้   display: block; margin: 0 auto;    ที่ส่วน (ตามตัวอย่าง) .Header img, .Header #header-inner {   -moz-border-radius: $(header.border.radius);   -webkit-border-radius: $(header.border.radius);   -goog-ms-border-radius: $(header.border.radius);     border-radius: $(header.border.radius);    display: block; margin: 0 auto;  } ภาพเดิม จะเห็นว่าภาพอยู่ชิดด้านซ้ายของพื้นที่หน้าเว็บ ภาพหลังใส่โค้ดจัดกลาง ภาพถูกจัดให้อยู่กึ่งกลางหน้าเว็บ

การอัพเดทบลูสแต็กส์ Update Bluestacks

รูปภาพ
การอัพเดทบลูสแต็คส์ Update Bluestacks ในการใช้งานบลูสแต็กส์นั้น อย่าลืมตรวจสอบการอัพเดทแอพด้วย เพื่อให้การใช้งานเป็นไปอย่างราบรื่น  ในการอัพเดท ให้เราทำตามขั้นตอนดังนี้ 1. ที่หน้าแรกของบลูสแต็กส์ คลิกที่ ไอคอนเมนู (สัญลักษณ์สามขีดที่ด้านบนขวาของแอพ) 2. ที่หน้าแรกของบลูสแต็กส์ คลิกที่ ไอคอนเมนู  (สัญลักษณ์สามขีดที่ด้านบนขวาของแอพ)     จากนั้นเลือกคำสั่ง การตั้งค่า 3.  คลิกเมนู เกี่ยวกับ ที่อยู่ด้านล่างของที่หน้าต่าง การตั้งค่า      จากนั้นคลิกที่ ตรวจสอบการอัพเดท ที่มุมบนขวาของหน้าต่าง การตั้งค่า 4. หากขึ้นข้อความ ดาวน์โหลดอัพเดท แสดงว่าแอพมีการปรับปรุงแต่ยังไม่ได้อัพเดท ให้คลิกที่   ดาวน์โหลดอัพเดท ซึ่งจะทำการดาวน์โหลดไฟล์อัพเดทอัตโนมัติ แต่หากไม่ได้ขึ้นข้อความดาวน์โหลดอัพเดท แสดงว่าแอพของท่านเป็นเวอร์ชั่นล่าสุดแล้ว ปิดหน้าต่างการตั้งค่า แล้วใช้ บลูสแต็กส์ ได้ตามปกติ

วิธีนำเข้าไฟล์ในเครื่องคอมสู่แอพบลูสแต็คส์ -How to transfer media files from PC to BlueStacks

รูปภาพ
วิธีนำเข้าไฟล์ในเครื่องคอมสู่แอพบลูสแต็คส์ How to transfer media files from PC to BlueStacks ท่านที่มีแอพบลูสแต็คส์ในคอมแล้ว หากต้องการนำไฟล์ภาพมาใช้ในแอพที่อยู่ในบลูสแต็คส์  ท่านจะต้องทำการนำเข้าไฟล์ภาพมาสู่ในบลูสแต็คส์ก่อนจึงจะเรียกใช้ภาพนั้นได้ ในบทความนี้เราจะมาแนะนำขั้นตอนการนำเข้าไฟล์ในเครื่องคอมเข้าสู่บลูสแต็คส์กันค่ะ ขั้นตอนที่ 1. คลิกที่เมนูรูป บ้าน   บนแถบเมนูด้านบนของ แอพ  Bluestacks  จะเปิดหน้าต่าง รวม แอพ (library) ที่มีใน  Bluestacks  ในตอนนี้ ขั้นตอนที่  2. ให้คลิกที่โฟลเดอร์   System apps จะแสดงป๊อปอัพหน้าต่างของ   System apps  ใน  Bluestacks ขั้นตอนที่  3. คลิกที่โฟลเดอร์  การจัดการมีเดีย ( Media Manager) จะเปิดหน้าต่าง การจัดการมีเดีย ( Media Manager) ขั้นตอนที่  4.  คลิกที่เมนู อิมพอร์ทจากวินโดว์ (I