คุณกำลังอยู่ในบล๊อกของกรณีศึกษา โปรดใช้บริการเต็มรูปแบบได้ 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 รูปภาพที่ต้องการ

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

0 ความคิดเห็น: