Bloggang.com : ผู้หญิงขี้รำคาญ : การเขียนบล็อก I-Theme และภาพพื้นหลัง

การเขียนบล็อก I-Theme และภาพพื้นหลัง

วันนี้ขอมาเปลี่ยนบรรยากาศจากการแจกของแต่งบล็อกมาเป็นการพูดคุยเรื่องการเขียนบล็อกดีกว่าค่ะ คือ อยากจะรวบรวมวิธีการเขียนบล็อกในแบบฉบับของตนเองที่ทำอยู่มาเพื่อแบ่งปันให้กับเพื่อนๆ เนื่องจากมีเพื่อนๆ มือใหม่ๆ หลายท่าน ยังคงมีปัญหากับการใส่ background การใส่ headblog รวมถึงเทคนิคอื่นๆ ในการเขียนบล็อกค่ะ

เริ่มต้นอย่างไรดีกับการทำบล็อก
คำถามนี้คงเกิดขึ้นกับเพื่อนๆ ทุกๆ คนที่เพิ่งจะเริ่มต้นทำบล็อก ไม่รู้ว่าจะทำยังไงกับบล็อกดีหรือควรทำอะไรก่อนดี

วันนี้เรามาพูดถึงเรื่องการปรับแต่งบล็อกในการเริ่มต้นดีกว่าค่ะ ซึ่งก็คือการปรับแต่งรูปแบบของธีม (Theme)

การปรับแต่งธีม

อันดับแรกให้เราเข้าไปที่หัวข้อการปรับแต่งเว็บบล็อก แล้วคลิกเข้าไปที่ ตั้งชื่อ Slogan ค่ะ

หลังจากเข้ามาที่หน้าตั้งชื่อสโลแกนแล้ว จะมีช่องที่ให้ใส่รายละเอียดอยู่ (ดูในรูปค่ะ)

จะขออธิบายรายละเอียดของหน้านี้ดังนี้ค่ะ

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

รูปแบบการแสดง Weblog จะเห็นว่ามีอยู่ 2 รูปแบบคือ Blog style และ Diary style รูปแบบทั้งสองจะมีความแตกต่างกันคือ

Blog style จะแสดงบล็อกทั้งหมดในกลุ่มบล็อกนั้นๆ

Diary style จะแสดงบล็อกล่าสุดในกลุ่มบล็อกนั้นๆ

ส่วนจะเลือกใช้แบบไหนก็แล้วแต่ความชอบส่วนบุคคล ซึ่งในบล็อกของแมวจะเลือกเป็น Diary style ค่ะ

การเลือก Theme

จากรูปด้านบนจะพบว่า มีธีมที่เป็น Theme อิสระอยู่ 3 แบบ และธีมสำเร็จรูปที่เราเลือกใช้ได้เลยอยู่ 8 ธีม ทีนี้เรามาดูความแตกต่างค่ะ

รูปแบบ Theme อิสระ จะมี 3 แบบ

1. Theme อิสระที่มีเมนูทั้งซ้ายและขวา ตกแต่งหน้าตาของ theme ได้เอง

2. Theme อิสระ มีเมนูเฉพาะด้านขวา ตกแต่งหน้าตาของ theme ได้เอง

3. Theme อิสระ มีเมนูเฉพาะด้านซ้าย ตกแต่ง theme ได้เอง (หากจะใช้ script กับ comment ให้เลี่ยง theme นี้)

โดยส่วนตัวแล้ว อยากแนะนำให้เลือกใช้รูปแบบ Theme อิสระที่ 1 และ 2 ค่ะ

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

ส่วนข้อเสียก็คือมีข้อจำกัดว่า หากเราจะทำการเปลี่ยนภาพหัวบล็อกหรือภาพพื้นหลังเองจะมีปัญหาในเรื่องการแสดงผลของธีมแสดงผลออกมาได้ไม่ 100 เปอร์เซ็นต์

