มีนาคม 2548

 
 
1
2
4
7
8
9
10
11
12
13
14
15
16
17
18
19
21
23
25
27
28
29
30
31
 
 
All Blog
สอนทำ Basic Theme กับเขาบ้าง ^^

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

ยังไงกรุ๊ปนี้ก็ไม่ค่อยมีคนอ่านอยู่แล้ว
เลยลองสอนทำ Theme เล่น ๆ ดีกว่า
HTML เบื้องต้น (ใส่รูป ทำลิงก์) คงจะไม่สอนนะ ยังไงก็มีเครื่องมือให้ใช้ตอนสร้างblog อยู่แล้ว
เรื่อง Javacript ไม่ค่อยถนัดเท่าไหร่ blog เราเลยมีไม่เยอะ
แต่ถ้าเป็นเรื่อง style sheet ก็พอไว้
พอดีได้มีโอกาสศึกษาตอนทำเวบส่งอาจารย์อยู่บ้าง(โดดเรียนบ่อย เลยต้องนั่งมั่วเอาเอง)
อาจจะอธิบายได้ไม่ดีเท่า blog คนอื่นน่ะนะ
แต่ถ้ามีอะไรสงสัยก็มาถามได้เลย
อีกอย่าง เราเอา blog เราเป็นมาตรฐาน ซึ่งลูกเล่นไม่เยอะ เพราะไม่อยากให้โหลดช้า ก็จะสอนแค่นี้ก่อน
แต่ ถ้าจะถามเรื่องอื่น เช่น ใส่เพลงยังไง เปลี่ยนสีลิงก์หรือสีscrollbar ยังไง ก็ถามได้นะ แล้วจะมาตอบ


เริ่มที่เรื่องแรก

Title bar
บางคนที่ไม่ได้แก้ไตเติ้ลบาร์ก็จะเห็นเป็นแบบรูปข้างล่าง คือ มองเห็น code ที่ใส่ไปในช่อง slogan

จริง ๆ แล้ว bloggang เขาทำให้สามารถแก้ไตเติ้ลบาร์ได้แล้ว
ส่วน code ของ title bar ก็คือ

<script>window.document.title="ข้อความที่จะทำเป็นไตเติ้ล" ;</script>

ตัวอย่าง
<script>window.document.title="-+|> [r]yuU[y]a[S]hA <|+";</script>
ก็จะเห็นเป็นแบบนี้


Background
การใส่รูปเป็น background (ที่ทุกคนคงรู้กันหมดแล้ว) code คือ

<script language=javascript>
document.body.background="ที่อยู่ (url) รูปภาพที่จะทำเป็น background"
</script>

ตัวอย่าง
<script language=javascript>
document.body.background="//album.romerun.com/riar/folder/
11178/album/17497/image/357443/pic/original.gif?1109860720"
</script>
ก็จะได้ background อย่างที่เห็นใน blog เรา

Slogan Box

