แปลงเทมเพลต Blogger ให้เป็นหน้า HTML ที่ว่างเปล่า

siamwebtools.com พฤศจิกายน 10, 2568

 แปลงโครงสร้าง XML ของ Blogger เป็นรูปแบบ HTML แบบคงที่ ลบวิดเจ็ตทั้งหมดออก และสร้างบล็อกใหม่ตั้งแต่ต้น

เปลี่ยนบล็อกเกอร์ให้เป็นหน้าว่างเทมเพลต BlogSpot ถูกเขียนโค้ดโดยใช้XHTML 1.0 Strict Document Typeซึ่งพัฒนาโดยWorld Wide Web Consortiumเมื่อวันที่ 26 มกราคม 2000 ซึ่งแตกต่างจาก PHP หรือ ASP.net กฎของ XML นั้นเข้มงวดและเข้มงวดมาก ข้อผิดพลาดเล็กน้อยในโค้ดจะทำให้เกิดข้อความแสดงข้อผิดพลาดที่น่าตกใจซึ่งคุณมักพบเห็นขณะแก้ไขเทมเพลตบล็อกของคุณ เพื่อที่จะเข้าใจวิธีการออกแบบและการเขียนโปรแกรมเทมเพลตเหล่านี้ คุณต้องเริ่มต้นใหม่ตั้งแต่ต้น ผมวางแผนที่จะเผยแพร่เทมเพลตมุมมองแบบกริดและแบบรายการ แต่ตารางงานที่แน่นหนาทำให้การดำเนินการนั้นยาก อย่างไรก็ตาม วันนี้ผมขอเผยแพร่โค้ดง่ายๆ ที่จะเปลี่ยน โครงสร้าง XML ของบล็อก ทดสอบ ของคุณ ให้เป็นเทมเพลตเปล่าๆ ที่ไม่มีวิดเจ็ต เทมเพลต Blogger ทั้งหมดประกอบด้วยวิดเจ็ตที่ควบคุมและจัดการโดยใช้คลาสและ ID ส่วนโพสต์บล็อกเองก็เป็นวิดเจ็ตขนาดใหญ่ที่สามารถจัดรูปแบบได้หลากหลายรูปแบบ เพื่อให้เข้าใจง่ายขึ้น วันนี้ผมจะแบ่งปันวิธีการสร้างหน้า HTML เปล่าจากเทมเพลต Blogger และเริ่มเพิ่มวิดเจ็ตเข้าไปเพื่อทดลองวิธีใหม่ๆ ที่น่าตื่นเต้นในการปรับแต่งมุมมองบล็อก

การสาธิตสด

ตรวจสอบ หน้า สาธิตแท็บ Colouful ด้วย เมนูถูกเพิ่มลงในหน้า HTML เปล่าที่สร้างขึ้นตามวิธีการในปัจจุบัน

ทำอย่างไร?

หน้า HTML แบบง่ายจะมีคำอธิบายประเภทเอกสารตามด้วยแท็ก HTML, HEAD และ BODY ตามลำดับ เมตาแท็ก, JavaScript และสไตล์ชีตจะถูกเพิ่มไว้ภายในส่วนหัวเสมอ และส่วน DIV หรือเนื้อหาจะถูกล้อมรอบไว้ภายในส่วนเนื้อหา ใน Blogger เนื่องจากเทมเพลตถูกเขียนโปรแกรมโดยอัตโนมัติผ่านแท็ ก b:section แบบ ไดนามิก ดังนั้นเราจึงต้องลบส่วนดังกล่าวทั้งหมดออกก่อน และเหลือไว้เพียงส่วนเดียว เนื่องจากแท็กมาร์กอัป XML จำเป็นต้องมีอย่างน้อยหนึ่งส่วนในส่วนนั้น เพื่อลดความซับซ้อนของกระบวนการ ผมจึงได้สร้าง " ธีม HTML แบบคงที่ " ขึ้นมา ซึ่งเหมาะสำหรับคุณ คุณสามารถใช้ธีมนี้เพื่อทดลองใช้เครื่องมือใหม่ๆ ที่น่าตื่นเต้น ปรับแต่ง CSS3 ได้อย่างน่าสนใจ และฝึกฝนทักษะการออกแบบของคุณ คุณจะชอบการใช้งานธีมนี้ เพราะธีมนี้มอบประสบการณ์การใช้งานที่น่าพึงพอใจมากกว่าMBT HTML Editor

