วันพุธที่ 29 ธันวาคม พ.ศ. 2553

การตกแต่ง Blogger


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

อ่านข้อมูลเพิ่มเติม

บางครั้งคนอ่านไม่ชอบเนื้อหายาวๆบนหน้าเว็บซึ่งยาวเป็นกิโล ผมก็ไม่ค่อยจะชอบเหมือนกัน การใส่ 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 เราครับ โดยรูปแบบที่ Blogger ให้มาสีสันมันช่างดูธรรมดามากๆ แต่ไม่เป็นไรครับ เพราะเพื่อนๆสามารถไป Download จากเว็บที่ให้บริการ Free Theme Blogger ได้แล้วนำมา Upload ในหน้า แก้ไข 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 ดูบล๊อกได้เลยครับ
เมนูต่างๆ ในเมนู "รูปแบบ"

ไม่มีความคิดเห็น:

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