การสร้างรหัสสี (Making Color Code)

รหัสสี(Color Code) เกิดจากการผสมกันของ 3 แม่สีคือ แดง(Red), เขียว(Green) และน้ำเงิน(Blue) หรือที่นิยมเรียกว่า RGB โดยปรกติรหัสสีที่ใช้ในการเขียนโปรแกรมจะมีทั้งหมด 6 ตัวอักษรและต้องขึ้นต้นด้วยเครื่องหมาย # เสมอ ยกตัวอย่างเช่น aabbcc โดยที่ aa แทนด้วยรหัสสีแดง bb แทนด้วยรหัสสีเขียว และสุดท้าย cc แทนด้วยรหัสสีน้ำเงิน บางครั้งอาจใช้แค่ 3 ตัวอักษร คือ abc ก็ได้ แต่ความละเอียดของการผสมสีจะมีน้อยกว่า ซึ่งตัวอักษรแต่ละตัว แท้จริงแล้วก็คือค่าตัวเลขฐานสิบหก เริ่มต้นจาก 0 1 2 3 4 5 6 7 8 9 a b c d e f เนื่องจากว่าเราไม่สามารถที่จะเขียนเป็น 10 11 12 13 14 15 ได้ก็เลยใช้เป็นอักษรภาษาอังกฤษแทน

การใช้ 3 ตัวอักษรดังตัวอย่าง abc แต่ละตัวจะมีค่าได้ตั้งแต่ 0 - 15 เพราะฉะนั้นจำนวนสีที่เราจะได้ก็คือ 16 x 16 x 16 = 4,096 สี ถ้าเป็น 6 ตัวอักษรก็จะได้เป็น 16 x 16 x 16 x 16 x 16 x 16 = 16,777,216 สี

การตั้งค่าแต่ละสีมีหลักการคือ ถ้าตัวเลขมากก็จะให้สีนั้นมาก เช่น ถ้าต้องการสีแดงเต็มกำลังก็ให้ใช้รหัส #ff0000 หรือจะใช้ 3 ตัวอักษร คือ #f00 ก็จะได้ผลที่ไม่แตกต่างกัน หรือถ้าต้องการสีเหลืองเต็มกำลัง ก็ให้ผสมระหว่างแม่สีแดงกับเขียน ก็จะได้รหัส #ffff00 หรือ #ff0

สำหรับรหัสสีสามารถคลิ๊กดูได้ ที่นี่

การลบจำนวนบทความออกจากป้ายกำกับ

เราสามารถวางป้ายกำกับ (Label) ไว้ที่หน้าหลักของบล๊อกเราได้โดยเข้าไปที่ รูปแบบ | องค์ประกอบหน้า แล้วคลิ๊กไปที่เพิ่ม Gadget เลือก พื้นฐาน | ป้ายกำกับ แล้ววางไว้ในตำแหน่งที่ต้องการ แต่บางครั้งเราอาจไม่ต้องการให้แสดงจำนวนบทความของแต่ละกลุ่มของบทความ หรืออาจจะไม่ชอบรูปแบบที่มีอยู่

ถ้าต้องการที่จะลบหรือแก้ไขจำนวนบทความในรูปแบบที่เราต้องการก็ทำได้ง่าย ๆ อีกเช่นเคย ดังนี้

• ขั้นแรกก็ต้องทำการขยายแม่แบบเครื่องมือก่อนน๊ะครับ
• ค้นหาคำว่า (<data:label.count>) ดูได้จากรูปแบบ Code ข้างล่างนี้

<b:widget id='Label1' locked='false' title='' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a expr:href='data:label.url'><data:label.name/></a>
</b:if>
(<data:label.count/>)
</li>
</b:loop>
</ul>

หรือ
<div class='widget-content'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'>
<data:label.name/>
</span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'>
<data:label.name/>
</a>
</b:if>
<span dir='ltr'>(<data:label.count/>)</span>
</li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
วิธีการแก้ไข

1. ถ้าต้องการลบจำนวนตัวเลขของป้ายกำกับออกก็ให้ลบบรรทัดสีแดงทิ้งไปเลย
2. ถ้าต้องการรูปแบบเปลี่ยนจาก (...) เป็น [...] ก็ให้แก้เป็น [<data:label.count/>]
3. หรือถ้าต้องการแก้เป็น -... ก็ให้แก้เป็น -<data:label.count/>
4. หรือถ้าเราจะใส่เป็นคำว่า (เชิญคลิ๊ก) ก็ให้แก้เป็น (เชิญคลิ๊ก)

สรุปง่าย ๆ ก็คือ ถ้าต้องการแก้ให้เป็นอะไรก็เปลี่ยนเป็นอย่างนั้น

การแสดงบทความล่าสุดในหน้าแรก (Recent Post)

การแสดงบทความล่าสุดในหน้าแรก (Recent Post) สามารถทำได้ง่าย ๆ ด้วย Gaget ที่ทาง Blogger จัดเตรียมไว้ให้ ซึ่งจะอยู่ที่ รูปแบบ | องค์ประกอบของหน้า แล้วเลือก "เพิ่ม Gaget" จะมีหน้าต่างใหม่ปรากฎขึ้น แล้วเลือกไปที่เมนู เรื่องที่แนะนำก็จะเห็น Gadget Recent Post อยู่เป็นอันดับแรกดังรูป

