คุณกำลังอยู่ในบล๊อกของกรณีศึกษา โปรดใช้บริการเต็มรูปแบบได้ blogger-assistant.blogspot.com

วันอาทิตย์ที่ 26 กรกฎาคม พ.ศ. 2552

การสร้าง Float Image ให้กับบล๊อกของเรา

Float Image คือ การสร้างรูปภาพให้ลอยอยู่ ณ ตำแหน่งใด ๆ ของหน้าเว็บ ซึ่งประโยชน์ของการใช้ส่วนใหญ่จะเป็นโฆษณาและนิยมให้อยู่ที่มุมใดมุมหนึ่งของหน้าเว็บดังตัวอย่าง



เราสามารถที่จะสร้าง Float Image หรือรูปภาพให้ลอยอยู่ในหน้าบล๊อกของเราได้ด้วยวิธีง่าย ๆ ดังนี้
  • ไปที่ รูปแบบ | แก้ไข HTML
  • ค้นหา Code ]]></b:skin> แล้วคัดลอก Code ต่อไปนี้ไว้ด้านบน
#float_corner {
position:fixed;_position:absolute;
bottom:0px;left:0px;clip:
inherit;_top:expression(document.documentElement.scrollTop+document.documentElement.clientHeight-this.clientHeight);_left:expression(document.documentElement.scrollLeft + document.documentElement.clientWidth - offsetWidth);}


*botton และ left คือ ตำแหน่งที่ต้องการให้รูปภาพนั้นแสดงในหน้าบล๊อก สามารถเปลี่ยนเป็น top, bottom, left หรือ right ได้
  • ขั้นตอนถัดไป คือ ให้ค้นหาคำว่า </body> แล้วคัดลอก Code ต่อไปนี้ไว้ด้านบน
<div id='float_corner'>
<a href='http://blogger-assistant.blogspot.com'> <img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5-yhaBspijH3DUgsFspnV6kJI19-CfpGOBbAwttrcZzG7-xcgFbSdXsXRBz9iB2QDlFF6eRgg_9bOIdUWi6cwWno_v2QQTfvdF-EOxLgjhGxQ-nNYGo5D6y8s8eq-2rIi-96G5qYmyeym/'/></a>
</div>


http://blogger-assistant.blogspot.com คือ ลิงค์ที่ต้องการ

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5-yhaBspijH3DUgsFspnV6kJI19-CfpGOBbAwttrcZzG7-xcgFbSdXsXRBz9iB2QDlFF6eRgg_9bOIdUWi6cwWno_v2QQTfvdF-EOxLgjhGxQ-nNYGo5D6y8s8eq-2rIi-96G5qYmyeym/ คือ URL รูปภาพที่ต้องการ

สามารถ ดูตัวอย่าง ได้ที่นี่

อ่านต่อ...

การทำลิงค์ Read More... ให้กับบทความ

Read More..., อ่านต่อ, อ่านบทความที่เหลือ หรือ อ่านเนื้อหาทั้งหมด มักนิยมใช้ในกรณีที่บทความค่อนข้างยาว การแสดงผลบทความลงสู่หน้าแรกของ Blogger ด้วยรูปแบบมาตราฐานที่ทำไว้ คือ การแสดงบทความทั้งหมดในครั้งเดียว ซึ่งจะทำให้ HomePage ของเราดูไม่สวยงาม อีกทั้งยังเสียเวลาในการ Load หน้าเว็บในกรณีที่เราตั้งค่าให้แสดงผลหน้าแรกหลาย ๆ บทความ เพราะฉะนั้น สิ่งที่เรากำลังจะทำต่อไปนี้ คือ ตัดเอาเฉพาะบทความในส่วนต้นมาใส่ไว้ที่หน้าเว็บโดยบทความที่เหลือจะต้องคลิ๊กไปที่ลิงค์ Read More..., อ่านต่อ, อ่านบทความที่เหลือ หรือ อ่านเนื้อหาทั้งหมด


