แปลง HTML เป็นธีม XML ของ Blogger บทช่วยสอน [4 ขั้นตอน]

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

 สร้างธีมหรือเทมเพลต Blogger/Blogspot ของคุณเองที่พัฒนาและออกแบบเอง และบทช่วยสอนนี้จะช่วยคุณในการแปลง HTML เป็น  เทมเพลต Blogger หรือธีม XML  ในวิธีที่ง่ายที่สุดเท่าที่เคยมีมา!

แปลง HTML เป็น Blogger XML

บทช่วยสอนนี้มีไว้สำหรับ:

  1. หากคุณต้องการติดตั้งหรือใช้เทมเพลต HTML ใน Blogger
  2. หากคุณต้องการติดตั้งหรือใช้เทมเพลต Blogger ที่คุณออกแบบและพัฒนาเอง

จะสร้างเทมเพลต Blogger ได้อย่างไร?

คุณกำลังรอแปลงเทมเพลต HTML ของคุณเป็นเทมเพลตหรือธีม XML ของ Blogger 

เป็นเรื่องที่น่าตื่นเต้นจริงๆ ที่จะมีเว็บไซต์หรือบล็อก Blogger ของคุณเองที่ได้รับการออกแบบและพัฒนาขึ้นมา 

ตอนที่ผมเผยแพร่บทช่วยสอนนี้ครั้งแรก ยังไม่มีแหล่งข้อมูลที่ครอบคลุมเพียงพอสำหรับการเรียนรู้การพัฒนาธีมของ Blogger ผมเรียนรู้ด้วยตัวเองจากธีมอย่างเป็นทางการของ Google 

หลังจากเรียนรู้ HTML, CSS, JavaScript แล้ว ผมก็พยายามเรียนรู้  วิธีการทำงานของโค้ด XML ของ Bloggerในตอนแรก ผมสามารถ  ปรับแต่งบางอย่างได้ เช่น เพิ่มวิดเจ็ตใหม่ เปลี่ยนโค้ดบางส่วน  เป็นต้น 

วันหนึ่งผมตัดสินใจเรียนรู้ธีม Blogger XML อย่างที่บอก ผมลองค้นหาวิธีแปลง HTML เป็น Blogger ใน Google ดู ผลปรากฏว่าผมหมดหวัง แต่ก็ไม่ได้ผิดหวังอะไรมาก 

ในที่สุดฉันก็ได้สร้างธีม Blogger ที่ฉันออกแบบและพัฒนาเองแล้ว! 

วิธีแปลง HTML เป็นเทมเพลตธีม XML ของ Blogger

นี่คือเรื่องสั้นของผมเกี่ยวกับการเรียนรู้ธีมของ Blogger จริงๆ แล้วผมอยากช่วยเหลือคนอื่นๆ ที่อยากรู้และเรียนรู้วิธีการแปลง HTML เป็น XML ของ Blogger อย่างง่ายดาย ซึ่งจริงๆ แล้วการแปลงนั้นง่ายกว่า  ระบบจัดการเนื้อหา (CMS)   อื่นๆ  อย่างเช่น  WordPress   ,  Drupal   ,  Magento    และอื่นๆ มาก

ก่อนที่จะเริ่มการแปลงธีมของ Blogger  คุณต้องรู้แนวคิดพื้นฐานต่อไปนี้ :

  • Blogger ไม่รองรับไฟล์หรือไดเรกทอรีมากกว่าหนึ่งไฟล์ ดังนั้นให้สร้างไฟล์ HTML ไฟล์เดียวที่ต้องใส่โค้ดทั้งหมด ซึ่งหมายความว่าคุณไม่สามารถใส่โค้ด CSS หรือ JavaScript ลงในโฟลเดอร์หรือไฟล์อื่นได้ คุณต้องใส่โค้ดทั้งหมดไว้ในไฟล์เดียว 
  • Blogger รองรับการแปลงไฟล์ XML เพียงไฟล์เดียว ดังนั้นคุณต้องเปลี่ยนชื่อไฟล์ HTML (นามสกุล .html) เป็น XML (นามสกุล .xml) แต่ไม่จำเป็นต้องมีความรู้เกี่ยวกับ XML ขั้นสูง คุณสามารถเริ่มต้นได้โดยไม่ต้องมีความรู้ใดๆ เกี่ยวกับมันเลย
  • อย่ากลัวที่จะเห็นว่าโค้ดเหล่านี้มีความซับซ้อนมากเหมือนในเทมเพลต Blogger อื่นๆ คุณจะดีใจที่รู้ว่าโค้ดส่วนใหญ่จะถูกสร้างโดย Blogger โดยอัตโนมัติหลังจากติดตั้งเทมเพลต

4 ขั้นตอนในการแปลงเทมเพลต HTML ให้เป็นธีม Blogger XML

ก่อนที่จะเริ่มการแปลง โปรดสำรองไฟล์ HTML ของคุณให้กับผู้อื่น

  1. เปิดตัวแก้ไขโค้ดของคุณ (ส่วนตัวฉันใช้ VS Code) แล้ววางโค้ด HTML ของคุณที่นี่ และบันทึกเป็น themename.xml (เปลี่ยนชื่อตามที่คุณต้องการแต่มีนามสกุล .xml)
  2. ตัดแท็กโค้ดทั้งหมด  <head> ไปไว้ด้านบนแล้ววางโค้ดต่อไปนี้
    <?xml เวอร์ชัน="1.0" การเข้ารหัส="UTF-8" ?>