หลังจากเราเลือกการใช้งาน Recent Post แล้ว เราจะทำการกำหนดค่าดังนี้


หัวข้อ เป็นแถบชื่อที่ใช้แสดง ดังตัวอย่างที่ผมใช้ คือ ชื่อว่า "บทความล่าสุด"
Number of Posts to Display คือ จำนวนของบทความที่ต้องการให้แสดง ในที่นี้ผมเลือก 3 บทความตามตำแหน่งหมายเลข 1
Display Post Date? ต้องการให้แสดงวันที่ของบทความด้วยหรือเปล่า
Show a Summary of Your Blog Posts? ต้องการให้แสดงบทความย่อด้วยหรือเปล่า
Summary Length การตั้งค่าจำนวนตัวอักษรที่ต้องการแสดง

การใช้งานส่วนตัวของผม ผมจะให้แสดงเฉพาะจำนวนของบทความหรือเฉพาะหัวข้อของบทความเท่านั้น เพราะฉะนั้นผมก็จะไม่เลือกหมายเลข 2 กับ 3 ดูตัวอย่างการแสดงผลได้ที่ทางด้านขวามือของบล๊อกนี้ได้ครับ ยังไงก็ลองเล่นกันดู ง่ายนิดเดียว

การตั้งค่าบทความบล๊อก (Configure Blog Posts)

การตั้งค่าบทความบล๊อก (Configure Blog Posts) สามารถทำได้โดยไปที่แถบเมนู รูปแบบ | องค์ประกอบของหน้า แล้วคลิ๊กไปที่ "แก้ไข" บทความบล๊อก หลังจากนั้นจะปรากฎหน้าต่างใหม่ขึ้นมาดังนี้

ตัวเลือกของหน้าหลัก (Number of posts on main page) สามารถเลือกตั้งค่าได้เป็นจำนวนบทความหรือจำนวนวันของบทความ ซึ่งปกติเราจะตั้งเป็นจำนวนบทความมากกว่า เพราะจะได้ผลการแสดงที่หน้าหลักคงที่ ถ้าหากเลือกเป็นจำนวนวัน วันไหนที่เราสร้างบทความใหม่หลาย ๆ บทความก็จะทำให้หน้าหลักยาวมากและเสียเวลาในการ Load ค่อนข้างเยอะ

ตัวเลือกของหน้าแสดงบทความ (Post Page Options) จะเป็นการเลือกใช้งานในส่วนของวันที่, ชื่อผู้เขียนบทความ, เวลาในการเขียนบทความ, ความคิดเห็น, การทำลิงค์ไปยังบทความนี้, ป้ายกำกับ, แสดงการแก้ไขอย่างรวดเร็ว, ปฎิกริยา และแสดงลิงค์การส่งบทความทางอีเมล ซึ่งตัวเลือกทั้งหมดนี้ยสามารถวางไว้ด้านบนหรือล่างบทความก็ได้ยกเว้นวันที่

การเลือกติดโฆษณาระหว่างบทความ (Google Adsense) จะต้องตั้งค่าภาษาให้เป็นภาษาอังกฤษก่อน โดยไปที่ การตั้งค่า | การจัดรูปแบบ เลือก "ภาษา" เป็น อังกฤษ สำหรับผมเลือกเป็น อังกฤษ(สหรัฐอเมริกา) เพราะเป็นถิ่นกำเนิดของเจ้าของ เมื่อเลือกภาษาเรียบร้อยแล้ว ให้เรากลับไปที่การตั้งค่าบทความบล๊อกอีกครั้งหนึ่ง ตอนนี้จะเป็นตัวเลือกใหม่ขึ้นมาถ้ดจาก "แสดงลิงก์ส่งบทความทางอีเมล" ให้เลือกติ๊กไปที่ "แสดงโฆษณาระหว่างบทความ" แต่ต้องมี Account ของ Adsense ก่อนน๊ะครับจึงสามารถใช้งานได้ เราสามารถเลือกการแสดงโฆษณาในแต่ละช่วงของบทความได้ และรูปแบบโฆษณาก็มีให้เลือกหลากหลายตามแบบฉบับของ Google Adsense นั่นแหละครับ

หลังจากที่เราเลือกภาษาเป็นภาษาอังกฤษ และติดตั้งโฆษณาเรียบร้อยแล้ว ให้เราเปลี่ยนภาษากลับมาเป็นภาษาไทยได้ โฆษณาก็จะยังอยู่เหมือนเดิมครับ

การป้องกันการคัดลอกบทความ (Copy & Paste)

การคัดลอกบทความถือว่าเป็นการกระทำความผิดตาม พระราชบัญญัติว่าด้วยการกระทำความผิดเกี่ยวกับคอมพิวเตอร์ ถึงกระนั้นก็ตาม การคัดลอกบทความก็เป็นสิ่งที่อาจจะหลีกเลี่ยงไม่ได้ แต่ก็สามารถป้องกันได้ในระดับหนึ่ง
"ผมไม่ได้หวงห้ามการคัดลอกบทความเหล่านี้ เพราะจะทำให้ท่านไม่สามารถคัดลอก Code ไปใช้ได้ อย่างไรก็ตาม ช่วยสร้างลิงค์ของบทความไว้ที่หน้าเว็บไซด์ของท่านด้วยน๊ะครับเพื่อให้เครดิตกับผู้เขียน"
สำหรับบางเว็บไซด์ที่ต้องการป้องกันในเรื่องนี้จริง ๆ ก็ให้ทำตามขั้นตอนง่าย ๆ ดังนี้

