เทมเพลต Blogger อาจยุ่งยากมากหากมีโค้ดมากมาย หากคุณกำลังพยายามสร้างเทมเพลต Blogger ขึ้นมาใหม่ สิ่งแรกที่คุณต้องการคือหน้า HTML เปล่าๆ ซึ่งนั่นคือสิ่งที่เราจะทำในวันนี้
เกณฑ์
Blogger จะไม่อนุญาตให้คุณเพิ่มโค้ดต่อไปนี้เป็นเทมเพลต:
<html>
<head>
<title>My Awesome Blank Blog</title>
</head>
<body>
</body>
</html>พวกเขาจะพิมพ์ข้อผิดพลาดออกมาหากคุณพยายามบันทึกเทมเพลต มีเกณฑ์บางประการในการสร้างเทมเพลตสำหรับบล็อก Blogger:
- ต้องมีสกิน (<b:skin></b:skin>) ในเทมเพลต
- เทมเพลตจะต้องมีแท็ก b:section อย่างน้อยหนึ่งรายการ
- แต่ละส่วนควรมีรหัสเฉพาะที่ไม่ซ้ำกัน
- ไวยากรณ์ที่ถูกต้อง
หากตรงตามเกณฑ์ข้างต้น Blogger จะไม่แสดงข้อผิดพลาดใดๆ เมื่อบันทึกเทมเพลต ในการสร้างเทมเพลต HTML เปล่า เราจะตรวจสอบให้แน่ใจว่าตรงตามเกณฑ์เหล่านี้
เนื้อหาของเทมเพลต Blogger Blank
ดังที่เราได้กล่าวไปแล้ว เทมเพลต Blogger ควรตรงตามเกณฑ์ของ Blogger เทมเพลต Blogger เปล่าควรประกอบด้วยสิ่งต่อไปนี้:
- แท็กหน้า HTML พื้นฐาน (html, head, body) และส่วนปิดท้าย
- แท็ก<b:skin></b:skin>เพียงแท็กเดียว
- ต้องมีอย่างน้อย แท็ก<b:section></b:section>
สร้างเทมเพลต
ตรวจสอบให้แน่ใจว่าบล็อกของคุณใช้ Simple Template หากไม่ใช่ ให้นำ Simple Template มาใช้กับบล็อกของคุณ
ไปที่ **บล็อก Blogger** ของคุณ -> เทมเพลตแล้วคลิก ปุ่ม "แก้ไข HTML"ลบเนื้อหาของเทมเพลตออก
ตอนนี้เราจะเพิ่มหน้า HTML พื้นฐานลงในเทมเพลต:
<?xml version="1.0" encoding="UTF-8" ?>
<html 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>
</head>
<body>
</body>
</html>ศีรษะ
เนื้อหาของ แท็ก </head **>** คือ ชื่อเรื่อง สกิน และองค์ประกอบอื่นๆ เราควรเพิ่มโค้ดปกติที่พบในเทมเพลต Blogger ก่อน:
<meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>
<b:if cond='data:blog.isMobile'>
<meta content='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>เพิ่มสกินด้วย CSS พื้นฐานที่สามารถเปลี่ยนแปลงได้โดยใช้ Blogger's Template Designer:
<b:skin>
<![CDATA[/*
body {
font: $(body.font);
color: $(body.text.color);
background: $(body.background);
padding: 0 $(content.shadow.spread) $(content.shadow.spread) $(content.shadow.spread);
$(body.background.override) margin: 0;
padding: 0;
}
]]>
</b:skin>มีสไตล์อื่นๆ อีกมากมายที่สามารถแทรกลงใน <b:skin>ได้ แต่ที่นี่จะกล่าวถึงเฉพาะสไตล์ของ body เท่านั้น การเพิ่มกฎสไตล์เข้าไปจะช่วยให้คุณอัปเดตสี พื้นหลัง ฯลฯ จาก Template Designer ได้อย่างง่ายดาย
มี ไฟล์ CSS เพิ่มเติม ที่ Blogger โหลดก่อน <b:skin>หากคุณต้องการปิดใช้งาน โปรดดู โพส ต์นี้
ร่างกาย
Blogger ต้องมีองค์ประกอบ **<b:section> ** ในเทมเพลต ดังนั้นเราควรเพิ่มมันเข้าไปในส่วนเนื้อหา
<b:section id='main' showaddelement='yes'/>ส่วนนี้เป็นส่วนหลักของบล็อกที่เราสามารถเพิ่มแกดเจ็ตเข้าไปได้
รหัสทั้งหมด
และโค้ดเทมเพลตทั้งหมดจะเป็น:
<?xml version="1.0" encoding="UTF-8" ?>
<html 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 content='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[/*
body {
font: $(body.font);
color: $(body.text.color);
background: $(body.background);
padding: 0 $(content.shadow.spread) $(content.shadow.spread) $(content.shadow.spread);
$(body.background.override) margin: 0;
padding: 0;
}
]]>
</b:skin>
</head>
<body>
<b:section class='main' id='main' showaddelement='yes'/>
<!-- Please Keep The Credits -->
<center><a href="//subinsb.com/make-a-blank-blogger-template">Blank Template By subinsb.com</a></center>
</body>
</html>การเพิ่มโค้ดเพิ่มเติม
- เพิ่มโค้ด CSS เพิ่มเติมภายใน <b:skin></b:skin>
- เพิ่มโค้ด JavaScript ก่อน หรือหลังจาก
- เพิ่มโค้ด HTML (วิดเจ็ต, โค้ด) ลงไปข้าง ใน
- คุณสามารถทำทุกสิ่งในเทมเพลตนี้ได้เช่นเดียวกับที่ทำกับ หน้าHTML
หากคุณต้องการแสดงโพสต์ ให้เพิ่มโค้ดต่อไปนี้ภายใน <b:section></b:section>ในเนื้อหา:
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>ตัวอย่าง :
<b:section class='main' id='main' showaddelement='yes'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>บันทึกเทมเพลตของคุณแล้วดูบล็อกของคุณ ตอนนี้คุณก็จะมีบล็อกเปล่าๆ ธรรมดาแล้ว
0 ความคิดเห็น