ก่อนอื่นต้องออกตัวว่าไม่ได้มีความรู้อะไรมากเกี่ยวกับการทำบล๊อกนะคะ เพราะ Lilac เองก็เพิ่งมีบล๊อกที่ Bloggang มาได้ 2 อาทิตย์ (แต่ก่อนหน้านี้มีบล๊อกอยู่หนึ่งอันกับโฮสอื่นค่ะ) แต่เมื่อวาน Lilac ก็นั่งปรับโน่น เปลี่ยนนี่ แก้โค้ดไปเรื่อยเปื่อย ไม่รู้ไปกดอะไรผิดเข้า โค้ดทั้งหมดใน script area ของ Lilac หายไปหมดเลย ตกใจแทบแย่ แต่ก็มานั่งรวบรวมหาโค้ดใหม่ จนตอนนี้บล๊อกของ Lilac กลับสู่ภาวะปกติแล้วค่ะ ดีใจ 

Lilac เลยคิดว่า น่าจะเก็บโค้ดไว้บ้างดีกว่า เพื่อความอุ่นใจ นอกจากนี้ เพราะความเป็นมือใหม่ในการทำบล๊อก Lilac ก็เจอปัญหาระหว่างทำด้วย คิดว่าถ้าเอามาแชร์ ก็จะเป็นประโยชน์กับคุณที่กำลังอ่านอยู่นี้ด้วยค่ะ

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

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

นอกจากการรักษาสิทธิ์ความเป็นเจ้าของของรูปภาพตัวเองแล้ว Lilac คิดว่าการเป็น blogger ที่ดีนั้น ต้องรักษาสิทธิ์และให้เกียรติเจ้าของภาพและข้อมูลที่เรานำมาใช้ในบล๊อกของเราด้วย ซึ่งทำได้ไม่ยากเลยค่ะ อาจจะโดยเขียนให้ credit หรือทำ link ไปยังหน้าที่เราหยิบยกข้อมูลหรือรูปภาพมา หรือที่ Lilac ทำเมื่อเอาเซพรูปภาพมาจากหลายๆ เวปแล้วเก็บไว้เตรียมเขียนบล๊อกก็คือ เอา url มาแปะลงไปในรูปเลยค่ะ เพราะไม่อย่างนั้น การไปรื้อหาว่าแต่ละรูปมาจากเวปไหนบ้าง จะทำให้เสียเวลามากทีเดียว 

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

1. โค้ดแรกของสมาชิกใหม่คงหนีไม่พ้น Header จริงมั้ยคะ (อันนี้เดาเอาจากตัวเองนะคะ ) โค้ดอันแรกนี้ Lilac ไม่ได้ใช้อันที่เป็นของคุณดอกหญ้าเมืองเลยค่ะ แต่ใช้โค้ดจากที่ทาง Bloggang สรุปรวมไว้ให้น่ะค่ะ คืออันนี้

 ใส่ BG แบบ tile 

<style>body{background-image:url(URL ของภาพ);}</style>

 ใส่ BG แบบ fixed ไม่ให้ BG เลื่อนตาม scroll bar

<style>body{background-attachment: fixed; background-image:url(URL ของภาพ);}</style>

 ใส่ BG โดยใช้สี

<style>body{background:color code}></style>

 ใส่ BG แบบมุมใดมุมหนึ่ง ไม่เลื่อนไปตามบล๊อก

<style type>body{background: ใส่โค้ตสีของบีจี url(ใส่โค้ตภาพที่นี่) no-repeat fixed left bottom}</style>

Note: Left bottom เราสามารถเปลี่ยนได้ จะเปลี่ยนเป็น :: right top / left top / center / right bottom

3. โค้ดลบพื้นหลังและกรอบสีขาว โค้ดนี้ไม่ต้องแก้อะไรเลยค่ะ copy ไปวางได้เลย

<style>table {background-color: transparent;border-style: none;border-spacing: none;}td {border: none;border-color: none;background: none;} </style>

4. เปลี่ยน bullet ข้างหน้า group blog และหน้าหัวข้อต่างๆ ทั้งบล๊อกให้เป็นรูปอื่น

<style>ul{list-style: ;list-style-image: url(URL ของรูป);} </style>

5. เปลี่ยน "now here" เป็นรูปที่เราต้องการ

<script>iLength = document.images.length; for(i=0;i<iLength;i++) if(document.images[i].src=="//www.bloggang.com/images/now.gif") {document.images[i].src="URL ของภาพ"}</script>

บล๊อกของคุณเริ่มมีหน้าตาอย่างที่คุณต้องการมากขึ้นอีกนิดนึงแล้วใช่มั้ยคะ แล้วมาต่อคราวหน้านะคะ