ส่วนนี้ไม่ได้สอน แต่อยากจะแนะนำเฉย ๆ ว่า อย่าใส่รูปที่ใหญ่หรือสูงเกินไปเท่านั้นเอง
(แต่ของเราก็ใส่รูปเยอะ ไปเข้าที่อื่นก็รู้สึกว่า อืม โหลดนานเหมือนกันแฮะ^^")
การใส่ code ตกแต่ง จะเป็น HTML ธรรมดา

Main Box

ถ้า blog ใครมี background เป็นลาย ๆ ล่ะก็ บางทีจะทำให้ตัวหนังสือตรง main box มองไม่ชัดไปด้วย
แนะนำให้ใส่ code ทำสีพื้นเข้าไป จะได้อ่านง่าย จริง ๆ มันเป็นการใส่ตารางหลอก ๆ ไว้ (ซึ่งบางทีเราก็ลืมใส่)

<tr><td bgcolor="สีพื้นที่ต้องการ" width=100% height=100%>

ตัวอย่าง
<tr><td bgcolor="#CCE2FC" width=100% height=100%>
ก็จะได้แบบ main box เรา (คือมองไม่เห็น background ที่เป็นลาย แต่เห็นเป็นสีแทนตรงข้อความบรรทัดแรก)
สำหรับ box ที่ต่อจาก main box เราตั้งชื่อให้เป็น reply box ล่ะกัน ส่วนนั้นเรายังไม่ได้แก้ ไว้แก้แล้วจะมาสอนล่ะกัน

มาถึงหัวข้อสุดท้าย
Comment Box

การใส่รูปภาพในช่องคอมเมนท์บ๊อกซ์ ปรับสีฟอนต์ ขนาดฟอนต์
code จะเป็น style sheet เราจะอธิบายแต่ละบรรทัดนะ

<style> /* เปิด tag (บอกทำไมเนี่ย ^^") */
textarea /* ส่วนที่เป็นช่องให้ใส่ comment */
{
width:300px ; /* ขนาดความกว้างช่อง comment (หน่วยปกติจะเป็น pixel ตั้งเป็น % ก็ได้) */
height:170px; /* ขนาดความสูงช่อง comment (หน่วยเหมือนความกว้าง) */
background-image: url(ที่อยู่รูปที่จะทำเป็น bg); /* ใส่ภาพทำเป็น bg รูปเราตรงนี้สีเข้มไปหน่อย ^^" ลองปรับให้สว่างแล้วมันแสบตา*/
background-color: #CCE2FC; /* สีพื้นก่อนการโหลดภาพ ซึ่งปกติก็ถูกภาพบังอยู่ดี */
background-repeat: no-repeat; /* ให้รูปไม่มีการ tile */
background-attachment:fixed; /* ทำให้รูป bg ไม่เลื่อน */
background-position:center; /* ทำให้รูปภาพอยู่ตรงกลาง (เราไม่ได้ใช้ แต่เอามาให้ดูเฉย ๆ) */
color:"#3767AF"; /* สีตัวอักษร */
font-family : MS Sans Serif; /* แบบอักษร */
font-size:12pt; /* ขนาดอักษร */
font-weight: bold; /* ทำให้เป็นตัวหนา (เราไม่ได้ใช้เหมือนกัน) */
}
input /* ส่วนที่เป็นช่องให้ใส่ชื่อ */
{
background-color: #CCE2FC; /* สีพื้น */
color:"#3767AF"; /* สีอักษร */
font-family : MS Sans Serif; /* แบบอักษร */
font-size:12pt; /* ขนาดอักษร */
</style> /* ปิด tag */

ในส่วนของ style sheet
code บรรทัดไหนไม่ต้องการเนี่ย ก็ไม่จำเป็นต้องใส่ก็ได้
อย่างเช่น เราอยากให้รูปพื้นหลัง tile ก็ตัดบรรทัด background-repeat ทิ้งไปทั้งบรรทัดเลย
หรือถ้าไม่อยากใส่รูปเป็นพื้นหลังก็ลบ background-image ไปทั้งบรรทัดได้เช่นกัน
คือ ไม่ใช้ก็ไม่ต้องใส่ อะไรแบบนั้น

สำหรับ code สี ถ้าไม่รู้จะเลือกสีอะไรก็แนะนำให้เปิด photoshop ลองเลือกสี ดับเบิ้ลคลิกที่สี แล้วดูเลขฐาน 16 ที่อยู่ในกรอบด้านล่าง 6 ตัว copy มาใส่หลัง เครื่องหมาย #

มีขาดตกบกพร่องตรงไหนอีกไหมเนี่ย
ขอให้สนุกกับการทำธีมครับ


Create Date : 06 มีนาคม 2548
Last Update : 7 มีนาคม 2548 0:58:13 น.
Counter : 995 Pageviews.

5 comments
  

อ่านดูเองแล้วตาลายมาก ๆ

อ่อลืมบอกไปว่า ต้อง copy code ไปใส่ในช่องสโลแกนนะ
จริง ๆ ใส่ในช่องprofile ก็ได้ แต่ว่าแนะนำให้ใส่ช่องสโลแกนมากกว่า
โดย: ริวยาฉะ (riar ) วันที่: 7 มีนาคม 2548 เวลา:11:52:20 น.
  
แก้ code นิดนึง เพิ่งเห็นว่าตัวเองพิมพ์ผิด
บรรทัดก่อน </style> ต้องมี } ด้วย
คือมี { ก็ต้องมี } ทุกครั้งนั้
โดย: ริวยาฉะ (riar ) วันที่: 7 มีนาคม 2548 เวลา:23:37:47 น.
  
จะมาบอกว่า EDiT สปอย DN แล้ว
(Blog แรกของ Group นี้)
โดย: [r]yuU[y]a[S]hA (riar ) วันที่: 8 มีนาคม 2548 เวลา:4:02:06 น.
  
มาดูให้ค้า ทำไงเนี้ยไม่เข้าจ๊าย...
โดย: บูม IP: 125.26.188.148 วันที่: 11 พฤษภาคม 2551 เวลา:18:50:43 น.
  
หวัดดีค่ะ
มาดูดความรู้
เพิ่งเริ่มทำค่ะ
ทำยังไงก้ไม่เป็น
เด๋วกลับไปพยายามอีกรอบ
โดย: xoda IP: 125.24.191.206 วันที่: 20 กรกฎาคม 2551 เวลา:11:39:41 น.
ชื่อ :
Comment :
 *ใช้ code html ตกแต่งข้อความได้เฉพาะสมาชิก
 

riar
Location :
เชียงใหม่  Thailand

[ดู Profile ทั้งหมด]
 ฝากข้อความหลังไมค์
 Rss Feed
 Smember
 ผู้ติดตามบล็อก : 1 คน [?]



New Comments
  •  Bloggang.com