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 มาใส่หลัง เครื่องหมาย # มีขาดตกบกพร่องตรงไหนอีกไหมเนี่ย ขอให้สนุกกับการทำธีมครับ |
อ่านดูเองแล้วตาลายมาก ๆ
อ่อลืมบอกไปว่า ต้อง copy code ไปใส่ในช่องสโลแกนนะ
จริง ๆ ใส่ในช่องprofile ก็ได้ แต่ว่าแนะนำให้ใส่ช่องสโลแกนมากกว่า
บรรทัดก่อน </style> ต้องมี } ด้วย
คือมี { ก็ต้องมี } ทุกครั้งนั้
(Blog แรกของ Group นี้)
มาดูดความรู้
เพิ่งเริ่มทำค่ะ
ทำยังไงก้ไม่เป็น
เด๋วกลับไปพยายามอีกรอบ
เชียงใหม่ Thailand
[ดู Profile ทั้งหมด]
Rss Feed
Smember
ผู้ติดตามบล็อก : 1 คน [?]