ดังนั้น หากเพื่อนๆ ที่ต้องการจะปรับแต่งพื้นหลัง ภาพหัวบล็อก หรือรูปแบบของธีม ควรที่จะเลือกรูปแบบของธีมเป็นธีมอิสระเท่านั้นนะค่ะ

จะใส่ภาพพื้นหลังอย่างไร

หลังจากที่เราเลือกรูปแบบธีมเป็นธีมอิสระแล้ว ก็มาถึงขั้นนตอนที่จะเพื่อนๆ อยากจะใส่พื้นหลังให้กับบล็อกค่ะ

ให้เราเข้าไปที่ จัดการ Script Area (ดังรูปค่ะ)

นำโค้ดภาพพื้นหลังวางไปในช่อง Script Area จากนั้นก็เซฟก็เป็นอันเรียบร้อยแล้วค่ะ

สำหรับโค้ดที่ใช้ในการใส่ภาพพื้นหลังมีดังนี้ค่ะ

แบบที่ 1 พื้นหลังอยู่กับที่ เวลาเลื่อนหน้าเวบไม่เลื่อนตามเหมาะกับ รูปภาพขนาด เต็มจอพอดี

<style type="text/css">body {background-image: url(URLของรูป) ;background-attachment:fixed; background-repeat: no-repeat; }</style>

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

<style type="text/css">body {background-image: url(URLของรูป) ;background-attachment:fixed; background-repeat:repeat; } </style>

แบบที่ 3 พื้นหลังเลื่อนตามหน้าเว็บ(เลื่อนตามสกรอล์บาร์)และทำซ้ำๆไปเรื่อยๆเหมาะกับ รูปภาพขนาดเต็มจอพอดี

<style type="text/css">body {background-image: url(URLของรูป) ;background-attachment:scoll;background-repeat:repeat; }</style>

แบบที่ 4 พื้นหลังเลื่อนตามหน้าเวบ แต่ไม่ทำซ้ำ เหมาะกับ รูปภาพขนาดเล็ก ที่มาเรียงต่อๆกันจนเต็มจอ

<style type="text/css">body {background-image: url(URLของรูป) ;background-attachment:scoll;background-repeat: no-repeat; }</style>

หมายเหตุ – การนำโค้ดภาพพื้นหลังมาวางที่ Script Area โค้ดจะแสดงผลในทุกหน้า หากต้องการให้ภาพพื้นหลังแสดงแตกต่างกันในแต่ละหน้ามีเทคนิคในการทำดังนี้ค่ะ

1. ห้ามใส่โค้ดภาพพื้นหลังใน Script Area เพราะโค้ดที่นี่จะแสดงผลในทุกหน้า

2. นำโค้ดภาพพื้นหลัง โค้ดนี้
<style>body{background-attachment: fixed;background-image:url("URL ภาพพื้นหลัง");}</style>

วางไว้ในขั้นตอนการเขียนบล็อกใหม่ทุกบล็อกค่ะ แล้วก็อย่าลืมเปลี่ยน url ของภาพใหม่ทุกๆ ครั้งนะค่ะ

วันนี้ขอจบเท่านี้ก่อนนะค่ะ เดี๋ยวตอนหน้ามาคุยกันเรื่องการทำหัวบล็อกค่ะ

Create Date : 22 มิถุนายน 2552

Last Update : 22 มิถุนายน 2552 16:54:14 น.

28 comments

Counter : 2408 Pageviews.

โดย: Thee-T'sMom

วันที่: 22 มิถุนายน 2552 เวลา:17:34:01 น.

ขอบคุณนะคะ พึ่งมี Blog เป็นของตัวเอง แต่ลอง Copy Code แบบที่ 1 ไปวางไว้ที่ จัดการ Script area

ไม่แน่ใจว่าผิดตรงไหน มันไม่ขึ้นอ่ะค่ะ

โดย: Mae (pkgirl2

) วันที่: 22 มิถุนายน 2552 เวลา:17:59:32 น.

