พื้นฐานhtmlและ css สำหรับจัดตำแหน่งการโฟส์ลงbloggerบางคนเวลาโฟส์ข้อมูลลง blogger นั้นท่านอยากจะจัดข้อมูลหรือรูปภาพให้อยู่ในตำแหน่ง ซ้าย ขวา หรือบางทีไม่อยู่ในตำแหน่งที่เราอยากจะให้อยู่บทความนี้ ผมมาบอกวิธีการจัดตำแหน่งโฟส์ของเราครับอาจจะไม่ครบถ้วนเท่าไหร่นักเพราะผมตั้งใจจะทำบทความนี้เพื่อบอกวิธีโฟส์สินค้าลง amazon ในตอนถัดไปครับ อิอิ ใน text editor ของ blogger นั้นเวลาเราจัดซ้ายขวานั้นเมื่อเรา ดูเป็น edit html นั้นจะใช้ div เช่น อยากให้รูปอยู่กลางก็ จะเป็นแบบนี้ <div style="text-align: center;">รูป</div> ถ้าสังเกตุดีๆจะเห็น style=" " ค่าที่อยู่ใน " " คือ ค่าที่กำหนดรูปแบบการแสดงผลนั้นเองหรือ css นั้นเอง ถ้าเกิดว่าเรามีรูปจะให้อยู่ซ้าย ข้อความอยู่ขวาทำไง ที่นี้เราใช้ text-align: left หรือ right ไม่ได้แล้วครับเนื่องจากมันไม่รู้ซ้ายกับ ใครขวากับใครวิธีการก็คือสร้าง div ที่มีความกว้างที่แน่นอนครับ
แล้วมี div 2 tag ที่เราต้องการให้อยู่ซ้าย ขวาและขนาดความกว้าง 2 tag รวมกันไม่เกินความกว้าง div ด้านนอกที่ห่อหุ้มไว้ครับ เช่น

<div style="width: 600px;">
<div style="float: left; width: 150px;">
รูปอยู่นี้จ๊ะ
</div>
<div style="float: right; width: 400px;">
ข้อความอยู่นี้จ๊ะ
</div>
</div>

ก็จะได้ประมาณรูปนี้ส่วนความสูงไม่ต้องพูดถึงมัน auto ได้อยู่แล้วครับ ถ้าอยากให้มีสีก็ใส่ background:สีที่ต้องการ;

เช่น #ff0000 #ffff00 #c0c0c0 ได้ครับ
ถ้าเราอยากให้บรรทัดถัดไปกลับมาเหมือนเดิมก็เราก็ใส่บรรทัดนี้ลงไปเป็นการเคลียร์ค่ากลับมาเร่มต้นใหม่นั้นเอง
<div style=" float: none; clear: both; margin: 0;padding: 0;border: none;font-size: 1px;"></div>
สำหรับท่านที่หวังผลทาง seo โดยอยากใส่ tag h1 ถึง h6 ก็สามารถทำได้โดยสามารถกำหนด style font
ไม่ให้ใหญ่เกินไปได้ เช่น
<h1 style="font-size: 14px;">ข้อความนี้สำคัญนะ se</h1>
สำหรับ link ที่จะส่งไปเว็บอืนจะมีรูปแบบนี้ครับ
<a href="เว็บที่ต้องการ" title="ข้อมูลที่เกี่ยวกับ link">ข้อความที่คนเห็น</a>
สำหรับคนทำ amazon link ที่ส่งไป ควรเพิ่ม rel="nofollow" target="_blank"
ก็จะได้
<a href="เว็บที่ต้องการ" title="ข้อมูลที่เกี่ยวกับ link" rel="nofollow" target="_blank">ข้อความที่คนเห็น</a>
ส่วน target="_blank" นั้นเวลากดจะเปิดในแท็บใหม่ ครับ
rel="nofollow" ใส่ไว้สำหรับ ไม่ต้องการให้ se ให้คะแนนเว็บที่ส่งไปครับ
สำหรับการดึงรูปมาใส่ สำหรับคนต้องการผลทาง seo จำเป็นต้องมี alt เสมอครับเพื่อบอกข้อมูลที่เกี่ยวกับรูปครับ
<img src="ที่อยู่รูปภาพ" alt="ข้อมูลที่เกี่ยวกับ รูปนี้"/>
รู้จักกับ layout ตามรูป

margin ไว้กำหนดตำแหน่ง อ้างอิงกับอิลิเมท์ที่อยู่รอบตัวจาก บน ขวา ล่าง ซ้าย เช่น
<div style="margin: 0pt 0pt 0pt -30pt;></div>
หมายความว่าให้ขยับไปทางซ้าย 30 pt นั้นเอง
border คือขอบนอก ขนาด รูปแบบ สีเช่น
border:1px solid #7f7f7f;
หมายความว่าให้ขอบนอกขนาด 1 px style solid สี #7f7f7f นั้นเอง
padding คือขอบในเช่น
padding-top:1px
padding-right:1px
padding-bottom:1px
padding-left:1px
หรือ padding : 1px 1px 1px 1px;

การกำหนดสีตัวอักษรใช้
color:#ff0000;
เช่น <span style="color:#ff0000;">ข้อความสี นี้</span>

การขีดฆ่าข้อความก็ ใช้
<del></del>
หรือ
<s></s>
เมื่อเรารู้ดังนี้ก็สามารถจัดตำแหน่งการโฟส์ตามใจเราได้แล้วครับ ^^