ใ่ส่ HTML Code ใน Scroll Bar ได้อย่างไร - Thaiblog Advice

HTML code displayed in a scroll box

ดูเหมือนวันนี้จะว่าง (ทำนองนั้น)
ท่องเน็ตไปเรื่อยๆ แล้วเห็น เว็บที่เค๊าให้ Copy code ไปเม้นต์ที่โน่นที่นี่
มี Scroll Bar และให้ Copy Code ได้ด้วย
ก็เลยอยากจะลองทำใส่ใน Blogger บ้าง
หาข้อมูลเป็นภาษาไทย ได้ค่อนข้างยาก
อ่านภาษาอังกฤษได้งูๆปลาๆ เลยใช้เวลาค่อนข้างนาน
กว่าจะทำงานนี้สำเร็จ
แต่ ก็ทำสำเร็จแล้ว ถ้าอยากรู้ว่าทำยังไง ตามมาค่ะ

- การแสดง Code Html ใน blogger เราไม่สามารถ copy code แล้ว paste ลงไปธรรมดาๆได้
เราต้องเปลี่ยน < ให้เป็น และเปลี่ยน >ให้เป็น

- ส่วน Code สำหรับ ทำ Scroll Bar เป็นดังนี้

<div style="width: 395px; height: 400px; background-color: a0ffff; color: 000000; font-family: arial; font-size: 12px; text-align: left; border: 0px solid 00000; overflow: auto; padding: 4px;"></div>

สามารถ copy code ไปใช้งานได้เลย

หรือจะใช้ Code นี้ก็ได้นะคะ (ได้ผลลัพธ์เหมือนกัน แต่ดีกว่า ตรงที่สามารถใช้คำสั่ง copy(Ctr+c),Select All(ctr+a) ใน Scroll bar ได้เลย

<pre></pre><textarea rows="2" cols="20"><pre></pre></textarea>

- นำ Code Html ที่ต้องการใส่ไว้ใน Scrollbar ใส่ไว้ในระหว่าง เครื่องหมาย >< หรือ <pre></pre>

หมายเหตุ การเปลี่ยน Code Html ให้อยู่ในรูปแบบที่สามารถ post ใน blogger ได้ ง่ายๆ
คือให้ไปที่ http://centricle.com/tools/html-entities/

วาง code Html ลงใน Text box แล้ว กด Encode

ยกตัวอย่างเช่น ต้องการให้ Visitor copy โค้ด ไปใช้ เมื่อทำตามขั้นตอนข้างต้นก็จะได้ดังนี้



Code For Blog,Hi5,Yuwie

<pre><center><a href="http://kathys-comments.com/"><img src="http://i283.photobucket.com/albums/kk292/kathys_comments/Comments/Flowers/fl32.jpg" alt="Kathys Comments " border=0></a><br><a href="http://kathys-comments.com/" target="_blank"><br>Kathys Comments</a></center></pre>

ถ้าอ่านแล้ว งง ก็ตามไปอ่านจากต้นฉบับได้นะคะ

http://www.bloggertipsandtricks.com/2008/09/html-code-displayed-scroll-box.html