การสร้าง box code ใว้ใช้ภายในบล็อก

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

• บล็อกแรกเป็นบล็อกเอาใว้เล่นเกมส์เอาใว้ชวนเพื่อนใน facebook มาเล่นเกมส์กัน(ตัวเองก็ชอบเล่นมากเหมือนกัน) นั้นก็คือบล็อก บล็อกเกมส์.blogspot.com นั้นเอง
• ส่วนอีกบล็อกที่เขียนเพราะว่าตอนนี้ศึกษาเรื่อง javascript อยู่ก็เลยถือโอกาสเขียนด้วยเลย เป็นไงหาเรื่องใส่ตัวอีกแล้ว แนะนำเลย thaijavascript.blogspot.com ถ้าใครสนใจเรื่อง code java script ก็ติดตามได้นะ เพราะวางกำหนดการ ใว้ 2 เดือนเป็ะแต่ช่วงแรกจะน่าเบื่อหน่อยสำหรับคนเก่งๆถ้าเริ่มศึกษาก็ศึกษาไปพร้อมกันก็ได้นะครับ รับรองพื้นแน่นเอี๊ยดๆ^^!

เข้าเรื่องกันดีกว่าเรื่องมันมีอยู่ว่ากาลครั้งหนึ่งนานมาแล้วข้าพเจ้าพยายามหาไอ้ที่เค้าเขียนในบล็อกแล้วมันเป็น box แล้วให้เค้า copy code ไปได้ใช้ได้เลยนั้นนะแหละดูตัวอย่างก่อนจะได้เห็นภาพ

<script type="text/javascript">
document.write('Hello world');
</script>

เห็นตัวอย่างแล้วถ้าสนใจก็อ่านต่อเลยครับเพราะต่อไปจะอธิบาย
เกี่ยวกับการทำ box code เหมือนภาพด้านบนคุณสามารถทำได้เองโดยที่ไม่ต้องพึ่งพา
โปรแกรมอะไรเลยครับ
ขั้นตอนการทำ box code ครับ

1. เริ่มต้นให้เข้าไปที่โหมดการออกแบบก่อน
2. เลือกแท็ป แก้ไข HTML
3. อย่าลืมดาวน์โหลดแม่แบบของคุณมาสำรองใว้ก่อนนะครับ กันพลาด ^^!
4. กด ctrl+f หา code ต่อไปนี้
   
   
   

   ]]></b:skin>

5. ต่อไป copy code ข้างล่างนี้ ไปวางใว้ก่อนหน้า code ในข้อ 4
   
   
   

   .nate {color: #10202B; border : 1px solid #F4BDBD;padding : 5px 5px;
   font-family : Consolas, "Courier New", Courier, mono, serif;font-size : 12px;
   background-color : #fAfAfA; width : 90%;overflow : auto;margin : 10px 0 10px 10px;
   border-left : 10px solid #F4BDBD;max-height : 500px;min-height : 16px;line-height : 16px;}
   .nate:hover {background-color : #f3f3f3;}

6. ที่นี้วิธีการใช้งานเข้าไปที่การส่งบทความในหน้าส่งบทความ
7. ต้องแน่ใจว่าตอนนี้คุณทำงานอยู่ที่แท็ปเขียนนะครับ
8. วาง code แบบปกติในบทความขันแรกอย่าพึ่งพิมพ์อะไรลงไปน่ะเอาแค่ code ที่ต้องการให้อยู่ใน box 
9. เมื่อเราพิมพ์ code เสร็จแล้วให้เปลี่ยนมาทำงานที่แท็ป แก้ไข html ข้างๆแท็ปเขียนนะครับไม่ไช่หน้าการออกแบบ
10. หลังจากนั้นให้พิมพ์ code นี้
    
    
    

    <pre class="nate">

    ใว้บนสุด
11. และพิมพ์ code นี้
    
    
    

    </pre>

    เอาใว้ท้ายสุด

มันคงไม่ยากเกินไปนะสำหรับ box code box นี้
คุณสามารถแก้ไขหน้าตามันได้นะครับ
ลองแก้กันดูชอบสีไหนยังไงก็แล้วแต่ชอบ 
ขอให้สนุกกับการเขียนบล็อกนะครับ ^^