เบื้องหลังบล็อกที่คุณเห็น
กว่าจะปรับบล็อกให้เป็นอย่างที่ต้องการได้ เล่นเอาเหนื่อยเหมือนกัน...เนอะ
นั่งปรับโค้ดไปมา ท้อแล้วท้ออีกว่าจะไม่ได้อย่างที่คิดภาพเอาไว้ แต่แล้วความพยายามสามวันก็เป็นผล (อย่างที่เห็นนี่แหละ)
ก๊อปโค้ด ตามอ่านคำแนะนำจากบล็อกเกอร์ท่านอื่นๆ มาก็เยอะ เลยคิดว่าถึงเวลาที่ควรจะเป็นฝ่ายให้บ้าง
ถึงความรู้เรื่องบล็อกจะมีแค่หางเขียด แต่สำหรับคนที่เริ่มบล็อกใหม่ ถ้าได้เข้ามาอ่าน คิดว่าคงช่วยให้การเริ่มต้นง่ายขึ้น
โค้ดที่เอามาฝากในบทความนี้ ไม่ได้ก๊อปทุกรูปแบบมาวางไว้ให้ได้เลือกอย่างที่บล็อกเกอร์ผู้แนะนำเรื่องการแต่งบล็อกเค้าทำกัน เพราะส่วนตัวแล้วบางอันก็ไม่เข้าใจว่าอันไหนใช้ยังไง
เลยจัดการเอาโค้ดของตัวเองมาเฉลยให้รู้กันไปเลยดีกว่าว่า ที่เห็นๆ อยู่บนหน้าบล็อก "มุมมองที่สาม - Third EyeS View" แห่งนี้ มันมีที่มาที่ไปยังไง
ขอข้ามขั้นตอนการสมัครสมาชิกไป แล้วมาดูส่วน "จัดการ-แก้ไข Blog" กันเลย
(ผลลัพธ์ของโค้ดแต่ละอัน คือภาพที่แสดงอยู่ด้านบน)
 ก่อนอ่านโค้ด หรือก๊อปไปใช้ เป็นอันตกลงกัีนก่อนว่า
