[::ห้องทดลอง::]

ลำดับตอนที่ #8 : space03

การใส่ป้ายด้านบนและด้านล่างของสเปซ

 

ดูรูปทางขวามือนี่สิคะ ตัดมาจาก http://pourboire.spaces.live.com

เห็นใช่ม๊าอ่ะว่าของเค้านะมีรูปท้องฟ้าอยู่ที่ด้านล่าง แล้วก็มีรูปอวกาศอยู่ที่ด้านบนของเสปซ เค้าทำได้ยังไงกัน น่าสนใช่ป่าว...มามะ วันนี้เราจะมาทำกัน

 

สิ่งที่เราต้องเตรียมก็คือรูป 2 รูปค่ะสำหรับป้ายด้วยหัวและหางของสเปซเรา ความกว้างของรูปก็ 985 px ค่ะ

และโมดูล Custom HTML 1 ตัวเท่านั้น พร้อมแล้วมาเริ่มกันเลย...

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Step 1 : เปลี่ยนเลเอาท์ให้มีลักษณะตามนี้เท่านั้นนะคะ

    

 

Step 2 : ย้ายโมดูล Custom HTML ไปยังตำแหน่งล่างสุด ขวาสุด เท่าที่จะทำได้เลย...ดังแสดงด้วยสีม่วงในรูปข้างบนอ่ะค่ะ

 

Step 3 : คราวนี้ก็แบ่งความต้องการเป็น 3 กรณีได้แก่ ใส่ป้ายหัวอย่างเดียว ใส่ป้ายหางอย่างเดียว หรือจะใส่ทั้งหัวทั้งหางก็ได้...อ๊ะ พิมพ์ไปรู้สึกเหมือนกะลังเล่นแม่งูเอ๋ยเลยอ่ะ อะไร...ใส่ไปก็ใส่มา อ่อ นั่นมันส่ายยยย

 

กรณีที่ 1 ใส่ป้ายหัวอย่างเดียว (ผลงานตัวอย่าง http://ladyring.spaces.live.com/ มันก็คือสเปซนี้ไง...)

 

ลอกโค้ดนี้ไปวางใน Custom HTML เลยค่ะ

 

<pre></pre><tbody><table></table></tbody><pre>
</pre><div><td><tr></div>
<img src="URL ของรูปป้ายหัว">

 

สำหรับป้ายบางคนมันเป็นสีไม่เหมือนสีพื้นอ่ะ ถ้าใส่โค้ดแค่นี้ป้ายจะไปชนกประชิดปนบสนิทกัยขอบบนของโมดูลพอดี ถ้าจะเอาสวยเพอร์เฟ็คเลยเนี่ยะน่าจะเพิ่มโค้ด <p>&nbsp;</p> ต่อท้ายไปซักกะนิด ให้มีช่องว่างระหว่างดมดูลกะป้ายอ่ะค่ะ

 

กรณีที่ 2 ใส่ป้ายหางอย่างเดียว (ใครทำแล้วก็บอกด้วยละกัน)

 

ก็ใช้โค้ดตัวนี้นะ

 

<pre></pre><tbody><table></table></tbody><pre>
</pre><div><td><tr></div>
<img src="URL หลอก">

<pre></pre><tbody><table></table></tbody><pre>
</pre><div><td><tr></div>
<img src="URL ของรูปป้ายหัว">

 

อ่ะง่ะ...มีต้องใส่ URL หลอกๆ ไปด้วย คิดไม่ออกก็ www.URLหลอก.com ไปซะก็ได้ อันนี้เอาฮาไม่เอาสาระ...

 

กรณีที่ 3 ใส่ป้ายทั้งหัวและหาง (ผลงานตัวอย่าง http://pourboire.spaces.live.com/)

 

ก็นี่เลย

<pre></pre><tbody><table></table></tbody><pre>
</pre><div><td><tr></div>
<img src="URL ของรูปป้ายหัว">

<pre></pre><tbody><table></table></tbody><pre>
</pre><div><td><tr></div>
<img src="URL ของรูปป้ายหาง">

 

Step 4 : กด Save ที่โมดูลก็จบข่าว ได้แล้วเอามาโชว์กันมั่งดิ

 

ปล. ถ้าฝากรูปกับ Photobucket อาจจะโดนลดขนาดความกว้างภาพเป็น 800 ให้ดูตรงที่เซ็ทค่าดีๆ นะ ไม่งั้นก็ลองเปลี่ยนโฮสท์เป็น http://imageshack.us/ แทนนะ ง่ายดี