พื้นบล็อก
     ก่อนอื่นเราควรทราบขนาดและของรูปแบบของบล็อกกันก่อน  

1.รูปแบบของบล็อกจะแบ่งได้เป็น 2 ส่วนดังนี้

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

  1.2 ส่วนของการแสดงผล  ภายในกรอบเส้นสี่เหลี่ยมซึ่งจะแบ่งออกเป็นสี่ส่วนหลักดังนี้

 1.2.1 ส่วนหัว มีความกว้างเท่ากับตัวบล็อกคือประมาน 1000 px; ความสูง 100 px;

 1.2.2 ส่วนด้านข้าง มีขนาด 360px; โดยประมาณ ความสูง......

 1.2.3 ส่วนแสดงผลด้านซ้ายมีขนาด 640px; โดยประมาณความสูง.....

  1.2.4 ส่วนท้าย มีขนาดความกว้าง 1000px; สูง 200px; โดยประมาณ

2. สร้างรูปภาพตามขนาดในหัวข้อ 1.2.1 - 1.2.4 ด้วยโปรแกรมตกแต่งและสร้างภาพตามที่ท่านถนัดไม่จำกัด

    และบันทึกจัดเก็บไฟล์ภาพในรูปแบบ  .JPEG ดังตัวอย่าง

ส่วนหัว Head.jpg

ส่วนด้านข้าง side.jpg

ส่วนแสงผล body.jpg

ส่วนท้าย bg.jpg

ส่วนพื้นหลังสุด Background

3. นำไฟล์ภาพที่สร้างไว้ขึ้นไปที่ไฟล์อัลบั้มโดยคลิกที่ "เมนูสำหรับ...(ของเรา)... และเลือกนำไฟล์ขึ้น แล้ว

Browse หาไฟล์ภาพในเครื่องเรา   พิมพ์รายละเอียดและคำสำคัญ จากนั้นกดปุ่ม นำไฟล์ขึ้น   เพื่อให้ได้มาซึ่ง

URL หรือที่อยู่ของภาพ

4. เลือก "เมนู บล็อก" และเลือก ตกแต่งบล็อก ในส่วนของ CSS ให้พิมพ์ Code ดังนี้

     (*หมายเหตุ* อาจพิมพ์ในโปรแกรม Notepad แล้ว Copy มาวางทีเดียวก็ได้)

 (ส่วนหัวหรือ ไตเติล)

 div#title
    {padding: 48px 100px; (กำหนดระยะห่างของชื่อส่วนหัวจากขอบ)
    text-align: left; (กำหนดตำแหน่งการแสดงข้อความบนไตเติล)
    font-size: 2.5em; (ขนาดตัวอักษร)
    color: #FFFBCC; (กำนดสีตัวอักษร)*สามารถหา Code สีได้จากการเลือกแถบสีใน Photoshop
    background:#00002F; (กำหนดสีพื้น)
    background-image:url("ใส่ url ของภาพส่วนหัว หาได้จาก ไฟล์อัลบั้ม");  
    background-repeat:no-repeat; (กำหนดการแสดงภาพ ไม่ซ้ำ หรือ ซ้ำจนเต็มพื้นที่ตัด no-ออก)
    background-position: left; (กำหนดตำแหน่งเริ่มต้นของภาพ)
    height:40px;} (กำหนดระยะพื้นที่ส่วนหัว)

div#title span {display:none;}

(ส่วนด้านข้าง) 

div#sidebar2
    {width: 260px; (กำหนดความกว้าง)
    background-image: url("ใส่ url ของถาพส่วนด้านข้าง");
    background-repeat:no-repeat;
    background-position:right middle;} (ตรวจสอบตำแหน่ง)

div#container
    {border: dotted 2px #ffffff;}

(ส่วนแสดงผลด้านซ้ายและพื้นหลัง)

div#content2
    {width: 640px;background-image: url("ใส่ url ของภาพส่วนแสดงผล");
    background-repeat: repeat;}
    body{ background:#333333;

    background-image: url("ใส่ url ของภาพพื้นหลัง");
    background-repeat: repeat;}

div#footer (ส่วนของ Footer ด้านล่าง)
    {font-size: 0.8em;
    clear: both;
    color: #FFFFFF;
    background-image:url("ใส่ url ของภาพพื้นหลัง");}



5. กดปุ่มจัดเก็บ 



* หมายเหตุ*

ลองทำดูได้ผลประการใด ช่วยชี้แนะ ด้วยนะครับ  และขอความกรุณาท่านผู้รู้หากผมอธิบายผิดพลาดประการใด

ช่วยชี้แนะด้วย ที่จะลืมเสียมิได้ ต้องขอขอบคุณเจ้าของ Code เดิมที่ให้ความรู้กับผมเป็นอย่างมาก

สวัสดีครับ

                                             ครูชาติ