วิธีใส่ Style ข้อความใน Post ของ Blogger ให้มีความแตกต่าง

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

และในบทความนี้ผมจะนำเสนอการวิธีการใส่สไตล์ด้วยวิธีต่าง ๆ ให้กับเนื้อหาของบทความที่คุณต้องการ ตามที่ได้กล่าวมา


วิธีใส่ Style ให้กับข้อความ

แบบที่ 1 ใส่ Style ให้กับข้อความโดยใส่สีพื้นหลัง ขนาด สีอักษร ทำได้โยการใช้โค้ดต่อไปนี้
<div style='background:#414141;font-size:14px;font-family:Arial, Helvetica, Verdana, Tahoma, sans-serif;color:#fff;font-style:italic;padding:10px;'>
<!--ใส่ข้อความที่ต้องการ ยาวเท่าใดก็ได้-->
</div>
ผลที่ได้จะเป็นดังนี้

บทความนี้เป็นการสอนเกี่ยวกับการใส่ Style ให้กับข้อความในการโพส ซึ่งใช้ความรู้เรื่อง HTML และ CSS แบบพื้นฐานเท่านั้น คุณสามารถนำไปประยุกต์ใช้ และปรับแต่งให้เป็นสไตล์ของตัวคุณเองได้ตามใจชอบ และหากมีข้อสงสัยประการใดก็สามารถตั้งกระทู้สอบถามได้ที่บทความนี้หรือใน Forum ก็ได้ครับ สวัสดีครับ
หมายเหตุ ค่าของสีพื้นหลัง ขนาดและสีอักษรสามารถปรับแต่งได้ตามใจชอบ



แบบที่ 2 คล้ายกับแบบที่ 1แต่มีการใส่พื้นหลังเป็นภาพที่ต้องการ ทำได้โยการใช้โค้ดต่อไปนี้
<div style='background:#696969 url(http://upic.me/i/1q/bgtext.jpg) no-repeat;font-size:14px;color:#6F0000;padding:10px;'>
<!--ใส่ข้อความที่ต้องการ ยาวเท่าใดก็ได้-->
</div>
ผลที่ได้จะเป็นดังนี้
บทความนี้เป็นการสอนเกี่ยวกับการใส่ Style ให้กับข้อความในการโพส ซึ่งใช้ความรู้เรื่อง HTML และ CSS แบบพื้นฐานเท่านั้น คุณสามารถนำไปประยุกต์ใช้ และปรับแต่งให้เป็นสไตล์ของตัวคุณเองได้ตามใจชอบ และหากมีข้อสงสัยประการใดก็สามารถตั้งกระทู้สอบถามได้ที่บทความนี้หรือใน Forum ก็ได้ครับ สวัสดีครับ

หมายเหตุ
โค้ดของ background อาจปรับเปลี่ยนได้หากภาพไม่พอดีกับบริเวณของบทความ เช่น
สั่งให้ปรากฎซ้ำตามแนวนอน (แกน x)
background:#696969 url(http://upic.me/i/1q/bgtext.jpg) repeat-x;
สั่งให้ปรากฎซ้ำตามแนวนอน (แกน y)
background:#696969 url(http://upic.me/i/1q/bgtext.jpg) repeat-y;
และถ้าต้องการให้ซ้ำทั้งสองแนว
background:#696969 url(http://upic.me/i/1q/bgtext.jpg) repeat;
นอกจากนี้ยังกำหนดตำแหน่งของ background ได้โดยใช้โค้ด
background:#696969 url(http://upic.me/i/1q/bgtext.jpg) ระยะจากด้านซ้ายpx ระยะจากด้านบนpx no-repeat;
ถ้าต้องการข้อมูลเพิ่มเติมเกี่ยวกับการกำหนด background ให้ศึกษาได้ที่
http://www.w3schools.com/css/css_background.asp


แบบที่ 3 ถ้าต้องการกำหนดความกว้าง ความสูงและเส้นขอบ สามารถทำได้โดยใช้โค้ด
<div style='width:550px;max-height:200px;overflow:auto;background:#696969 url(http://upic.me/i/1q/bgtext.jpg) no-repeat;font-size:14px;font-color:#6F0000;padding:10px;border:1px solid #FF9200;'>
<!--ใส่ข้อความที่ต้องการ ยาวเท่าใดก็ได้-->
</div>
ผลที่ได้จะเป็นดังนี้
บทความนี้เป็นการสอนเกี่ยวกับการใส่ Style ให้กับข้อความในการโพส ซึ่งใช้ความรู้เรื่อง HTML และ CSS แบบพื้นฐานเท่านั้น คุณสามารถนำไปประยุกต์ใช้ และปรับแต่งให้เป็นสไตล์ของตัวคุณเองได้ตามใจชอบ และหากมีข้อสงสัยประการใดก็สามารถตั้งกระทู้สอบถามได้ที่บทความนี้หรือใน Forum ก็ได้ครับ สวัสดีครับ ................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................