• คลิ๊กไปที่ แม่แบบ | แก้ไข HTML
• ค้นหา Code <body>
• คัดลอก Code ข้างล่างนี้ทับไปที่ Code <body>

<body onmousedown="return false" oncontextmenu="return false" onselectstart="return false">
หลังจากทำการบันทึกแม่แบบเสร็จเรียบร้อยแล้ว บล๊อกของเราก็จะไม่สามารถใช้เมาส์ในการคัดลอกบทความได้ ถึงอย่างไรก็ตามสำหรับคนที่ต้องการจะคัดลอกจริง ๆ ก็ยังสามารถทำได้อยู่ดี โดยใช้ตัว Web Browser ไปที่เมนู View | Page Source หรือกด "Ctrl + U" แต่ก็ไม่ใช่เรื่องง่ายสำหรับมือใหม่ที่จะคัดลอกบทความได้อย่างสมบูรณ์แบบ

การสร้าง Float Image ให้กับบล๊อกของเรา

Float Image คือ การสร้างรูปภาพให้ลอยอยู่ ณ ตำแหน่งใด ๆ ของหน้าเว็บ ซึ่งประโยชน์ของการใช้ส่วนใหญ่จะเป็นโฆษณาและนิยมให้อยู่ที่มุมใดมุมหนึ่งของหน้าเว็บดังตัวอย่าง

เราสามารถที่จะสร้าง Float Image หรือรูปภาพให้ลอยอยู่ในหน้าบล๊อกของเราได้ด้วยวิธีง่าย ๆ ดังนี้

• ไปที่ รูปแบบ | แก้ไข HTML
• ค้นหา Code ]]></b:skin> แล้วคัดลอก Code ต่อไปนี้ไว้ด้านบน

#float_corner {
position:fixed;_position:absolute;bottom:0px;left:0px;clip:
inherit;_top:expression(document.documentElement.scrollTop+document.documentElement.clientHeight-this.clientHeight);_left:expression(document.documentElement.scrollLeft + document.documentElement.clientWidth - offsetWidth);}
*botton และ left คือ ตำแหน่งที่ต้องการให้รูปภาพนั้นแสดงในหน้าบล๊อก สามารถเปลี่ยนเป็น top, bottom, left หรือ right ได้

• ขั้นตอนถัดไป คือ ให้ค้นหาคำว่า </body> แล้วคัดลอก Code ต่อไปนี้ไว้ด้านบน

<div id='float_corner'>
<a href='http://blogger-assistant.blogspot.com'> <img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgiMfxSd8zRRiHbAxnIdcct2LLYjSuEw7wc6alpVkOoTh2q_ikE7MQL7Jwx_hLZ_Wh7AMID8VG2G08A8H95PQzyxyOi8VrPnc-urUfEO2ve2b-Od-TEJGIJjZU3tj2td0SnJRFSpxqize_/'/></a>
</div>
http://blogger-assistant.blogspot.com คือ ลิงค์ที่ต้องการ
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgiMfxSd8zRRiHbAxnIdcct2LLYjSuEw7wc6alpVkOoTh2q_ikE7MQL7Jwx_hLZ_Wh7AMID8VG2G08A8H95PQzyxyOi8VrPnc-urUfEO2ve2b-Od-TEJGIJjZU3tj2td0SnJRFSpxqize_/ คือ URL รูปภาพที่ต้องการ

การทำลิงค์ Read More... ให้กับบทความ

Read More..., อ่านต่อ, อ่านบทความที่เหลือ หรือ อ่านเนื้อหาทั้งหมด มักนิยมใช้ในกรณีที่บทความค่อนข้างยาว การแสดงผลบทความลงสู่หน้าแรกของ Blogger ด้วยรูปแบบมาตราฐานที่ทำไว้ คือ การแสดงบทความทั้งหมดในครั้งเดียว ซึ่งจะทำให้ HomePage ของเราดูไม่สวยงาม อีกทั้งยังเสียเวลาในการ Load หน้าเว็บในกรณีที่เราตั้งค่าให้แสดงผลหน้าแรกหลาย ๆ บทความ เพราะฉะนั้น สิ่งที่เรากำลังจะทำต่อไปนี้ คือ ตัดเอาเฉพาะบทความในส่วนต้นมาใส่ไว้ที่หน้าเว็บโดยบทความที่เหลือจะต้องคลิ๊กไปที่ลิงค์ Read More..., อ่านต่อ, อ่านบทความที่เหลือ หรือ อ่านเนื้อหาทั้งหมด

การทำลิงค์ก็ไม่ได้ยุ่งยากอะไร ให้ทำตามขั้นตอนดังนี้

