Bloggang.com : มุมมองที่สาม

ถ้ายังงงเรื่องโค้ดบล็อก อ่านนี่!

ขอบคุณเพื่อนๆ ที่แวะเข้ามาเยี่ยมชม แล้วก็ขอโทษนักแต่งบล็อกมือใหม่ทุกคนด้วยที่ทำให้งงหนัก หลังจากอ่าน "เบื้องหลังบล็อกที่คุณเห็น" ไปแล้ว

ไม่อยากให้บรรดามือใหม่ถอดใจเรื่องการแต่งบล็อกกันไปก่อน วันนี้เลยตั้งใจมาเขียนเพิ่มเติม เผื่อว่าจะช่วยให้หายงงกันได้บ้าง
เพราะงั้นมาเริ่มตั้งแต่ขั้นแรกเลยละกันเนอะ

ขั้นตอนที่ 1 เปิดหน้า "จัดการ-แก้ไข Blog" ขึ้นมา

ขั้นตอนที่ 2 เลือกหัวข้อ "จัดการ Script Area" จากคำสั่งฝั่งซ้าย จะปรากฏหน้าวางโค้ด

ขั้นตอนที่ 3 วางโค้ดข้างล่างนี้ ลงไปในพื้นที่ว่าง (ส่วนกรอบสีแดง)

**อย่าลืมแปลงโค้ดให้เป็นอย่างที่ต้องการก่อน
ดูรายละเอียดแต่ละโค้ดใน"หน้านี้"

โค้ดที่1: วงเล็บเปิดscriptวงเล็บปิดdocument.images[0].src = "//แทนด้วยลิงค์ของคุณ"วงเล็บเปิด/scriptวงเล็บปิด

โค้ดที่2: วงเล็บเปิดstyleวงเล็บปิดbody{background-image:url("//แทนด้วยลิงค์ ของคุณ");}วงเล็บเปิด/styleวงเล็บปิด

โค้ดที่3: วงเล็บเปิดstyleวงเล็บปิดbody{background-attachment: fixed;}วงเล็บเปิด/styleวงเล็บปิด

โค้ดที่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วงเล็บปิด

โค้ดที่5: วงเล็บเปิดstyleวงเล็บปิดTABLE {background-color: transparent;border-style: none;border-spacing: none;}TD {border: none;border-color: none;background: none;}