ขั้นตอนการติดตั้งธีม:

  1. ไปที่แผงควบคุม Blogger
  2. สร้างบล็อกทดสอบใหม่
  3. ใส่ชื่อเรื่องและที่อยู่
  4. เลือก เทมเพลตแบบ เรียบง่ายไม่ใช่มุมมองแบบไดนามิก
  5. ถัดไปไปที่เทมเพลต > แก้ไข HTML > ดำเนินการต่อ
  6. แทนที่โค้ดทั้งหมดภายในตัวแก้ไขด้วยโค้ดต่อไปนี้:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
  <head>
    <meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>
    <b:if cond='data:blog.isMobile'>
      <meta เนื้อหา='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>
    <b:else/>
      <meta content='width=1100' name='viewport'/>
    </b:if>
    <b:include data='blog' name='all-head-content'/>
    <title><data:blog.pageTitle/></title>
   <b:skin ><![CDATA[ /*
-----------------------------------------------   //////////////////////
ธีม   HTML แบบ
คง ที่
//// ...   ​  ​  ​    padding: 0; } ]]></b:skin>   </head> <body>   <b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='no'> <b:widget id='Navbar1' locked='true' title='Navbar' type='Navbar'/> </b:section> <div style='margin-top:400px; '> <!--กรุณาเก็บเครดิตไว้--> <center><p> <a href=' http://www.mybloggertricks.com' > เคล็ดลับ Blogger ของฉัน </a>© 2012.</p></center> </div> </body> </html>












  

 








 

    7. คลิกบันทึก และเมื่อได้รับคำเตือนเกี่ยวกับข้อผิดพลาดต่อไปนี้:

คำเตือน: เทมเพลตใหม่ของคุณไม่มีวิดเจ็ตต่อไปนี้:                  BlogArchive1 Profile1 Attribution1 Header1 Blog1

เพียงคลิกที่ลบวิดเจ็ตแล้วคุณก็เสร็จเรียบร้อย!

ประเด็นสำคัญ:
  • ขณะสร้างวิดเจ็ต คุณจะเพิ่ม JavaScript ไว้ด้านล่าง<head>หรือด้านบน</head>
  • คุณจะเพิ่มโค้ด CSS ไว้ภายในสองส่วนที่เน้นสีเหลือง
  • และคุณจะเพิ่มข้อมูลวิดเจ็ตหรือโค้ด HTML ลงในแท็ก body สีเขียวสองอัน

อะไรที่คุณไม่สามารถทำ?

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

สร้างวิดเจ็ตโพสต์บล็อก

สร้างวิดเจ็ตโพสต์บล็อกตอนนี้เพื่อให้คุณได้ไอเดียว่าเทมเพลตบล็อกเกอร์สามารถออกแบบได้ง่ายตั้งแต่เริ่มต้น เพียงเพิ่มโค้ดต่อไปนี้ไว้เหนือ</body>เพื่อทำให้วิดเจ็ตโพสต์ทำงานในธีม HTML แบบคงที่ของคุณ



<b:section class='main' id='main' showaddelement='yes'>
<b:widget id='Blog1' locked='true' title='โพสต์บล็อก' type='บล็อก'/>
</b:section>
บันทึกเทมเพลตของคุณ แล้วกลับไปที่หน้าเลย์เอาต์อีกครั้ง คุณจะเห็นวิดเจ็ตโพสต์ และตอนนี้คุณสามารถแก้ไขตัวเลือกการจัดรูปแบบได้อย่างง่ายดาย ไปสร้างโพสต์ใหม่แล้วเยี่ยมชมบล็อกของคุณเพื่อดูว่าใช้งานได้ดีหรือไม่ขอแสดงความยินดี!คุณได้สร้างวิดเจ็ตบล็อกเกอร์ตัวแรกของคุณแล้ว ลองเล่นกับวิดเจ็ตใหม่ๆ ที่น่าตื่นเต้นนี้ แล้วค้นพบว่าคุณจะสร้างสรรค์ได้มากแค่ไหน
เพื่อทำความเข้าใจการเขียนโปรแกรมบล็อกของ Google คุณจะต้องทำความคุ้นเคยกับเค้าโครงมาตรฐานและแท็กวิดเจ็ต ทีม Blogger เป็นผู้จัดทำข้อมูลอ้างอิงที่ดีที่สุด โปรดไปที่ลิงก์ต่อไปนี้เพื่อทำความเข้าใจพื้นฐานสำคัญของแท็กข้อมูล
siamwebtools.com

เขียนโดย siamwebtools.com

I research different ways to make money online and collect useful and relevant online tools for making money online.

แสดงความคิดเห็น

0 ความคิดเห็น