ตอบคุณ Mae (pkgirl2) ค่ะ
เป็นที่ url ของรูปค่ะ คุณเอา url ของรูปมาไม่ถูก url ที่คุณเอามาคือ //imagehost.compgamer.com/getimg.php?img=1fb5ae7f71.jpg

จริงๆแล้วต้องเป็น url นี้ค่ะ //61.19.248.235/uploads/1fb5ae7f71.jpg

โดย: maew_kk

วันที่: 22 มิถุนายน 2552 เวลา:18:24:18 น.

ว๊าว ขอบคุณมากค่ะ แวะมาทักทายยามค่ำคืนคร๊า

โดย: บี๋ (Yushi

) วันที่: 22 มิถุนายน 2552 เวลา:20:26:31 น.

ขอบคุณมากเลยค่ะ เพิ่งจะหัดทำบล๊อก แต่ยัง งง อยู่ค่ะ ลองนำไปทำตกแต่งดูก่อนนะคะ

โดย: ไข่หวานน้อย

วันที่: 22 มิถุนายน 2552 เวลา:20:34:17 น.

นับว่าเป็นประโยชน์มากๆ

ขอบคุณนะคะ

โดย: บุปผาลีลาวดี

วันที่: 22 มิถุนายน 2552 เวลา:20:43:57 น.

สวัสดีค๊าพี่แมวเหมียว maew_kk

สบายดีเหรอค๊า..อันนี้เป็นเริ่มต้นที่มี
ประโยชน์มากๆๆเรยยย์ค๊า

คิดถึงตลอดน๊า ฝันดีนะคร้า

โดย: mastana

วันที่: 22 มิถุนายน 2552 เวลา:23:43:01 น.

ดีค่ะคุณเหมียว เป็นประโยชน์กับมือใหม่มากๆ ตอนที่ยายเก๋ายังเป็นมือใหม่ งง มาก ไม่รู้จะเริ่มตรงไหน แต่ก็จดเกือบทุกเรื่องแม้แต่ code แต่งบล๊อค ตอนนั้นก๊อปปี้ก็ไม่เป็น หมดสมุดจดไป สิบเล่ม

เดี๋ยวจะไปบอกในบล๊อคนะค๊ะ ให้เข้ามาเรียนรู้

ขออนุโมทนาด้วยค่ะให้ความรู้เป็นทาน

โดย: ยายเก๋า (ชมพร

) วันที่: 23 มิถุนายน 2552 เวลา:0:30:03 น.

สวัสดีวันสีชมพูค่ะ คุณแมว...

นำความรู้ดี ๆ มาแจกเพื่อนบล๊อกอีกแล้ว
กะเด๋วป้าต้องก๊อปไปเก็บไว้ในแฟ้มอาชญากร...เอ๊ย..แฟ้มส่วนตัว..อิอิ

คุณแมว..ลืมตอบคำถามหลังไมค์ของป้าหรือเปล่าคะ..??..
เห็นส่งแต่การ์ตูนน่ารักมาให้เท่านั้น...

ป้ารอคำตอบอยู่...นะคะ
ขอบคุณ...ค่ะ

โดย: พรหมญาณี

วันที่: 23 มิถุนายน 2552 เวลา:9:32:17 น.

ขอบคุณมากเลยนะคะ แต่ว่า K. Maew ทราบได้อย่างไงค่ะว่า เมย์ ใช้รูปนี้อ่ะค่ะ

โดย: Mae (pkgirl2

) วันที่: 23 มิถุนายน 2552 เวลา:13:04:26 น.

ตอบคุณ Mae (pkgirl2) ค่ะ
แมวใช้วิธี view source code ในบล็อกของคุณค่ะ เลยทำให้รู้ได้ตรงไหนผิดค่ะ

โดย: maew_kk

วันที่: 23 มิถุนายน 2552 เวลา:13:59:43 น.

น่ารักมากมาย...กระจ่างหลายเรื่องเลยค่ะ....
เด๋วพรุ่งนี้จะเข้ามาเยี่ยมใหม่นะค่ะ มีเรื่องถามเยอะมากกกกกกกกกก