แบบที่ 4 กำหนด Class ลงใน Template เพื่อเรียกใช้ได้ทุกครั้งที่ต้องการ

วิธีนี้ทำได้โดย Log in เข้าไปที่ blogger.com >> รูปแบบ(การออกแบบ) >> แก้ไข HTML

วิธีทำ blogspot

ค้นหาโค้ด ]]></b:skin> จากนั้นก็กำหนด Style ลงไป

เช่นในที่นี้ผมใช้โค้ด
.textstyle{width:550px;max-height:200px;overflow:auto;background:#696969 ;font-size:14px;font-color:#6F0000;padding:10px;border:2px solid #FFF;}
ก็จะต้องวางโค้ดข้างบนลงไปก่อนหน้าโค้ด ]]></b:skin> แล้วบันทึกแม่แบบ  และทุกครั้งที่ต้องการให้ข้อความตรงไหนมีสไตล์ที่กำหนดไว้ก็ใช้โค้ด
<div class='textstyle'>
<!--ใส่ข้อความที่ต้องการ ยาวเท่าใดก็ได้-->
</div>
การทำเช่นนี้จะมีประโยชน์ตรงที่สามารถกำหนด Style ให้ข้อความในบทความที่เราเขียนได้สะดวก รวดเร็วขึ้นมาก


แบบที่ 5 รูปแบบการกำหนด Style ในแบบนี้จะคล้ายกับแบบที่ 4 แต่จะอาศัยคำสั่งของเครื่องมือที่มีอยู่แล้วใน Blogger นั่นคือเครื่องมือ Blockquote

แต่ง blospot 

วิธีกำหนด Style ให้กับ Blockquote ทำโดย กำหนด Style ให้กับ Blogquote ที่ต้องการขึ้นมาก่อน สมมติกำหนดเป็น
blockquote {width:550px;max-height:200px;overflow:auto;background:#696969 ;font-size:14px;font-color:#6F0000;padding:10px;border:2px solid #FFF;}
Log in เข้าไปที่ blogger.com >> รูปแบบ(การออกแบบ) >> แก้ไข HTML
จากนั้นค้นหาโค้ด ]]></b:skin> แล้ววางโค้ดที่ได้กำหนดไว้วางลงไปก่อนหน้าโค้ดดังกล่าว และบันทึกแม่แบบ

สอนแต่งบล็อก และสอนสร้างบล็อกของ blogger  
เมื่อต้องการให้ข้อความใดมี Style ที่กำหนดไว้ก็ทำไฮไลท์ข้อความนั้นแล้วคลิกที่ปุ่ม Blogquote ข้อความนั้นก็จะมี Style ที่ต้องการ


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

ตอนนี้มีความคิดเห็น : 4 ความคิดเห็น
หากคุณมีปัญหาหรือข้อสงสัยใดๆ สามารถสอบถามได้จากกล่อง comment ด้านล่างนี้ได้เลยครับ

  1. สุดยอด ครับผมได้ความรู้มากสุดๆครับ กับ Blog นี้ขอบคุณมากๆเลยครับ

  1. @ คุณ Death13rd : ขอบคุณมากเช่นกันครับที่ให้กำลังใจ และติดตามผลงานครับ

  1. ขอบคุณสำหรับความรู้ในบล้อกนี้นะครับ ผมติดตามตลอดเหมือนกัน

    วันนี้มีเรื่องมารบกวนอีกครับ คือผมทำบล้อก http://joinmart-online.blogspot.com/

    แต่เวลาแสดงบทความบน firefox กับ IE7 ตัวหนังสือมันไม่เหมือนกัน จะแก้ได้ยังไงครับ

  1. @ คุณ JOINMART : ต้องกำหนดค่า font ให้แต่ละส่วนใน Template ให้ครบครับ เพราะถ้ากำหนดไม่ครบ Browser แต่ละตัวก็จะเลือก font ที่ถูกตั้งค่าไว้มาแสดงผล

    CSS ที่กำหนด font ใน Template ของคุณจะมีลักษณะโค้ดแบบนี้ครับ
    font:normal bold 160% Verdana,Sans-serif;
    หรือ
    font:normal 100% Verdana,Sans-serif;

    ทำนองนี้ครับ ลองแทรกลงไปในส่วนที่คุณยังไม่ได้กำหนดครับ สงสัยเพิ่มเติมถามที Forums นะครับ
    http://www.hackublog.com/p/hackublog-forums.html

แสดงความคิดเห็น

ถ้าต้องการโพส HTML ให้แปลงโค้ดที่เครื่องมือด้านล่างนี้ก่อนครับ

สร้างบล็อก Facebook SEO บล็อก Linkwheel iMacros Link Wheel