ปรับแต่งส่วนหัวของบล็อก Blogger.com ของคุณ

เมษายน 26, 2024

ในบทช่วยสอนล่าสุดเราได้ปรับแต่งส่วนลิงก์สำหรับบล็อกเกอร์^TM เว็บบล็อก ตอนนี้เราจะปรับแต่งส่วนหัวที่ด้านบนของบล็อก ส่วนหัวมีชื่อและคำอธิบายของบล็อกของคุณ เรากำลังจะเปลี่ยนแบบอักษรหรือแบบอักษรสำหรับข้อความและเพิ่มพื้นหลังสี

ในบทช่วยสอนสุดท้ายเราจะทำการปรับปรุงเหล่านี้โดยการเปลี่ยนโค้ด HTML ของเทมเพลตสองสามบรรทัด คลิกที่แท็บเทมเพลตในเมนูที่ด้านบนของหน้าซึ่งจะพาคุณไปยังส่วนแก้ไขเทมเพลตปัจจุบัน คุณจะพบรหัส HTML สำหรับเทมเพลตในช่องด้านล่าง เราจะทำการเปลี่ยนแปลงบางอย่างกับโค้ดสไตล์ CSS (หากต้องการข้อมูลเพิ่มเติมเกี่ยวกับ Cascading Style Sheets ให้ทำตามลิงค์ด้านล่าง) เลื่อนรหัสลงจนกว่าจะถึงส่วน Header ภายใน CSS style tag อย่างที่คุณเห็นแท็กสไตล์ยาวมากและส่วนหัวของแท็กสไตล์มีหกส่วน

@ สื่อทั้งหมด
@ สื่อแบบพกพา
#ชื่อบล็อก
# บล็อกชื่อ
# blog-title a: hover
#description

ส่วนแรกของรหัส (@media ทั้งหมด) ควบคุมคุณสมบัติของส่วนหัวรวมถึงความกว้างระยะขอบและขนาดเส้นขอบ ส่วนที่สอง (@media handheld) สืบทอดคุณสมบัติเหล่านี้จากส่วนแรกและเปลี่ยนความกว้างของ Header เป็น 90 เปอร์เซ็นต์สำหรับจอภาพมือถือ เนื่องจากเราต้องการให้สีพื้นหลังใหม่ถูกใช้ในทั้งสองกรณีเราจะเพิ่มบรรทัดของรหัสสำหรับสีพื้นหลังในส่วนแรก (@ สื่อทั้งหมด) บรรทัดใหม่ของรหัสนี้เป็นตัวหนาด้านล่าง ในตัวอย่างด้านล่างเราใช้สีเทาอ่อน แต่อย่าลังเลที่จะใช้สีใดก็ได้ที่คุณต้องการ

@ สื่อทั้งหมด {
#หัวข้อ {
สีพื้นหลัง: # EFE3EF;
...
ต่อไปเราจะเปลี่ยนแบบอักษรสำหรับชื่อเรื่องเป็นแบบอักษรสไตล์แคชชวลที่เป็นที่นิยมที่เรียกว่า Comic Sans MS แน่นอนคุณมีอิสระที่จะใช้แบบอักษรใด ๆ ที่คุณชอบ อีกสามส่วนถัดไปของโค้ด CSS ของเทมเพลต (# blog-title, # blog-title a, # blog-title a: hover) ควบคุมลักษณะเฉพาะสำหรับชื่อเรื่องของบล็อก ส่วนแรกจะควบคุมคุณสมบัติทั่วไปและอีกสองส่วนจะควบคุมลักษณะของข้อความเมื่อทำงานเป็นไฮเปอร์ลิงก์ หากต้องการตั้งค่าแบบอักษรหรือแบบอักษรของชื่อเรื่องสำหรับทุกกรณีเราจะเพิ่มโค้ด CSS สำหรับตระกูลแบบอักษรเป็นส่วนแรก (# blog-title) เนื่องจากชื่อแบบอักษรของเรามีช่องว่างจึงจำเป็นต้องอยู่ในเครื่องหมายคำพูด (“ comic sans ms”)

#ชื่อบล็อก {
ตระกูลฟอนต์: "comic sans ms";
...
สุดท้ายเราจะทำงานกับโค้ด CSS สำหรับคำอธิบายบล็อกของคุณ (#description) นี่คือส่วนสุดท้ายของหกต้นฉบับ ดังที่คุณเห็นด้านล่างรหัส CSS ทั้งหมดที่ควบคุมคุณสมบัติแบบอักษรสำหรับข้อความคำอธิบายจะแสดงรายการด้วยกันในหนึ่งบรรทัด สิ่งที่เราต้องทำคือเพิ่ม“ comic sans ms” ที่ด้านหน้าของรายการฟอนต์ซึ่งจะทำให้ Comic Sans MS เป็นฟอนต์เริ่มต้นสำหรับข้อความคำอธิบาย

#description {
...
ตัวอักษร: 78% / 1.4em "การ์ตูน sans ms", "Trebuchet MS", Trebuchet, Arial, Verdana, Sans-serif;
...
}

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

สกรีนช็อตที่พิมพ์ซ้ำโดยได้รับอนุญาตจาก Google Inc. Google^TM, Blogger^TM และ BlogSpot^TM เป็นเครื่องหมายการค้าจดทะเบียนหรือเครื่องหมายการค้าของ Google Inc. ในสหรัฐอเมริกาและ / หรือประเทศอื่น ๆ

ปรับแต่งส่วนหัวของบล็อก Blogger.com ของคุณเปลี่ยนชื่อและคำอธิบายของบล็อก Blogger ของคุณเปลี่ยนแบบอักษรสำหรับเทมเพลตบล็อกเกอร์เพิ่มพื้นหลังสีลงในเทมเพลตบล็อกเกอร์เปลี่ยนรหัส CSS สำหรับเทมเพลตบล็อกเพิ่มโค้ด CSS ไปที่เทมเพลตบล็อกเกอร์ แบบอักษรของแม่แบบ Blogger, แม่แบบของ Blogger แบบอักษรตระกูล, แท็กสไตล์ CSS

บทความก่อนหน้านี้

บทความถัดไป

บทความที่เกี่ยวข้อง

คอมพิวเตอร์

การสร้างแท็กของขวัญโดยใช้ Word

เมษายน 2024

แม่แบบนามบัตรที่ฉันใช้สำหรับโครงการนี้มาจาก Avery หลังจากดาวน์โหลดไฟล์จะเปิดขึ้นแสดงเลย์เอาต์ของนามบัตรสิบใบบนหน้า แท็บเทมเพลต Avery ปรากฏขึ้นหน้าแท็บหน้าแรกที่ด้านบนของหน้า แท็บเทมเพลต Avery...

คอมพิวเตอร์

เคล็ดลับความปลอดภัยการปลอมแปลง

เมษายน 2024

ฉันเพิ่งได้รับอีเมลจากเพื่อนที่ไม่ค่อยติดต่อฉันทางอีเมล อีเมลไม่มีหัวเรื่องและมีลิงค์อยู่ภายในเท่านั้น: //projects.***********************prises.htm?nice.dual ...