โดย: หน่อย (noi&poj

) วันที่: 23 มิถุนายน 2552 เวลา:17:51:34 น.

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

โดย: แม่ปุ้มปุ้ย

วันที่: 23 มิถุนายน 2552 เวลา:20:49:33 น.

อธิบายเข้าใจงง่าย เหมาะกับมือใหม่อย่างเรา
ขอบคุณค่ะ ขอแอดไว้นะคะ

โดย: R_may

วันที่: 23 มิถุนายน 2552 เวลา:22:51:07 น.

ลองทำแล้ว ได้ผลค่ะ
ขอบคุณค่ะ สำหรับคำแนะนำให้มือใหม่หัดเล่น

โดย: aggie_nan

วันที่: 2 กรกฎาคม 2552 เวลา:15:58:45 น.

ขอบคุณคะ
จะลองนำไปใช้ดู

โดย: eng-ice (eng-ice

) วันที่: 4 กรกฎาคม 2552 เวลา:12:20:52 น.

แง่วๆ ก็ยังสงสัยว่า url ไปได้มาอย่างไรน่ะจ่ะ

โดย: siriyakorn

วันที่: 6 กรกฎาคม 2552 เวลา:16:12:20 น.

วิธีเอา url ของภาพ
หากคุณใช้ IE ก็คลิกขวาบนรูป แล้วเลือก Properties ค่ะ
หากคุณใช้ Firefox ก็คลิกขวาบนรูป แล้วเลือกคัดลอกที่ตั้งภาพค่ะ

โดย: maew_kk

วันที่: 7 กรกฎาคม 2552 เวลา:8:44:52 น.

ขอบคุณค่ะ..พึ่งหัดทำbg ได้ข้อมูลดีๆไปแต่งเยอะเลยค่ะ

โดย: แม่น้ำตาล

วันที่: 9 กรกฎาคม 2552 เวลา:10:58:08 น.

อธิบายดีจังค่ะ เข้าใจง่าย
ขอบคุณนะคะ

โดย: LeaDGlasS

วันที่: 15 กรกฎาคม 2552 เวลา:14:57:14 น.

รับหลังไมค์ด้วยนะคะ

โดย: siriyakorn

วันที่: 27 กรกฎาคม 2552 เวลา:18:44:00 น.

อุ๊ย! ขอโทษค่ะ
พิมพ์ผิดคน

ขอโทษๆๆๆๆๆ

โดย: siriyakorn

วันที่: 27 กรกฎาคม 2552 เวลา:18:45:02 น.

มีประโยชน์และละเอียดดีมากเลยครับ
กำลังงมโข่งเลยครับ

โดย: อยาก 14 อีกครั้ง (A-DASH

) วันที่: 14 ตุลาคม 2552 เวลา:19:38:23 น.

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

โดย: AnnsCrafts

วันที่: 7 พฤษภาคม 2553 เวลา:1:18:48 น.

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

โดย: parisa_p

วันที่: 19 กันยายน 2553 เวลา:10:58:41 น.

ขอบคุณมากค่ะ เพิ่งจะเริ่มหัดแต่ง มีประโยชน์มากๆเลย

โดย: สวัสดี..ตัวเธอ

วันที่: 26 พฤศจิกายน 2553 เวลา:0:11:57 น.

ขอบคุณมากเลยค่ะ
เพิ่งหัดทำบล็อกค่ะ..หยิบไปหลายอย่างเลยค่ะ
เริ่มทำได้บ้างแล้วค่ะแต่ว่ายังงง ๆ อยู่เยอะเลยค่ะ

โดย: สาวพลอย (สาวพลอย

) วันที่: 25 มิถุนายน 2554 เวลา:15:55:01 น.

อ่านแล้วเข้าใจง่ายค่ะ จะลองทำดูนะคะ

โดย: แม่พีวีซี (แม่พีวีซี

) วันที่: 16 กรกฎาคม 2555 เวลา:13:03:05 น.