• ไปที่ รูปแบบ | แก้ไข HTML
• ติ๊กขยายแม่แบบเครื่องมือ
• ค้นหาคำว่า <data:post.body/> หรือ <p><data:post.body/></p> ในส่วนของ HTML Code
• คัดลอก Code ข้างล่างนี้แทนที่ <data:post.body/> หรือ <p><data:post.body/></p>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>
<data:post.body/>
<b:if cond='data:blog.pageType != &quot;item&quot;'><br/>
<a expr:href='data:post.url'>อ&#3656;า��&#3656;อ...</a>
</b:if>
</b:if>
*เราสามารถเปลี่ยนคำว่า Read More... เป็นคำว่า อ่านต่อ, อ่านบทความที่เหลือ หรือ อ่านเนื้อหาทั้งหมด ได้

รูปแบบการเขียนบทความที่ต้องทำเพิ่มเติม
สำหรับการเขียนบทความที่เราต้องการให้มี Read More... เราจะต้องทำการแบ่งบทความโดยใส่ Tag เพิ่มเข้าไปตามรูปแบบนี้
เนื้อหาส่วนแรก
<span class="fullpost">
เนื้อหาส่วนที่เหลือ
</span>
หรือเราจะตั้งให้เป็นค่า Default ไปเลยก็ได้ โดยไปที่ การตั้งค่า | การจัดรูปแบบ และไปตั้งค่าที่บล๊อก "แม่แบบบทความ"

เมื่อเราต้องการเขียนบทความใหม่ในใหมด "เขียน" ค่าที่เราตั้งไว้จะแสดงเฉพาะส่วนของตัวหนังสือ โดยที่ Code ที่ทำ Highlight ไว้จะไม่แสดงในโหมดนี้ การเขียนบทความทำได้โดยเขียนทับตัวหนังสือ "ส่วนที่ต้องการให้แสดงผลในหน้าแรก" กับ "ส่วนที่ต้องการให้แสดงผลที่เหลือ" แต่ปัญหาคือ เราอาจจะเขียนทับลงไปบนโค้ดด้วย เพราะฉะนั้น ควรจะเขียนในโหมด Html จะดีกว่า

เลือกการเขียนในโหมด Html เพื่อป้องกันการเขียนบทความทับลงไปที่ Code ที่ตั้งไว้

ในส่วนตัวของผมเอง ผมไม่นิยมการตั้งค่าไว้ที่แม่แบบบทความ เนื่องจากปัญหาที่กล่าวมา อีกทั้งจะมีปัญหาในการใส่รูปภาพ และการเคลื่อนย้ายรูปภาพ หรือองค์ประกอบต่าง ๆ ของบทความ ทำให้ลิงค์ Read More... ผิดเพี้ยนไป ผมจะใช้วิธีการเขียนบทความทั้งหมดในโหมด "เขียน" แล้วมาใส่ Code <span class="fullpost"> และ </span> ที่หลังจะสะดวกและตรงกับที่เราต้องการโดยไม่มีความผิดเพี้ยนแต่ประการใด
อีกประการหนึ่งก็คือ ถ้าเราต้องการย้อนกลับมาแก้ไขบทความเก่า ๆ ผมจะเอา Code <span class="fullpost"> และ </span> ออกไปก่อน เมื่อแก้ไขเสร็จแล้วค่อยมาใส่ใหม่ ยังไงก็ค่อย ๆ ลองทำดูน๊ะครับ แต่อยากจะแนะนำให้ใช้วิธีที่ผมทำจะดีกว่า หรือไม่ก็ทดลองด้วยตัวเองก็จะทราบเหตุผลที่ผมกล่าวมาข้างต้น

การปรับแต่ง Title ของบล๊อก ให้ถูกหลัก SEO

ในส่วนนี้จะเป็นแก้ไขการแสดงผลของ Title ซึ่งโดยค่าปรกติที่ทาง Blogger ตั้งไว้จะแสดงหัวข้อบล๊อกก่อน หรือ Page Title แล้วตามด้วยชื่อของบทความ ในส่วนของ SEO จะให้ความสำคัญกับสิ่งที่ค้นหาเจอก่อนเปรียบเทียบก่อนและหลังการแก้ไข

ก่อนการแก้ไข รูปแบบ Page Title จะเป็นชื่อบล๊อกแล้วตามด้วยชื่อบทความ

หลังการแก้ไข รูปแบบ Page Title จะแสดงมีเฉพาะชื่อบทความเท่านั้น

แล้วเราสามารถที่จะแก้ไขในส่วนนี้ได้อย่างไร
การแก้ไขจะต้องเข้าไปที่ รูปแบบ | แก้ไข HTML เราจะเห็นตำแหน่งการวาง Page Title อยู่ถัดจาก head มาสองบรรทัด

ให้ทำการคัดลอก Code ทับไปที่ตำแหน่ง Page Title เดิม

<b
:if cond='data:blog.pageType == &quot;index&quot;'>
<title><data:blog.title/></title>
<b:else/>
<title><data:blog.pageName/></title>
</b:if>

การเปลี่ยน Favicon (Favicon Blogger Hack)

Favicon (Favorites Icon) หรืออาจจะเรียกกันว่า website icon, shortcut icon, url icon, หรือ bookmark icon ซึ่งจะมีขนาด 16x16 pixel ซึ่งจะแสดงอยู่ในตำแหน่งเดียวกันกับ Address Bar ดังภาพ

