แพรว

                                                                          พื้นหลังสวยมาแจก
                
                                             
  

ตัวอย่างการใช้งาน Script/Code ในหน้าไดอารี่

การเปลี่ยนสีตัวอักษร

การเปลี่ยนสีตัวอักษรในกล่องต่างๆ เช่น ในกล่องเจ้าของไดอารี่ กล่องปฏิทิน ... สามารถใส่โค้ดดังนี้

<style>
.pjblock { color:#ee0000; }   /* ตัวที่ขีดเส้นใต้คือรหัสสี สามารถเปลี่ยนเป็นสีอื่นๆได้ */
</style>

การเปลี่ยนสีลิ้ง

การเปลี่ยนสีลิ้งสามารถใส่โค้ดดังนี้

<style>
.pjblock a { color:#0000dd; }   /* ตัวที่ขีดเส้นใต้คือรหัสสีลิ้ง สามารถเปลี่ยนเป็นสีอื่นๆได้ */
.pjblock a:hover { color:#d119a6; }   /* ตัวที่ขีดเส้นใต้คือรหัสสีลิ้งเมื่อเอาเม้าส์ไปชี้ สามารถเปลี่ยนเป็นสีอื่นๆได้ */
</style>

การเปลี่ยนสีชื่อกล่องต่างๆ

การเปลี่ยนสีชื่อกล่องต่างๆ เช่น กล่อง เจ้าของไดอารี่, สถิติผู้เยี่ยมชม, ไดอารี่เพื่อนบ้าน สามารถใส่โค้ดดังนี้

<style>
.pjblock h3 { color:#ee0000; }   /* ตัวที่ขีดเส้นใต้คือรหัสสีชื่อกล่อง สามารถเปลี่ยนเป็นสีอื่นๆได้ */
</style>

การใส่สี Background

หากต้องการใส่สี Background ในกล่องต่างๆ หรือในพื้นที่หลักในหน้าไดอารี่ สามารถใช้โค้ดดังนี้

<style>
.pjblock { background-image:none; }   /* นำ Background โปร่งแสงออกจากกล่องต่างๆ */
.pjblock { background-color:#ffc8ff; }   /* ตัวที่ขีดเส้นใต้คือรหัสสี Background ของกล่องต่างๆ สามารถเปลี่ยนเป็นสีอื่นๆได้ */
.maintable { background-image:none; }   /* นำ Background โปร่งแสงออกจากพื้นที่หลัก */
.maintable { background-color:#ffe8ff; }   /* ตัวที่ขีดเส้นใต้คือรหัสสี Background ของพื้นที่หลัก สามารถเปลี่ยนเป็นสีอื่นๆได้ */
</style>

การตกแต่งเส้นขอบของกล่องต่างๆ

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

<style>
.pjblock {
border-width:2px;   /* ตัวที่ขีดเส้นใต้คือความหนาของเส้นขอบกล่อง สามารถเปลี่ยนเป็นเลขอื่นๆได้ตั้งแต่ 1-10 */
border-style:dashed;   /* ตัวที่ขีดเส้นใต้คือรูปแบบของเส้นขอบกล่อง สามารถใส่เป็น solid , dashed , dotted , inset , outset */
border-color:#d119a6;   /* ตัวที่ขีดเส้นใต้คือรหัสสีเส้นขอบกล่อง สามารถเปลี่ยนเป็นสีอื่นๆได้ */
}
</style>

การใส่โค้ดเส้นขอบกล่องต่างๆ สามารถใส่เป็นแบบย่อๆ ได้ เช่น จากโค้ดด้านบนนี้ สามารถย่อได้เป็น

<style>
.pjblock { border:2px dashed #d119a6; }   /* ใส่ ขนาดเส้นขอบ รูปแบบเส้นขอบ สีเส้นขอบ ตามลำดับ */
</style>

การใส่รูป Background ให้กล่องต่างๆ

<style>
.pjblock { background-image:url('http://diary.postjung.com/image/default-bg.jpg'); }   /* ตัวที่ขีดเส้นใต้คือ URL ของรูป Background สามารถใช้ URL อื่นๆได้ */
</style>

การตกแต่งกล่อง Comment

การตกแต่งกล่อง Comment สามารถทำได้เช่นเดียวกับการตกแต่งกล่องต่างๆ ข้างต้น เพียงแต่ เปลี่ยนโค้ดจาก .pjblock เป็น .spcm .xcm เช่นการใส่เส้นขอบ, ใส่สี Background และตกแต่งตัวอักษรในกล่อง Comment มีโค้ดดังนี้

<style>
.spcm .xcm { border:2px dashed #d119a6; }   /* ใส่ ขนาดเส้นขอบ รูปแบบเส้นขอบ สีเส้นขอบ ตามลำดับ */
.spcm .xcm { background-color:#ffe8ff; }   /* ตัวที่ขีดเส้นใต้คือรหัสสี Background ของกล่อง Comment สามารถเปลี่ยนเป็นสีอื่นๆได้ */
.spcm .xcm { color:#0000bb; }   /* ตัวที่ขีดเส้นใต้คือรหัสสีตัวอักษรในกล่อง Comment สามารถเปลี่ยนเป็นสีอื่นๆได้ */
.spcm .xcm a { color:#dd0000; }   /* ตัวที่ขีดเส้นใต้คือรหัสสีลิ้งในกล่อง Comment สามารถเปลี่ยนเป็นสีอื่นๆได้ */
.spcm .xcm a:hover { color:#008800; }   /* ตัวที่ขีดเส้นใต้คือรหัสสีลิ้งเมื่อเอาเม้าส์ไปชี้ ในกล่อง Comment สามารถเปลี่ยนเป็นสีอื่นๆได้ */
</style>

การตกแต่งเฉพาะในแต่ละกล่อง

สมาชิกสามารถตกแต่งเฉพาะในแต่ละกล่องได้ เช่นอยากให้กล่องเจ้าของไดอารี่มี Background อย่างหนึ่ง และให้กล่องปฏิทินมี Background อีกอย่างหนึ่ง สามารถตกแต่งได้เช่นเดียวกับการตกแต่งกล่องต่างๆ ข้างต้น โดยเปลี่ยนโค้ดดังนี้

• หากต้องการตกแต่งกล่อง "เจ้าของไดอารี่" ให้เปลี่ยนโค้ดจาก .pjblock เป็น .diaryowner
• หากต้องการตกแต่งกล่อง "ปฏิทิน" ให้เปลี่ยนโค้ดจาก .pjblock เป็น .diarycal
• หากต้องการตกแต่งกล่อง "ไดอารี่วันอื่นๆ" ให้เปลี่ยนโค้ดจาก .pjblock เป็น .diarylist
• หากต้องการตกแต่งกล่อง "สถิติผู้เยี่ยมชม" ให้เปลี่ยนโค้ดจาก .pjblock เป็น .diarystat
• หากต้องการตกแต่งกล่อง "ไดอารี่เพื่อนบ้าน" ให้เปลี่ยนโค้ดจาก .pjblock เป็น .diaryfnd
• หากต้องการตกแต่งกล่อง "อัลบัมโหวต" ให้เปลี่ยนโค้ดจาก .pjblock เป็น .diaryalbumvote
• หากต้องการตกแต่งกล่อง "ไดอารี่ที่อัพเดทล่าสุด" ให้เปลี่ยนโค้ดจาก .pjblock เป็น .diaryupdate
• หากต้องการตกแต่งกล่องเนื้อหาไดอารี่ ให้เปลี่ยนโค้ดจาก .pjblock เป็น .diarybody
• หากต้องการตกแต่งกล่องข้อความต่อท้ายไดอารี่ ให้เปลี่ยนโค้ดจาก .pjblock เป็น .diarytail

ตัวอย่างเช่น หากต้องการใส่รูปพื้นหลังให้กล่องปฏิทินกล่องเดียว สามารถใส่โค้ดดังนี้

<style>
.diarycal { background-image:url('http://diary.postjung.com/image/default-bg.jpg'); }   /* ตัวที่ขีดเส้นใต้คือ URL ของรูป Background สามารถใช้ URL อื่นๆได้ */
</style>

การใส่ Head ไดอารี่

การใส่ Head ไดอารี่ สามารถใช้รูปทั่วไป หรือรูปเคลื่อนไหวก็ได้ ความกว้างไม่เกิน 1000 pixel (น้อยกว่า 1000 ก็ได้) ความสูงไม่จำกัด โดยใส่โค้ดดังนี้

<style>
#diarycover {
padding:60px 0 0 0;   /* ตัวที่ขีดเส้นใต้คือความสูงของรูปที่จะนำมาใช้เป็น Head ไดอารี่ */
background-image:url('http://postjung.com/pic-tem/theme5/logo.png');   /* ตัวที่ขีดเส้นใต้คือ URL ของรูป สามารถใช้ URL อื่นๆได้ */
background-position:top center;   /* ตัวที่ขีดเส้นใต้คือตำแหน่งของ Head สามารถใส่เป็น top left, top center, top right */
background-repeat:no-repeat;   /* ตัวที่ขีดเส้นใต้คือตัวกำหนดว่าแสดงรูปซ้ำหรือไม่ สามารถใส่เป็น no-repeat, repeat-x */
}
</style>

Code ด้านบน อาจนำมารวมกันไว้ในบรรทัดเดียวกันดังนี้

<style>
#diarycover { padding:60px 0 0 0; background-image:url('http://postjung.com/pic-tem/theme5/logo.png'); background-position:top center; background-repeat:no-repeat; }
</style>

การทำตัวอักษรห่าง

การทำตัวอักษรให้เว้นระยะห่างกัน สามารถใช้โค้ดช่วยได้ โดยไม่ต้องนั่งพิมพิ์ไปเคาะวรรคไป เช่นต้องการให้ตัวหนังสือในกล่องต่างห่างกัน ใส่โค้ดดังนี้

<style>
.pjblock { letter-spacing:5px; }   /* ตัวที่ขีดเส้นใต้คือระยะห่างระหว่างตัวอักษร สามารถใส่ตัวเลข 1-10 */
</style>

หรือหากต้องการให้ตัวอักษรในกล่องเนื้อหาไดอารี่ห่าง เพียงกล่องเดียว สามารถใส่โค้ดดังนี้

<style>
.diarybody { letter-spacing:5px; }   /* ตัวที่ขีดเส้นใต้คือระยะห่างระหว่