[Talk] Blog's template customize (Blogger)

ทำการทดสอบ Post แรก ของ Template Customize ใน Blogger โดยแก้ไข HTML (Edit HTML) ของเราเอง ซึ่งแหล่งข้อมูลที่ใช้ศึกษาการ Template Customize คือ BlogerBuster, BloggerPlugins ซึ่งช่วยเหลือผมอย่างมากในการปรับปรุง Blog โดยมีลำดับปรับปรุงมีดังนี้

กรอบของ Template อ้างอิง คือ Denim 
(*ชอบแถบ Header เป็น สีฟ้า-น้ำเงิน ส่วน Body เป็นสีขาวตัวหนังสืออ่านง่าย)

Layout

• Body : Creating a Three Column (or Wide Two Column) Canvas 
• ข้อมูล Layout
• Content-wrapper { width:950px }
• Main-wrapper { width:614px }
• Sidebar-wrapper { width:280px }
• ผมไม่ชอบที่มีการแปลงข้อมูลการแสดงให้เป็นตัวใหญ่ในหลายจุดที่ Template Blogger จึงทำการปิดการแปลงดังกล่าวด้วยการใส่ Comment ของ CSS ตรง "text-transform:uppercase" และสร้างตัวแปร LinkedColor เพื่อใช้แยกสีจาก LinkColor เดิม ด้วยการกำหนดค่าให้กับ a:visited { color: ...; }
• Header : How to Create a Custom Header / The Easy Way to Make a Great Blog Header
• ข้อมูล Layout
• Header { width:950px; height: 140px; }
• ตรงส่วน Header นี่ถูกปิดการเพิ่ม Gadgets จาก Default Template ซึ่งเราสามารถเปิดให้มีการเพิ่ม Gadget ได้ 
• Footer : How to Add Three Columns to your Footer Section 
• ใช้ 3 Column เพื่อจัดการส่วน Profile และ Connection ต่างๆ 

**การกำหนด Width และ Height จะช่วยรักษาขนาดและตำแหน่งของ Template ในส่วนต่างๆ เมื่อมีการปรับขนาดหน้าต่าง Browser

Browse / Flow Control

• Create Navigation Buttons for your Blogger Blog
• ส่วนที่ทำให้ Blogger ดูมีความเป็นสัดส่วนดี (ดูไม่ใช่ Blogger ไปเลยเมื่อเห็นครั้งแรก) แล้วที่สำคัญไม่ต้องใช้ภาพ ใช้เทคนิค CSS เจ๋งมากเลย
• Add Style to Search Forms
• Feature ที่ขาดไม่ได้กับ Web Page
• Google Ajax Search With your Adsense Ads
• ทำให้การ Search ข้อมูลใน Blog ของเราง่ายขึ้น เพราะไม่จะเป็นต้องเปลี่ยนหน้าไปไหน เพราะจะใช้ Ajax มาช่วยจัดการแสดงผล บนหน้าเดิมที่เปิดอยู่

Comment / Posts

• Remove "no-follow" tags from your template
• พึ่งทราบว่ามีการดำเนินการเช่นนี้กับ Blog ด้วยชอบคำนี้ดี "u comment, i follow"
• How to customize "block quotes" in your post?
• เน้นข้อความด้วยกรอบ ช่วยจัดโครงสร้างข้อความใน Post ให้อ่านง่ายขึ้น
• Add Stylized Captions to Images in your Blog Post Using CSS
• ทำให้การจัดวางภาพมีองค์ประกอบที่เป็นสัดส่วนพร้อมคำอธิบาย

*สามารถดูตัวอย่างของ Comment / Posts ได้ที่ >>

Resource

• 5 Best Free File Hosting for your Images and Scripts
• Hotlinkfiles นั้นรองรับการทำ Hot link หรือ Direct link ไปยังไฟล์ที่อัพโดยตรง (ซึ่งจะไม่มีการขั้น Link) จึงทำให้เราสามารถนำไปใช้วางไฟล์ Image / Script ได้ แต่ว่ามีการจำกัด Bw (Bandwidth) ที่ 8GB ต่อเดือน จึงทำให้อาจจะไม่เหมาะกับไฟล์ภาพใหญ่ๆ ผมแนะนำให้ใช้เกี่ยวกับไฟล์ Script จะดีกว่าเพราะจำเป็นต้องอาศัย Hot link ในการ Include เข้ากับ JavaScript
• Picasa เป็น Web Album ของทาง Google ที่สามารถให้เราเข้าถึงไฟล์ภาพได้ด้วย Hot link และสามารถเก็บข้อมูลได้ 1GB แม้จะขนาดไม่เยอะมาก แต่ก็เพียงพอแก่การเก็บภาพที่สำคัญ

Other

• Add a "Top of Page" Icon Link
• ช่วยให้ Post ที่ยาวไม่หน้าเบื่อ
• Favicons Made Easy!
• สร้างเอกลักษณ์ให้ Blogger ของคุณ
• Blogumus: a flash animated label cloud for Blogger!
• ทำให้ Label / Tag กลายเป็นที่สนใจมากขึ้นจากเดิม

หมายเหตุ: ถ้ามีการบันทึกการแก้ไขแม่แบบใหม่ จะทำให้ข้อมูลของโครงสร้างในหน้าจะถูกทับ อย่างเช่น ชื่อของ HTML/JavaScript เป็นต้น ดังนั้นควรแก้ไข HTML ให้สมบูรณ์ตามต้องการก่อนจะใส่รายละเอียด (Content) ไปยัง Block ต่างๆ ของ Blog