การสร้างรูป Favicon สามารถสร้างได้ 4 รูปแบบด้วยกัน คือ ICO, PNG, GIF และ JPEG ส่วนใหญ่แล้วเราจะใช้รูปแบบ ICO มากกว่า สำหรับการใช้งานในแต่ละรูปแบบมีดังนี้

HTML:

• <link rel="icon" type="image/vnd.microsoft.icon" href="http://example.com/image.ico">
• <link rel="icon" type="image/png" href="http://example.com/image.png">
• <link rel="icon" type="image/gif" href="http://example.com/image.gif">

XHTML:

• <link rel="icon" type="image/vnd.microsoft.icon" href="/somepath/image.ico">
• <link rel="icon" type="image/png" href="/somepath/image.png">
• <link rel="icon" type="image/gif" href="/somepath/image.gif">

Internet Explorer จะมีรูปแบบที่แตกต่างกันเล็กน้อย

• <link rel="shortcut icon" type="image/x-icon" href="/somewhere/myicon.png">

สำหรับในส่วนที่ผมทำขึ้นมาจะเป็นรูปแบบ ICO อาจจะดูแตกต่างจากรูปแบบข้างบน แต่ความหมายเหมือนกันครับ หรือจะใช้รูปแบบที่ผมทำขึ้นมาก็ดีหน่อยเพราะผมทำมาใช้งานจริง รูปแบบข้างบนผมก็ไม่เคยลอง
<link href='http://www.........../favicon.ico' rel='shortcut icon' type='image/x-icon'/>
ตำแหน่งในการวางการแก้ไข Favicon จะอยู่ถัดมาจาก pageTitle ให้วางลงไปที่ตำแหน่งนี้ได้เลยครับ

การซ่อน Navbar (Hide Navigation Bar)

Navbar(Navigation Bar) หรือแถบนำทาง จะอยู่ในตำแหน่งบนสุดของบล๊อก ปรกติจะเป็นสีน้ำเงินเข้มแต่สามารถเปรียนสีได้ บางครั้งเรามีความรู้สึกว่า การมี Navbar แสดงอยู่ในส่วนบนสุดของบล๊อกเรา ทำให้บล๊อกเราดูเป็นมือสมัครเล่นจนเกินไป ถ้าเอาส่วนนี้ออก บล๊อกของเราก็จะทำให้ดูมีความรู้สึกว่าเป็นเหมือนเว็บไซด์ทั่ว ๆ ไป

สำหรับการซ่อน Navbar ทำได้ง่าย ๆ โดยไปที่แถบ รูปแบบ | แก้ไข HTML แล้วทำการเพิ่ม Code ข้างล่างนี้ไว้ในตำแหน่งดังภาพ ซึ่งจะอยู่เกือบจะบนสุดของหน้าการแก้ไข HTML โดยที่เราไม่จำเป็นต้องติ๊กขยายแม่แบบเครื่องมือ
#navbar-iframe {
display: none !important;
}
ตำแหน่งการว่าง Code เพื่อซ่อน Navbar

เมื่อทำการคัดลอก Code ไว้ในตำแหน่งดังภาพเรียบร้อยแล้ว ให้เราคลิ๊กไปที่ "แสดงตัวอย่าง" เพื่อตรวจสอบความเรียบร้อยก่อนการบันทึกแม่แบบ

รูปแบบ - เลือกแม่แบบใหม่ (Choose New Template)

ณ ขณะนี้แม่แบบที่ทาง Blogger จัดเตรียมไว้ มีให้เลือกทั้งหมด 16 แม่แบบ แต่ละแม่แบบก็มีตัวเลือก ถ้านับความแตกต่างของแม่แบบที่ทาง Blogger จัดไว้จะมีทั้งหมด 38 แม่แบบด้วยกัน ซึ่งแต่ละแม่แบบสามารถแสดงตัวอย่างก่อนได้ ดูตัวอย่างได้จากภาพด้านล่างนี้ครับ

รูปแบบ - แก้ไข HTML (Edit HTML)

จากการเรียนรู้การทำบล๊อกด้วย Blogger เราจะเห็นได้ว่าการปรับแต่งต่าง ๆ ทำได้ง่ายเพียงอาศัยความรู้ทางเทคนิคนิดหน่อยเท่านั้น แต่สำหรับบางคนแ้ล้วการปรับแต่งเบื้องต้นในส่วนที่ทาง Blogger สร้างไว้ให้อาจจะยังไม่เพียงพอเพราะต้องการสร้างความแตกต่างให้กับบล๊อกของตัวเอง จึงต้องอาศัยความรู้ในการแก้ไข HTML มาประยุกต์ใช้
ก่อนทำการแก้ไข HTML ทุกครั้ง สิ่งแรกที่เราควรจะทำจนชินเป็นนิสัยก็คือ การสำรองแม่แบบ โดยให้คลิ๊กไปที่ ดาวน์โหลดแม่แบบฉบับเต็ม(Download Full Template) แล้วทำการบันทึก/ตั้งชื่อไฟล์นามสกุล XML ไว้ในเครื่องคอมพิวเตอร์ของเรา สำหรับการเรียกคืนแม่แบบ (Restore Template) ทำได้โดยการคลิ๊กที่ปุ่ม "Browse_" แล้วเลือกไฟล์ XML ที่เราได้ทำการบันทึกเอาไว้ก่อนหน้า เพียงเท่านี้เราก็จะได้ทุกสิ่งทุกอย่างที่เหมือนเดิมกลับคืนมา

