โค้ดตั้งค่าให้ภาพส่วนหัวของเว็บอยู่ตรงกลาง -Blogger
บทความ
Template ใน Blogger.com มีแบบไหนให้เลือกบ้าง
หลายท่านอยากทราบข้อมูลเบื้องต้นว่าถ้าจะทำเว็บไซต์ด้วย Blogger.com มีแบบเว็บสวย ๆ ไหมนะ แต่การจะดูแบบตัวอย่างเว็บหรือที่เรียกว่า Template นั้น ท่านต้องเข้าสู่ระบบของ Blogger.com ก่อน ซึ่งหลายท่านต้องการข้อมูลเบื้องต้นก่อนการเข้าเป็นสมาชิกของ Blogger.com วันนี้เราได้รวบรวมภาพตัวอย่าง Template ที่มีใน Blogger.com มาให้ดูกันค่ะ ซึ่งนอกจาก Template ใน Blogger.com เองแล้ว ท่านยังสามารถพิมพ์ค้นหาใน Google ซึ่งมีหลายเว็บไซต์ให้ดาวน์โหลด Template มาใช้ได้ มีทั้งฟรีและเสียเงินค่ะ แต่ตัวอย่างที่เรามาให้ชมในนี้เป็นแบบฟรีทั้งหมดค่ะ เพราะมาจากใน Blogger.com ค่ะ แต่ถ้าอยากดูตัวอย่างที่เป็นภาพใหญ่ต้องเข้าระบบไปดูใน Blogger.com ได้เลยค่ะ ภาพตัวอย่างหน้าเว็บไซต์ Template Blog From Blogger.com Template From Blogger.com มีตามภาพด้านบนค่ะ แต่ทุก Template สามารถปรับแต่งใหม่ได้ หรือจะออกแบบ Template เองก็ได้ หรือดาวน์โหลด Template จากเว็บไซต์อื่นที่มีแจก มาใส่ก็ได้ค่ะ และถ้าต้องการที่ปรึกษาในการสร้างสรรค์เว็บไซต์สำเร็จรูปจาก Blogger.com สามารถติดต่อกับฝ่ายบริการของ iEasyCom ได้นะคะ ติดต่อได้ที่ https://ww
ดึงหน้าเว็บไซต์อื่นมาไว้ที่หน้าเว็บเราเอง .. ยังไง
เราสามารถดึงหน้าเว็บไซต์มาแสดงบนหน้าเว็บของเรา โดยใช้ Code <iframe height="1080" scrolling="no" src=" url " width="100%"> </iframe> หรืออีก Code หากเป็น วิดีโอ <iframe allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" frameborder="0" height="315" src=" url " title=" " width="560"></iframe>
วิธีแสดงกล่องข้อความโค้ด ( code textbox) ใน blogger
วิธีแสดง code ในหน้าเว็บ หากเราต้องการแสดง code ลงในเว็บไซต์ ต้องใส่แท็ก <pre> และ <code> แท็ก <code> ใช้ระบุว่าเป็น code โดยปกติ จะรวมแท็กนี้ไว้ในแท็ก <pre> เพื่อบอก Browser และ Google ว่า code ในแท็กนี้เป็น code ที่ต้องการแสดง ไม่ใช่ให้แสดงผล รูปแบบ การแสดงอักขระต้องห้ามใน code อักขระ < > ใน code อาจไม่แสดงแม้จะอยู่ในแท็กด้านบน เนื่องจากเป็นอักขระตัองห้ามของ HTML ในกรณีนี้ให้แปลง HTML tags เป็น HTML entities โดยแทนที่ < ด้วย < และ > ด้วย > ตัวอย่าง code ที่อยากแสดง ตัวอย่าง code ที่เขียนเพื่อแสดง code การแสดง Code อยู่ในกล่องหรือเฟรม กรณีต้องการแสดง Code อยู่ในกล่องหรือเฟรม สามารถเพิ่ม css จัดรูปแบบได้ ตัวอย่าง ใส่กล่อง code ลงใน blogger ใช้โค้ด แบบที่ 1 ใช้ code แบบที่ 2 ถ้ามีวิธีที่น่าสนใจ เราจะนำมาเสนอเพิ่มเติมต่อไป หากสนใจการใช้ code ในการทำเว็บของท่าน ต้องการศึกษาเพิ่มเติม สามารถติดต่อครูน้อย โทร/ไลน์ 0843620912 เว็บไซต์ https://www.cnxservice.app/
ทำไอค่อนติดต่อลอยด้านข้าง ด้วยภาพ
โค้ดไอค่อนข้อมูลติดต่อ <style> .icon-bar { position: fixed; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .icon-bar a { display: block; text-align: center; padding: 6px 5px 1px 5px; transition: all 0.3s ease; color: white; font-size: 20px; } .icon-bar a:hover { background-color: #522; } .facebook { background: #3B5998; color: white; } .twitter { background: #55ACEE; color: white; } .google { background: #dd4b39; color: white; } .linkedin { background: #007bb5; color: white; } .youtube { background: #bb0000; color: white; } .image-button{ border: none; color: white; text-align: center; text-decoration: none; display: block; font-size: 8px; font-weight: bold; cursor: pointer; } .image-button img { height: 40px; border: none; } .content { margin-left: 75px; font-size: 30px; } </style> <body> <div cla
แก้ไขคำเตือนเมื่อปรับ Template Blogger
1. Error: There should be one and only one skin in the theme, and we found: <b>0</b> Template Code Problem เพิ่ม <b:skin> </b:skin> ก่อน body 2. Error: We did not find any section in your template. A template must have at least one b:section tag I Make This Template Before Blogger Delete The Old Dashboard Interface, So I’m Sorry If the Code not Compatible with the New Dashboard Interface, for Solution... 1. Open “Supersized Under Construction.xml” in Notepad (Or) Adobe Dreamweaver or More, 2. Find this code… </body> 3. Add this code above it… <b:section id='fixelements' showaddelement='no'/> 4. Save Template.
css เรียงภาพ
ตัวอย่างโค้ด ตัวอย่างที่ได้ (2ภาพสีเหลืองด้านล่างของภาพ) ภาพจากเว็บ เรียนพิมพ์สัมผัสกับครูน้อย, UP SKILL TOUCH TYPING, FREE ONLINE LEARNING. https://upskilltouchtyping.blogspot.com/
อ้างอิงไฟล์ภาพ html
< img src =" url " alt =" alternatetext " > กรณีอ้างอิงจากในโฟลเดอร์เดียวกัน <img src="touchtype1text.jpg" alt="UpSkill by Kru Noi" width="80%" height="auto"> กรณีอ้างอิงจากที่อยู่เว็บไซต์ < img src =" url " alt =" alternatetext " >