<!DOCTYPE html><html class='no-js' xmlns='https://www.w3.org/1999/xhtml' xmlns:b='https://www.google.com/2005/gml/b' xmlns:data='https://www.google.com/2005/gml/data' xmlns:expr='https://www.google.com/2005/gml/expr' xmlns:og='https://ogp.me/ns#'> <!--<![endif]-->
<head prefix='og: https://ogp.me/ns# fb: https://ogp.me/ns/fb# บทความ: https://ogp.me/ns/article#'>
  3. ค้นหา  </head> แท็กและเพิ่มโค้ดต่อไปนี้ไว้ข้างหน้า
    <b:skin><![CDATA[
/**ใส่ CSS ของคุณทั้งหมดที่นี่**/
]]></b:ผิวหนัง>
  4. การปรับแต่งเนื้อหา:  คุณอาจเคยเห็นแดชบอร์ดเค้าโครงดังที่แสดงด้านล่าง มีส่วน Favicon, ส่วนหัว, หลัก, แถบด้านข้าง และส่วนท้าย จะแสดงหากเราสร้างขึ้น หากไม่สร้างจะไม่แสดง
    Favicon จะถูกสร้างโดยอัตโนมัติ ดังนั้นเราต้องสร้างส่วนอื่นๆ ขึ้นมาใหม่

    แต่เราต้องรู้ความ  แตกต่างระหว่าง section และ widget ใน Blogger section

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

    ต้องการทราบรายละเอียดเพิ่มเติมเกี่ยวกับ  ความแตกต่างระหว่าง section และ widget  โปรดอ่านบทความนี้

    และอ่านเพื่อทำความเข้าใจ  ความคล้ายคลึงกันระหว่าง section และ widgetวิธี
    การสร้าง section ใน Blogger ในการสร้าง section คุณต้องเขียนโค้ดต่อไปนี้
    <b:section></b:section>
    แต่การแสดง section ในเค้าโครงแดชบอร์ดของ Blogger นั้นไม่เพียงพอ คุณต้องกำหนดชื่อ, คลาสเฉพาะ, id และจำนวน widget ที่คุณต้องการเพิ่มในส่วนนี้ ในการทำเช่นนี้ คุณต้องเขียนพร้อมระบุแหล่งที่มาเพิ่มเติมดังที่แสดงด้านล่าง
    <b:section class='section_name' id='section_name' maxwidgets='1' showaddelement='yes'></b:section>

    คุณต้องใส่โค้ดส่วนลงใน div ที่ต้องการ แต่ให้ลบรูปภาพ แองเคอร์ ข้อความ และส่วนหัวออกทั้งหมดก่อนวาง

    เรียนรู้เพิ่มเติมเกี่ยวกับส่วน

    ส่วนหัว:  จำเป็นต้องเก็บส่วนหัวไว้ในธีม Blogger ชื่อบล็อก/โลโก้จะแสดงที่นี่ ดังนั้นให้สร้างส่วนหัวภายใน div โลโก้ของคุณ
    โดยใส่โค้ดต่อไปนี้ลงใน div โลโก้ของคุณ
    <b:section class='header' id='header' maxwidgets='1' showaddelement='no'><b:widget id='Header1' locked='true' title='' type='Header'></b:widget></b:section>
    หลัก: ตอนนี้หาพื้นที่ div ที่คุณต้องการแสดงโพสต์หรือบทความ
    จากนั้นใส่โค้ดต่อไปนี้ลงใน div บทความหรือ main
    <b:section class='main' id='main' showaddelement='yes'>
<b:widget id='Blog1' ล็อค='false' ชื่อเรื่อง='โพสต์บล็อก' ชนิด='บล็อก' เวอร์ชัน='1'>
</b:widget></b:section>

    เรียนรู้ว่า Widget คืออะไรและใช้งานอย่างไร

    แถบด้านข้าง:  วางโค้ดต่อไปนี้ไว้ภายใน div ของแถบด้านข้าง
    <b:section class='sidebar' id='sidebar' preferred='yes'></b:section>
    ส่วนท้าย: ส่วน  ท้ายของ Main และ Sidebar ก็ทำเช่นเดียวกันกับส่วนท้ายของส่วนท้าย ใส่โค้ดต่อไปนี้ลงใน div ส่วนท้ายของส่วนท้าย
    <b:section class='footer' id='footer' preferred='yes'></b:section>
    หากคุณต้องการเพิ่มส่วนเพิ่มเติม คุณสามารถเพิ่มได้

ตอนนี้คุณพร้อมที่จะติดตั้ง  ธีม Blogger แรกที่คุณพัฒนา ขึ้นเอง แล้ว อัปโหลดธีม XML ของคุณแล้วดูว่ามีอะไรเปลี่ยนแปลงบ้าง

Tags
siamwebtools.com

เขียนโดย siamwebtools.com

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

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

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