การทำลิงค์ก็ไม่ได้ยุ่งยากอะไร ให้ทำตามขั้นตอนดังนี้
  • ไปที่ รูปแบบ | แก้ไข HTML
  • ติ๊กขยายแม่แบบเครื่องมือ
  • ค้นหาคำว่า <data:post.body/> หรือ <p><data:post.body/></p> ในส่วนของ HTML Code
  • คัดลอก Code ข้างล่างนี้แทนที่ <data:post.body/> หรือ <p><data:post.body/></p>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>
<data:post.body/>
<b:if cond='data:blog.pageType != &quot;item&quot;'><br/>
<a expr:href='data:post.url'>อ&#3656;า��&#3656;อ...</a>
</b:if>
</b:if>

*เราสามารถเปลี่ยนคำว่า Read More... เป็นคำว่า อ่านต่อ, อ่านบทความที่เหลือ หรือ อ่านเนื้อหาทั้งหมด ได้

รูปแบบการเขียนบทความที่ต้องทำเพิ่มเติม
สำหรับการเขียนบทความที่เราต้องการให้มี Read More... เราจะต้องทำการแบ่งบทความโดยใส่ Tag เพิ่มเข้าไปตามรูปแบบนี้

เนื้อหาส่วนแรก
<span class="fullpost">
เนื้อหาส่วนที่เหลือ
</span>

หรือเราจะตั้งให้เป็นค่า Default ไปเลยก็ได้ โดยไปที่ การตั้งค่า | การจัดรูปแบบ และไปตั้งค่าที่บล๊อก "แม่แบบบทความ"


เมื่อเราต้องการเขียนบทความใหม่ในใหมด "เขียน" ค่าที่เราตั้งไว้จะแสดงเฉพาะส่วนของตัวหนังสือ โดยที่ Code ที่ทำ Highlight ไว้จะไม่แสดงในโหมดนี้ การเขียนบทความทำได้โดยเขียนทับตัวหนังสือ "ส่วนที่ต้องการให้แสดงผลในหน้าแรก" กับ "ส่วนที่ต้องการให้แสดงผลที่เหลือ" แต่ปัญหาคือ เราอาจจะเขียนทับลงไปบนโค้ดด้วย เพราะฉะนั้น ควรจะเขียนในโหมด Html จะดีกว่า


เลือกการเขียนในโหมด Html เพื่อป้องกันการเขียนบทความทับลงไปที่ Code ที่ตั้งไว้


ในส่วนตัวของผมเอง ผมไม่นิยมการตั้งค่าไว้ที่แม่แบบบทความ เนื่องจากปัญหาที่กล่าวมา อีกทั้งจะมีปัญหาในการใส่รูปภาพ และการเคลื่อนย้ายรูปภาพ หรือองค์ประกอบต่าง ๆ ของบทความ ทำให้ลิงค์ Read More... ผิดเพี้ยนไป ผมจะใช้วิธีการเขียนบทความทั้งหมดในโหมด "เขียน" แล้วมาใส่ Code <span class="fullpost"> และ </span> ที่หลังจะสะดวกและตรงกับที่เราต้องการโดยไม่มีความผิดเพี้ยนแต่ประการใด

อีกประการหนึ่งก็คือ ถ้าเราต้องการย้อนกลับมาแก้ไขบทความเก่า ๆ ผมจะเอา Code <span class="fullpost"> และ </span> ออกไปก่อน เมื่อแก้ไขเสร็จแล้วค่อยมาใส่ใหม่ ยังไงก็ค่อย ๆ ลองทำดูน๊ะครับ แต่อยากจะแนะนำให้ใช้วิธีที่ผมทำจะดีกว่า หรือไม่ก็ทดลองด้วยตัวเองก็จะทราบเหตุผลที่ผมกล่าวมาข้างต้น

อ่านต่อ...