การหากว่าเราต้องการแก้ไข HTML ในส่วนของ Widget ด้วย เราจะต้องทำการติ๊กไปที่ "ขยายแม่แบบเครื่องมือ"(Expand Widget Template) ซึ่งโดยปกติแล้วเราก็จะติ๊กไปที่นี่เสมอเมื่อเราต้องการที่จะแก้ไขขั้นสูง ในขณะที่เราทำการแก้ไข HTML เราสามารถแสดงตัวอย่างของหน้าเพ็จหลังจากแก้ไขได้ด้วยการคลิ๊กไปที่ "แสดงตัวอย่าง" จนเราแน่ใจว่าเราได้ทำการแก้ไขในส่วนที่เราต้องการจนถูกใจแ้ล้วถึงจะบันทึกแม่แบบ
ในส่วนการแก้ไข HTML จะเป็นส่วนที่จะเพิ่มสีสันให้กับบล๊อกของเราเป็นอย่างมาก

รูปแบบ - แบบอักษรและสี (Fonts and Colours)

เราสามารถกำหนดแบบตัวอักษรและสีได้สำหรับแม่แบบมาตราฐานที่ทาง Blogger จัดเตรียมไว้ให้ ในส่วนของแม่แบบที่นำมาจากที่อื่น หรือผ่านการปรับเปลี่ยนรูปแบบอาจจะไม่สามารถใช้การในส่วนนี้ได้ ต้องใช้วิธีการตั้งค่าแบบตัวอักษรและสีด้วยภาษา Html โดยไปที่เมนู รูปแบบ | แก้ไข Html
หน้าต่างการแก้ไขแบบอักษรและสีจะมีอยู่ 3 ส่วนด้วยกันคือ

• ช่องเลือกสิ่งที่ต้องการแก้ไข
• ช่องเลือกแบบสีที่ต้องการ
• รูปแบบตัวอย่างหลังจากตั้งค่า

เราสามารถใช้ฟังก์ชั่นอัตโนมัติในการสลับสีบล๊อกโดยการคลิ๊กไปที่ "สลับสีบล๊อก" หรือเปลี่ยนกลับเป็นค่าเริ่มต้นของแม่แบบได้ ให้คลิ๊กไปที่ "เปลี่ยนกลับเป็นค่าเริ่มต้นของแม่แบบ" หรือ กดปุ่ม "ล้างข้อมูลการแก้ไข"

สำหรับการแก้ไขแบบอักษร บริเวณ "แบบสีที่ต้องการ" จะเปลี่ยนไปเป็น "แบบอักษรที่ต้องการ" แทน ซึ่งมีอยู่ด้วยกัน 6 แบบอักษร คือ

1. Arial
2. Courier
3. Georgia
4. Times
5. Trebuchet
6. Verdana

สามารถปรับลักษณะตัวอักษรเป็นตัวหนาหรือตัวเอียง และสามารถทำให้เล็กลงหรือใหญ่ขึ้นก็ได้

รูปแบบ - องค์ประกอบของหน้า (Page Elements)

เราสามารถจัดเรียงองค์ประกอบแม่แบบได้ เพียงคลิ๊กองค์ประกอบที่ต้องการย้าย จากนั้นลากและวางองค์ประกอบในที่ที่เราต้องการ เราสามารถย้ายองค์ประกอบของหน้าไปยังด้านบน, ด้านล่าง หรือด้านข้างได้ ยกเว้นในส่วนของแถบนำทาง(Navbar) และส่วนหัวของหน้า(Page Header) และส่วนของบทความ(Post)
องค์ประกอบของหน้าตามรูปแบบมาตราฐานที่ Blogger ตั้งไว้ สามารถแบ่งได้เป็น 7 ส่วนด้วยกันคือ
1. แถบนำทาง (Navbar) เป็นแถบที่อยู่บนสุดของบล๊อกมีให้เลือก 4 สีด้วยกัน คือ สีน้ำเงิน, แทน, ดำ และสีเงิน

2. ส่วนหัวของหน้า (Page Header) สำหรับกำหนดชื่อบล๊อก, คำอธิบายบล๊อก สามารถใส่รูปภาพแทรกลงไปให้อยู่ข้างหลังชื่อและคำอธิบายบล๊อก หรือแทนที่ได้
3. ส่วนบนบทความ (Header Wrapper) สำหรับวางตำแหน่ง Gadget ที่เพิ่มเข้ามาหรือย้ายมาจากตำแหน่งอื่นก็ได้ โดยการคลิ๊กไปที่ "เพิ่ม Gadget" ส่วนใหญ่แล้วเราจะใช้ Gadget ในหมวดพื้นฐานและเรื่องที่แนะนำ ส่วนใครที่ต้องการเพิ่มสีสันให้กับบล๊อกก็มีให้เลือกอยู่หลากหลาย ในส่วน Gadget ที่สำคัญจะขอให้ติดตามในเรื่องของ Gadget อีกทีครับ