ถ้าเห็น วงเล็บเปิด หมายความว่า แทนเครื่องหมาย <
และถ้าเห็น วงเล็บปิด หมายความว่า แทนเครื่องหมาย >
ขอโทษด้วยจริงๆ ที่ต้องใช้อักษรย่อแทน ทำให้ลำบาก เพราะโค้ดพวกนี้ ไม่อนุญาตให้วางในส่วนเนื้อหา
เพราะฉะันั้นถ้าจะก๊อปโค้ดเหล่านี้ไปใช้ อย่าลืมเปลี่ยนซะล่ะ
มีวิธีเปลี่ยนง่ายๆ ก็คือ
- ก๊อปโค้ดที่ต้องการ วางโค้ดทั้งหมดลงไปใน Word
- กด Ctrl+F แถบคำสั่ง "ค้นหาและแทนที่" จะขึ้นมา
- เลือกแถบแทนที่
- พิมพ์คำว่า "วงเล็บเปิด" ลงไปในช่อง "สิ่งที่ค้นหา" พิมพ์ตัว "<" ลงในช่อง "แทนที่ด้วย"
- กด Enter
- พิมพ์คำว่า "วงเล็บปิด" ลงไปในช่อง "สิ่งที่ค้นหา" พิมพ์ตัว ">" ลงในช่อง "แทนที่ด้วย"
- กด Enter เท่านี้ก็เอาโค้ดไปใช้ได้แล้ว
"ปรับแต่งเว็บ Blog"
พื้นที่พิมพ์ Slogan เว้นว่างเอาไว้ เพราะมุมบนสุดของบล็อก ทำสโลแกนติดเอาไว้กับรูปอยู่แล้ว
รูปแบบที่เลือกคือ Diary Style - Theme อิสระ เพื่อให้สามารถปรับทุกอย่างในหน้าบล็อกได้เอง
"จัดการ Script Area"
พื้นที่ส่วนนี้ใช้วางโค้ดเพื่อกำหนดรูปแบบบล็อกให้เป็นอย่างต้องการ และโค้ดข้างล่างนี้คือตัวสร้างรูปแบบบล็อกนี้ทั้งหมด
ว่าแล้วก็มาทำความรู้จักโค้ดแต่ละตัวกันเลย
โค้ดที่1: วงเล็บเปิดscriptวงเล็บปิดdocument.images[0].src = "//แทนด้วยลิงค์ของคุณ"วงเล็บเปิด/scriptวงเล็บปิด
ตัวนี้คือโลโก้ที่ทำขึ้นมาเอง ใช้วางแทนโลโก้ของบล็อกแก๊งค์ที่กำหนดไว้ให้
Dimension : กว้าง 1082 และยาว 132 pixel
(บอกค่าเอาไว้สำหรับคนที่สนใจทำโลโก้เองจาก Photoshop จะได้กะขนาดกันถูก)
โค้ดที่2: วงเล็บเปิดstyleวงเล็บปิดbody{background-image:url("//แทนด้วยลิงค์ของคุณ");}วงเล็บเปิด/styleวงเล็บปิด
ตัวนี้คือพื้นหลังที่สร้างขึ้นมาเองอีกเช่นกัน ขนาดภาพจริงตอนทำ Photoshop คือ Dimension : 500 X 500 pixel
แต่พอเอารูปภาพอัพโหลดไว้ แล้วก๊อปลิงค์มาแปะ จะได้ภาพเล็กๆ ต่อกัน จนกลายเป็นพื้นหลังขนาดใหญ่ของบล็อก
โค้ดที่3: วงเล็บเปิดstyleวงเล็บปิดbody{background-attachment: fixed;}วงเล็บเปิด/styleวงเล็บปิด
โค้ดนี้ใช้ fix พื้นหลังให้อยู่กับที่ เวลาเลื่อนแถบขึ้นลง จะมีแค่เนื้อหา ตัวหนังสือ รายละเอียดอย่างอื่นในเว็บที่เลื่อนตาม ส่วนพื้นหลังอยู่ที่เดิม
โค้ดข้างล่างนี้ช่วยให้กล่องคอมเม้นท์นับจำนวนคนคอมเม้นท์ได้ แถมยังใส่ลูกเล่นเส้นขอบกล่องตามใจชอบได้ด้วย
โค้ดที่4: วงเล็บเปิดscriptวงเล็บปิดHTML = document.body.innerHTML; CommentCount = 0; var reg = new RegExp("-- Comment", "gm"); while(reg.test(HTML))CommentCount++; CommentCount--; for(i=1; iวงเล็บเปิด=CommentCount; i++){ originalHtml = document.getElementById( i ).innerHTML; beforeHtml = 'วงเล็บเปิดfieldset style="border: dashed 2px; padding:"วงเล็บปิด วงเล็บเปิดlegend align=center style="border: #3A5FCD solid 1px; padding:2; background:#6699CC"วงเล็บปิด วงเล็บเปิดfont color= size=1>มุมมองที่ ' + i + ' วงเล็บเปิดfontวงเล็บปิดวงเล็บเปิด/legendวงเล็บปิด'; document.getElementById( i ).innerHTML = beforeHtml + originalHtml; }วงเล็บเปิด/scriptวงเล็บปิด
ส่วนนี่คือลูกเล่นของกล่องคอมเม้นท์
dashed 2px ที่อยู่ในโค้ด คือโค้ดกำหนดลักษณะของกรอบ อย่างที่เห็น โค้ดที่สั่งให้กรอบเป็นเส้นประ
2px ที่ระบุไว้คือขนาดของเส้น เปลี่ยนเลขเพิ่มลดได้ตามใจชอบ เช่น 1px หรือ 3px
dashed คือรูปแบบของกรอบ สามารถเปลี่ยนได้ แค่เปลี่ยนเป็นคำเหล่านี้แทน dotted, dashed,solid, groove, ridge, inset, outset, double
(ส่วนผลจะออกมาเป็นไง ลอง save แล้วเปิดหน้าบล็อกดู)
background:#6699CC คือค่ากำหนดสีพื้นหลังของ "มุมมองที่1", "มุมมองที่2" ที่เป็นสีฟ้าๆ น่ะแหละ (ซึ่งจะเป็นสีเดียวกันไปเรื่อยๆ เป็นอัตโนมัติ)
มุมมองที่ คำนี้สามารถเปลี่ยนเป็นคำที่คุณต้องการให้ปรากฏ แล้วจะต่อท้ายด้วยตัวเลขของผู้เข้ามาคอมเม้นท์ เช่น "มุมมองที่1", "มุมมองที่2"
โค้ดที่5: วงเล็บเปิดstyleวงเล็บปิดTABLE {background-color: transparent;border-style: none;border-spacing: none;}TD {border: none;border-color: none;background: none;}
โค้ดนี้ไม่ต้องปรับอะไร ใช้ได้เลย จะช่วยซ่อนเส้นตารางแบ่งส่วนต่างๆ ของบล็อกได้
เลื่อนลงไปล่างบทความนี้ จะเห็นพื้นที่ส่วนคอมเม้นท์
ถ้าสังเกตให้ดีจะรู้ว่ามันต่างจากปกติที่พื้นหลัง (พื้นที่ให้พิมพ์ตัวหนังสือเพื่อเม้นท์)
พื้นหลังสีฟ้าๆ ที่เห็น จริงๆ แล้วภาพเต็มๆ ของมันคือภาพข้างล่างนี้แหละ
ภาพพื้นหลังที่ทำขึ้นมา ตอนทำ Photoshop กำหนด Dimension : 500 X 500 pixel เวลาแสดงภาพเลยทำให้โชว์รายละเอียดได้ไม่เต็มสัดส่วน
คนที่อยากให้ภาพพอดี คิดว่าควรกำหนดให้อยู่ที่ 450 X 240 ส่วนโค้ดก็ตามนี้เลย
โค้ดที่6: วงเล็บเปิดSTYLE type="text/css"วงเล็บปิดtextarea{width:450;height:240;background:url("//ลิงค์ภาพของคุณ");color="blue"; font-family : tahoma; font-size:14pt;วงเล็บเปิด/STYLEวงเล็บปิด
ส่วนพื้นหลังสีฟ้าๆ เบื้องหลังเนื้อหาที่คุณกำลังอ่านอยู่นี่ ก็เกิดจากการทำรูปเอง
อีกนั่นแหละ
ถ้ามีภาพที่อยากใช้เป็นพื้นหลังเหมือนกัน ลองดูโค้ดนี้ที่ชั้นใช้อยู่
(วางโค้ดนี้ลงในส่วนรายละเอียดบทความ หลังจากกำหนดกลุ่มบล็อกและสร้างบทความแล้ว)
โค้ดที่7: วงเล็บเปิดtable style="background: url(//ลิงค์ภาพของคุณที่อยากใช้เป็นพื้นหลังส่วนเนื้อหา);";cellpadding="10" cellspacing="20"วงเล็บปิด
วงเล็บเปิดtrวงเล็บปิดวงเล็บเปิดtdวงเล็บปิด
พื้นที่ส่วนนี้เอาไว้พิมพ์เนื้อหา บทความ
วงเล็บเปิด/tdวงเล็บปิดวงเล็บเปิด/trวงเล็บปิดวงเล็บเปิด/tdวงเล็บปิดวงเล็บเปิด/trวงเล็บปิด
โค้ดที่ชั้นใช้อยู่ ไม่น่าจะมีมากกว่านี้แล้ว ไม่รู้บทความนี้จะช่วยอะไรได้บ้างรึเปล่า เพราะคนเขียนเองก็งงๆ อยู่เหมือนกัน
ถ้าอยากได้ความกระจ่างเรื่องการแต่งบล็อกและลูกเล่นแบบละเอียดยิบ แนะนำให้เข้าไปดูบล็อกของคุณครูบล็อกเกอร์ผู้มอบโค้ดดีๆ ฝากเอาไว้ให้ทุกคนได้เข้าไปจิ๊กได้ (อย่างทีชั้นทำมาแล้ว)
ตามนี้เลย
++บล็อกป้ามด++++บล็อกคุณดอกพิกุลจะร่วง++++บล็อกคุณรำเพย++++บล็อกคุณ lozocat++
สู้ๆ ต่อไปชาวบล็อกทุกคน
|
| Create Date : 09 เมษายน 2553 |
| Last Update : 17 เมษายน 2553 17:45:31 น. |
|
11 comments
|
| Counter : 739 Pageviews. |
 |
|
| โดย: แมวน้อยๆ IP: 125.15.6.245 วันที่: 9 เมษายน 2553 เวลา:20:07:49 น. |
|
|
|
โดย: chantibha  วันที่: 9 เมษายน 2553 เวลา:20:44:02 น. |
|
|
|
| โดย: ลำน้ำชี วันที่: 10 เมษายน 2553 เวลา:12:33:47 น. |
|
|
|
| โดย: Vannessa วันที่: 12 เมษายน 2553 เวลา:21:05:03 น. |
|
|
|
| โดย: อยากทำบล็อกเป็น IP: 119.31.42.201 วันที่: 13 เมษายน 2553 เวลา:17:29:28 น. |
|
|
|
| โดย: XODA วันที่: 17 เมษายน 2553 เวลา:9:33:07 น. |
|
|
|
|
|
|
|
มุมมองที่สาม - Third EyeS VieW
|
|
|
Location :
กรุงเทพฯ Thailand
[ดู Profile ทั้งหมด]
|
 ฝากข้อความหลังไมค์
 Rss Feed
 ผู้ติดตามบล็อก : 1 คน [?]
|
ถามเอง: ทำไมถึงตั้งนามปากกาว่า "มุมมองที่สาม"
ตอบเอง: ก็ชื่อตัวเองมันไม่เท่เท่าไหร่ (เล็ก)
ถามเอง: ถามจริง
ตอบเอง: อยากพูดถึงมุมมองเรื่องต่างๆ ในฐานะเพศที่สามคนนึง
ถามเอง: นึกว่าจะพูดเฉพาะเรื่องเกี่ยวกับเพศที่สาม
ตอบเอง: ก็ส่วนนึง แต่อยากเขียนเรื่องอื่นด้วย เป็นเพศที่สามก็ไม่ได้หมายความว่าต้องมีความคิดด้านนั้นด้านเดียวนี่นา หรือว่าไง
ถามเอง: แล้วเป็นอะไรในเพศที่สาม
ตอบเอง: คนทั่วไปคิดว่าเป็น "ทอม" แต่เพื่อนๆ เรียกว่า "ตุ๊ด" เพราะแมนไม่พอ บางครั้งก็เรียกตัวเองว่า "ไส้เดือน" เพราะมีคนบอกว่ามันมีหลายเพศในตัวเดียว (ซึ่งไม่รู้จริงรึเปล่า)
ถามเอง: คิดว่าจะเขียนไปถึงเมื่อไหร่
ตอบเอง: ถามว่าจะเขียนได้บ่อยแค่ไหนน่าจะได้คำตอบเร็วกว่ามั้ง ห้าๆ
ถามเอง: อยากบอกอะไรกับคนที่อ่านอยู่
ตอบเอง: ขยันจัง
|
|
|
|
|
|
|
|
|
ก่อนอ่านโค้ด หรือก๊อปไปใช้ เป็นอันตกลงกัีนก่อนว่า 
ดูโปรมากๆนะคะเนี่ยยย
อิอิอิ