โค้ดที่6: วงเล็บเปิดSTYLE type="text/css"วงเล็บปิดtextarea{width:450;height:240; background:url("//ลิงค์ภาพของคุณ");color="blue"; font-family : tahoma; font-size:14pt;วงเล็บเปิด/STYLEวงเล็บปิด

ขั้นตอนที่ 4 กดปุ่ม "save" ด้านล่างพื้นที่วางโค้ด แล้วลองกด Preview หน้าเว็บบล็อกดูว่าได้อย่างที่ต้องการมั้ย (ด้านล่าง My Blog)

เท่านี้ เราก็ได้หน้าบล็อกสมอย่างใจแล้ว (รึเปล่า)

ส่วนคนที่ต้องการให้พื้นหลังส่วนเนื้อหาเป็นรูปที่ต้องการ
(คือพื้นที่ส่วนกลางของบล็อก อย่างในบล็อกนี้จะเห็นเป็นพื้นสีฟ้า ไอคอน Third Eyes View) ให้ทำตามขั้นตอนต่อไปนี้

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

ขั้นตอนที่ 1 ไปที่แถบคำสั่งด้านซ้าย คลิก "เพิ่มกลุ่มบล็อกใหม่" จะปรากฏหน้า "จัดการ Group Blog"

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

ขั้นตอนที่ 3คลิกเรื่องกลุ่มย่อยที่ช่อง "กำหนดกลุ่มย่อย"

ขั้นตอนที่ 4 คลิกปุ่ม "สร้าง group blog" ด้านล่าง จะได้หัวข้อบล็อกตามที่ต้องการ (ตัวอย่างด้านล่าง)

ขั้นตอนที่ 5 ไปที่แถบคำสั่งด้านซ้ายอีกรอบ คลิก "เขียน blog ใหม่" จะปรากฏหน้า "เขียน Blog" ขึ้นมา

ขั้นตอนที่ 6 วางโค้ดลงไปในพื้นที่ว่าง

**อย่าลืมแปลงโค้ดให้เป็นอย่างที่ต้องการก่อน
ดูรายละเอียดแต่ละโค้ดใน"หน้านี้"

โค้ดที่7: วงเล็บเปิดtable style="background: url(//ลิงค์ภาพของคุณที่อยากใช้เป็นพื้นหลังส่วน เนื้อหา);";cellpadding="10" cellspacing="20"วงเล็บปิด
วงเล็บเปิดtrวงเล็บปิดวงเล็บเปิดtdวงเล็บปิด
พื้นที่ส่วนนี้เอาไว้พิมพ์เนื้อหา บทความ
วงเล็บเปิด/tdวงเล็บปิดวงเล็บเปิด/trวงเล็บปิดวงเล็บ เปิด/tdวงเล็บปิดวงเล็บเปิด/trวงเล็บปิด

ขั้นตอนที่ 7 กดปุ่ม "save" แล้วคลิก preview บล็อกกันดู

ขั้นตอนที่ 8 ถ้าพอใจแล้ว อย่าลืมกลับไปตั้งค่าบล็อกจาก "Private" เป็น "Public" กันด้วยนะจ๊ะ คนที่แวะเข้ามาจะได้อ่านกันได้ทุกคน

เท่านี้ก็เป็นอันว่าเสร็จสิ้นการปรับแต่งบล็อกตามแบบฉบับของ "มุมมองที่สาม - Third EyeS VieW"

หวังว่าคงช่วยให้เข้าใจได้มากขึ้นนะ สำหรับคนที่งงๆ (เอ...หรือว่ายิ่งมึนกว่าเดิม)

Create Date : 17 เมษายน 2553
12 comments

Last Update : 17 เมษายน 2553 17:44:50 น.

Counter : 766 Pageviews.

Share
Tweet

เพิ่มเติมกันนิดนึง
โค้ดที่ลงไว้ในบล็อกนี้ เป็นโค้ดที่ยังก๊อปเอาไปใช้ไม่ได้ทันที ต้องเปลี่ยนให้กลายเป็นโค้ดที่สมบูรณ์ซะก่อน ดังนี้

มีวิธีเปลี่ยนง่ายๆ ก็คือ
- ก๊อปโค้ดที่ต้องการ วางโค้ดทั้งหมดลงไปใน Word
- กด Ctrl+F แถบคำสั่ง "ค้นหาและแทนที่" จะขึ้นมา
- เลือกแถบแทนที่
- พิมพ์คำว่า "วงเล็บเปิด" ลงไปในช่อง "สิ่งที่ค้นหา" พิมพ์ตัว "<" ลงในช่อง "แทนที่ด้วย"
- กด Enter
- พิมพ์คำว่า "วงเล็บปิด" ลงไปในช่อง "สิ่งที่ค้นหา" พิมพ์ตัว ">" ลงในช่อง "แทนที่ด้วย"
- กด Enter เท่านี้ก็เอาโค้ดไปใช้ได้แล้ว

ที่ต้องใช้คำว่า "วงเล็บเปิด-วงเล็บปิด" แทนสัญลักษณ์จริง เพราะตัวบล็อกมันไม่ยอมให้วางโค้ดในส่วนเนื้อหาบล็อก เลยต้องทำให้ลำบากไปเปลี่ยนกันเอง ต้องขอโทษด้วย

ส่วนวิธีการแปลงรายละเอีียดแต่ละโค้ด คงต้องรบกวนให้ตามไปอ่านเอาเองนะ
"คลิกเลย"

โดย: มุมมองที่สาม - Third EyeS VieW 17 เมษายน 2553 16:58:32 น.

ลืมบอกไปว่า ในส่วน "ปรับแต่งเว็บ Blog" - "เลือกสไตล์ของเว็บ Blog" (แถบคำสั่งด้านซ้าย)
รูปแบบที่เลือกคือ Diary Style - Theme อิสระ เพื่อให้สามารถปรับทุกอย่างในหน้าบล็อกได้เอง

โดย: มุมมองที่สาม - Third EyeS VieW 17 เมษายน 2553 17:13:57 น.

วุ๊ย ดีค่ะ ดีดี

ละเอียดยิบเลยค่ะ

ขอบคุณนะคะ

โดย: ปลานิลแก้ว IP: 110.49.38.239 17 เมษายน 2553 17:14:25 น.

ขอบคุณมากจ้าได้รู้เพิ่มอีกแล้วเพิ่งหัดเล่นเหมือนกัน

โดย: luk ka jeab 17 เมษายน 2553 17:31:28 น.

โดย: นนนี่มาแล้ว 17 เมษายน 2553 22:40:20 น.

ตามมาอ่านจากบล็อคนู้นค่ะ^^

โดย: XODA 18 เมษายน 2553 13:28:36 น.

แวะมาทักทายค่ะ มีความสุขมากๆ นะคะ

โดย: Elbereth 22 เมษายน 2553 16:09:01 น.

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

โดย: destiny_ying (destiny_ying ) 14 พฤษภาคม 2553 1:16:10 น.

เจ้าของบล็อกหน้าใหม่สวัสดีค่ะ

โดย: คะน้าหน้าใส 21 พฤษภาคม 2553 15:41:47 น.

คุณ destiny_ying - อ่านแล้วไม่รับประกันว่าจะงงกว่าเดิมรึเปล่านะ เหอๆ

คุณ คะน้า หน้าใส - ยินดีที่ได้รู้จักจ้ะ

โดย: มุมมองที่สาม - Third EyeS VieW 4 มิถุนายน 2553 3:42:28 น.

เย้ เย้ ทำเป็นแล้ว ขอบคุณมากๆค่ะ

โดย: ไวน์องุ่น 22 มิถุนายน 2553 15:03:20 น.

แล้วมีวิธีตกแต่ง เพิ่มเติมรูป ทางด้านซ้าย หรือขวา ของ blog มั้ยคะ

โดย: apple.007 11 กรกฎาคม 2553 22:16:04 น.