4. ส่วนของบทความ (Post) สำหรับตั้งจำนวนบทความที่ต้องการให้แสดงที่หน้าแรก และมีตัวเลือกต่าง ๆ ให้เลือกใช้ เรายังสามารถที่จัดวางตำแหน่งของผู้เขียน, เวลา, ความคิดเห็น และป้ายกำกับให้อยู่ส่วนบนของบทความหรือสลับตำแหน่งกันได้

5. ส่วนล่างบทความ (Footer Wrapper) สำหรับวางตำแหน่ง Gadget ที่เพิ่มเข้ามาหรือย้ายมาจากตำแหน่งอื่นก็ได้
6. ส่วนของด้านข้าง (Sidebar) สำหรับวางตำแหน่ง Gadget ที่เพิ่มเข้ามาหรือย้ายมาจากตำแหน่งอื่นก็ได้
7. ส่วนล่างของบล๊อก (Footer) สำหรับวางตำแหน่ง Gadget ที่เพิ่มเข้ามาหรือย้ายมาจากตำแหน่งอื่นก็ได้

รูปแบบ (Layout)

การตั้งค่ารูปแบบ(Layout Setting) เปรียบเสมือนการออกแบบบ้านว่าให้มีลักษณะและสีสันอย่างไรตามต้องการ บางคนอาจจะต้องการบ้านแบบเรียบ ๆ ง่าย ๆ ดูสะอาดตา บางคนอาจต้องการบ้านที่ดูหรูหราสวยงามและทันสมัย ซึ่งนั่นก็แล้วแต่ความต้องการ ในการทำเว็บไซด์หรือบล๊อกก็เช่นเดียวกัน รูปร่างหน้าตาของบล๊อกนับว่าเป็นส่วนสำคัญต่อผู้เข้าชมเป็นอย่างยิ่งและควรจะออกแบบสอดคล้องกับวัตถุประสงค์ในการตั้งบล๊อก การออกแบบบล๊อกให้มีความซับซ้อนหรือมีลูกเล่นต่าง ๆ มากจนเกินไปก็อาจจะไม่ส่งผลดีต่อผู้่ชม ผมไม่สามารถบอกได้ว่าการออกแบบบล๊อกแบบไหนที่ถือว่าเป็นการออกแบบที่ดีที่สุดผู้เข้าชมเท่านั้นจะเป็นผู้ที่ตัดสิน

คุณลักษณะการจัดหน้าของ Blogger เป็นคุณสมบัติการแก้ไขแม่แบบที่ใช้งานง่าย ช่วยให้เราสามารถใช้แม่แบบ Blogger โดยไม่ต้องอาศัยความรู้ด้าน HTML หรือ CSS แต่อย่างใด ขณะนี้เราสามารถแก้ไขและปรับแต่งสี แบบอักษร ส่วนหัวและแถบด้านข้างของบล็อกด้วยการคลิกเมาส์ไม่กี่ครั้ง ในการปรับแต่งการจัดหน้าของบล็อก ให้ไปที่แท็บ แม่แบบ | องค์ประกอบของหน้า ใน Blogger
การตั้งค่ารูปแบบจะมีเมนูย่อยให้เลือก 4 เมนูด้วยกัน คือ

• องค์ประกอบของหน้า (Page Elements)
• แบบอักษรและสี (Fonts and Colors)
• แก้ไข HTML (Edit HTML)
• เลือกแม่แบบใหม่ (Pick New Template)

การตั้งค่า - สิทธิ์ (Permissions)

การตั้งค่าสิทธิ์มีอยู่ 2 ส่วนด้วยกันคือ สิทธิ์สำหรับผู้เขียนและสิทธิ์สำหรับผู้อ่าน
สิทธิ์สำหรับผู้เขียน -เราสามารถที่จะอนุญาติให้เพื่อนสมาชิกแบบเฉพาะเจาะจงสามารถเขียนบทความบทบล๊อกของเราได้ ซึ่งสามารถเพิ่มนักเขียนบทความในบล๊อกของเราได้ถึง 100 คนด้วยกัน

สิทธิ์สำหรับผู้อ่าน -เราสามารถระบุได้ว่าบทความในบล๊อกของเราอนุญาติให้ใครเข้ามาอ่านได้บ้าง ส่วนนี้ก็มีประโยชน์เมื่อเราใช้งานบล๊อกเฉพาะกลุ่มและเป็นความลับของกลุ่ม หรือต้องการให้มีการแลกเปลี่ยนความคิดเห็นเฉพาะกลุ่มของเราเท่านั้น

การตั้งค่า - OpenID

