ตกแต่งเนื้อหาให้สวยงามด้วย Window Live Writer

Window Live Writer เป็นโปรแกรมเขียน Blog ซึ่งสามารถตกแต่งเนื้อหาให้สวยงาม กว่าระบบเดิมๆ ของ Blogger มากมายครับ ซึ่งมีรูปแบบการใช้งานที่ง่ายมากๆ แต่งภาพได้สวยสดงดงาม หน้าตาเป็นแบบนี้ครับ

window live writer

ใครที่ไม่พอใจกับการเขียนเนื้อหาใน Blogger เขียนแล้วมันไม่สวย มันไม่ได้ดั่งใจ ลองเปลี่ยนมาใช้ Window Live Writer ดูกันได้นะครับ เพราะผมก็ใช้งานอยู่ สะดวกมากๆ ครับ ลอง Download ไปใช้กันเลยครับ

Download : Window Live Writer

การทำ Read more ให้กับ Blogger

บางครั้งคนอ่านไม่ชอบเนื้อหายาวๆบนหน้าเว็บซึ่งยาวเป็นกิโล ผมก็ไม่ค่อยจะชอบเหมือนกัน การใส่ Read more หรือ อ่านต่อ… เป็นตัวเลือกอย่างนึงที่ทำให้เนื้อหาเราดูสั้นลงตามที่เรากำหนด เมื่อคนอ่านอยากอย่านต่อหัวข้อนั้นๆก็สามารถคลิ๊ก Read more.. หรือ อ่านต่อ… ได้ ทำให้สะดวกและประหยัดหน้าเว็บเราไม่น้อยทีเดียว

การทำ Read more ให้กับ Blogger ให้เราเข้าไปที่ Edit HTML หรือแก้ไข HTML

1 การทำ Read more ให้กับ Blogger

  1. .ให้ทำการ Backup ไว้ก่อนกันเหนี่ยวเดียวผิดพลาดขึ้นมางานจะเข้า
  2. กดเพิ่มเครื่องมือแม่แบบ เพื่อเปิด Code แบบเต็ม

ใส่ code สีแดงข้างล่างนี่ใส่ไว้ก่อน </head> หลัง </b:skin> ครับ

]]></b:skin>
<b:if cond='data:blog.pageType != "item"'>
<style>#fullpost{ display:none;}</style>
</b:if>
</head>

จากนั้นกด Ctrl+F หา Code นี้ครับ <p><data:post.body/></p> แล้วใส่ Code สีแดงไว้ด้านล่างครับ

<div class='post-body entry-content'>
      <p><data:post.body/></p>
      <b:if cond='data:blog.pageType != "item"'>
         <p><a expr:href='data:post.url'>Read More</a></p>
      </b:if>
      <div style='clear: both;'/> <!-- clear for photos floats –>

ให้สังเกตุคำว่า Read More ใน Code ด้านบนนี้ครับ เราสามารถแก้ไขตามใจเราได้เช่นเราอยากให้แสดงเป็นคำว่า อ่านต่อ… เราก็เปลี่ยนจาก Read More เป็นคำว่า อ่านต่อ… ครับ แค่นั้นแหละ

หลังจากนั้นให้เรากด Save Template ได้เลยครับ

จากนั้นไปที่ Setting >>> Formatting เลื่อนลงมาล่างสุดจะเห็น Post Template ให้ Copy ข้างล่างนี่ใส่กรอกเข้าไปแล้ว Save ครับ

ส่วนที่จะให้แสดง
<span id="fullpost">
ส่วนที่เหลือ
</span>

 

เราอยากให้ตรงไหนโผล่ขึ้นก็ให้เขียนตรง “ส่วนที่จะให้แสดง” ตรงไหนอยากให้อ่านต่อก็ใส่ตรง “ส่วนที่เหลือ”

เลือกแม่แบบ (Theme Blogger)

ในส่วนนี้เราสามารถเปลี่ยนหน้าตาแม่แบบ (Theme) ของ Blogger เราครับ โดยรูปแบบที่ Blogger ให้มาสีสันมันช่างดูธรรมดามากๆ แต่ไม่เป็นไรครับ เพราะเพื่อนๆสามารถไป Download จากเว็บที่ให้บริการ Free Theme Blogger ได้แล้วนำมา Upload ในหน้า แก้ไข HTML แค่นี้ก็เป็นอันเสร็จแล้วครับ

เลือกแม่แบบ Blogger


เมนูต่างๆ ในเมนู "รูปแบบ"

ตั้งค่าแก้ไข HTML ให้กับ Blogger

ในส่วนของการแก้ไข HTML ของ Blogger เป็นการแก้ไขส่วนต่างๆของ Theme และการแสดงผล การจัดรูปแบบ Layout ต่างๆ ซึ่งต้องมีความรู้ด้าน HTML พอสมควรเลยครับ สำหรับการจัดรูปแบบการแสดงผลจะเป็นโค้ด CSS ครับ ซึ่งก็ต้องมีความรู้ด้านนี้อีกเหมือนกัน เพื่อใช้งานควบคู่กันไป

ตั้งค่า HTML BLogger

  1. เป็นการ Download Theme ต้นแบบเอาไว้ครับ เรียกว่าการ Backup Theme เพื่อกันการเกิดปัญหาต่างขึ้นมาเมื่อเราแก้ไขผิดพลาด เราก็สามารถ Upload ไฟล์ที่เราทำการ Backup ไว้ ก็จะกลับมาเป็นเหมือนเดิม
  2. การอัพโหลด Theme ที่เรา Download มาครับ สามารถเรียกดูและ Upload ได้ตามสบาย
  3. ขยายแม่แบบเครื่องมือ เมื่อติ๊กถูกแล้วจะแสดงรูปแบบโค้ดให้เราเต็มรูปแบบจะสามารถปรับแต่งได้มากขึ้นครับ ก่อนที่จะทำการแก้ไข HTML หรือ CSS เราก็ต้องติ๊กถูกหน้า ขยายเครื่องมือแม่แบบเสมอครับ
  4. โค้ด HTML – CSS ต่างๆที่เราจะแก้ไขครับ

เมื่อแก้ไขเรียบร้อยแล้วให้เราทำการบันทึกแล้วกด Preview ดูบล๊อกได้เลยครับ

เมนูต่างๆ ในเมนู "รูปแบบ"

ตั้งค่าแบบอักษรและสี Blogger

ในส่วนนี้จะเป็นการตั้งค่าของ Theme เราว่าจะให้ส่วนไหนเป็นสีอะไร แบบหรือลักษณะตัวอักษรเป็นยังไง อยากบอกว่าใช้การง่ายมากๆ ในส่วนนี้
แบบอักษรและสี Blogger
  1. ส่วนที่เราจะแก้ไข
  2. แถบสี
  3. ภาพตัวอย่างหลังจากเปลี่ยนแปลง
ในส่วนนี้จะใช้ได้กับ Theme พื้นฐานแต่บาง Theme ที่ถูกปรับแต่งมาเราอาจใช้การไม่ได้ครับ

เมนูต่างๆ ในเมนู "รูปแบบ"

Twitter Delicious Facebook Digg Stumbleupon Favorites More

 
Design by Free WordPress Themes | Bloggerized by Lasantha - Premium Blogger Themes | Design Blog, Make Online Money