เราสามารถใช้ OpenID URL เพื่อเข้าสู่ไซต์อื่นๆ ที่ใช้งาน OpenID นอกจากนี้เรายังสามารถกำหนดให้ผู้ใช้ OpenID สามารถแสดงความคิดเห็นในบล็อกของเรา โดยปรับการตั้งค่า ความคิดเห็น
ตัวอย่างเช่น URL ของ OpenID ของผมคือ http://icu2t.blogspot.com/
แล้ว OpenID มันคืออะไรกัน
OpenID เป็นระบบหนึ่งที่ทำให้เราสามารถใช้ URL เป็นข้อมูลระบุตัวตน (Identity) ที่เราสามารถใช้ลงชื่อ (Sign in หรือ Log in) เข้าสู่เวบไซต์ต่างๆ ที่เปิดรับมาตรฐาน OpenID นี้ได้ โดยที่เราไม่ต้องสมัครเป็นสมาชิกของแต่ละเวบไซต์ทุกครั้ง ประโยชน์ก็คือ เราไม่ต้องจำชื่อและรหัสผ่านของเราในแต่ละเวบไซต์ จึงเพิ่มความสะดวกแก่ผู้ใช้ยิ่ง ปรัชญาที่อยู่เบื้องหลังของ OpenID คือ การระบุตัวตนบนโลกอินเทอร์เน็ต เปรียบเหมือนการทำบัตรประจำตัวประชาชน ที่ใช้ระบุความแตกต่างของแต่ละบุคคล เช่น ชื่อสกุล รูปถ่ายใบหน้า วันเดือนปีเกิด ภูมิลำเนา เชื้อชาติ และ ศาสนา เป็นต้น ดังนั้น OpenID จึงถือว่าเป็นแนวคิดใหม่ที่ปฏิวัติโลกไซเบอร์ ด้วยการแจ้งตัวตนที่แท้จริงบนโลกอินเทอร์เน็ต

การตั้งค่า - อีเมลและมือถือ (Email & Mobile)

เราสามารถอัปเดทบล๊อกหรือส่งข้อความผ่านทางอีเมลและโทรศัพท์มือถือได้ในส่วนของการตั้งค่าส่วนนี้
ที่อยู่ BlogSend (BlogSend Address)
เราสามารถใส่อีเมลของผู้ที่ต้องการรับบทความล่าสุดได้ทางช่องทางนี้ บทความล่าสุดของเราก็พร้อมที่จะส่งถึงเพื่อนสมาชิกในทันที
ที่อยู่สำหรับการส่งบทความผ่านอีเมล (Email Posting Address)
เป็นการตั้งค่าเพิ่มให้กับอีเมลของเราเพื่อให้สามารถอัปเดทบล๊อกได้ทางอีเมลโดยไม่ต้อง Login เข้าบล๊อกโดยเราสามารถเลือกได้ว่าให้ทำการเผยแพร่ทันที่หรือให้เป็นฉบับร่างก่อน
อุปกรณ์เคลื่อนที่ (Mobile Devices) เป็นการส่งบทความด้วย MMS แต่ต้องลงทะเบียนโทรศัพท์มือถือ ถ้าโทรศัพท์ของเราไม่สนับสนุนการใช้  MMS สามารถลงทะเบียนการใช้ SMS ได้
วิธีการตั้งค่า คือ ให้เลือก "เพิ่มโทรศัพท์มือถือ" แล้วจะมีหน้าต่างใหม่ปรากฎขึ้น แล้วเราก็ส่งรหัสยืนยันนี้จากโทรศัพท์มือถือของเราไปที่ go@blogger.com

การตั้งค่า - ฟีดของไซต์ (Site Feed)

การตั้งค่าฟีดมี 2 โหมดให้เลือกด้วยกัน คือ โหมดพื้นฐานและขั้นสูง กรอบสีน้ำเงินคือความแตกต่างของทั้งสองโหมด ในส่วนท้ายจะเหมือนกันทั้งสองโหมด เรามาดูแต่ละส่วนกันเลยครับ

อนุญาตให้ใช้ฟีดของบล็อก (Allow Blog Feeds)
โหมดพื้นฐาน
เลือกแบบเต็ม เพื่อจัดส่งเนื้อหาของบทความแบบเต็ม
เลือกแบบสั้น ถ้าต้องการจัดส่งเนื้อหาเฉพาะย่อหน้าแรก หรือประมาณ 255 ตัวอักษร ขึ้นอยู่กับว่าข้อใดสั้นกว่า การตั้งค่านี้จะใช้กับฟีดแต่ละประเภท (บทความ ความคิดเห็น และฟีดของความคิดเห็นต่อบทความ)
โหมดขั้นสูง
ในโหมดขั้นสูงสามารถเลือกการฟีดแบบเต็มหรือแบบสั้นก็ได้ในส่วนของบทความ ความคิดเห็น หรือความคิดเห็นต่อบทความ
URL การเปลี่ยนเส้นทางฟีดข้อมูลของบทความ (Post Feed Redirect URL)
หากใช้ FeedBurner หรือบริการอื่นๆ เพื่อประมวลผลฟีดข้อมูลบทความ ให้ป้อน URL ของฟีดข้อมูลแบบเต็มที่นี่ Blogger จะเปลี่ยนเส้นทางการเข้าชมไปยังที่อยู่นี้
ส่วนท้ายฟีดของบทความ (Post Feed Footer)
ค่านี้จะปรากฏหลังจากแต่ละบทความในฟีดของไซต์ของคุณ ถ้าคุณใช้โฆษณาหรือส่วนเพิ่มฟีดข้อมูลของบุคคลที่สาม คุณสามารถตั้งค่า "เปิดใช้หน้าบทความ" เป็น "ใช่" (ใน การตั้งค่าการเก็บบทความ) และตั้งค่า "ใช้ฟีดของบล็อกได้" เป็น "เต็ม" (ด้านบน)

การตั้งค่า - เก็บเข้าคลังบทความ (Archiving Setting)

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