July 07
วิธีใส่ภาพใน Blog แบบ html
|
อยากใส่รูปงามๆในบลอค แต่พอใช้ add photos มันก็ไปอยู่ล่างสุดทุกทีเลย แก้ได้ค่ะ!!
โดยใส่เป็นโค้ด html ทีนี้จะจัดให้อยู่ตรงไหนก็ตามสะดวกละ ซ้าย ขวา กลาง ปรับขนาดได้ด้วย เย้..
วิธีทำ
1. ไปที่หน้า Edit Blog Entry คลิกตรงคำว่า <HTML> ที่อยู่ตรงแถบเครื่องมือ
2. ก๊อบโค้ดที่ให้มา ไป paste ไว้เลยค่ะ
สำหรับการใส่ภาพแบบธรรมดา(ขนาดปกติ) <IMG src="url รูปของคุณ">
อันนี้สำหรับการใส่ภาพแบบที่ต้องการกำหนดขนาดของรูปด้วย <IMG width=xxx height=xxx src="url รูปของคุณ">
ตรง xxx ก็คือขนาดของรูปเป็นพิกเซล ใส่เป็นตัวเลข ค่ะ
3. เปลี่ยนตรงที่ทำไฮไลท์สีไว้ ให้เป็น url ของรูปที่จะเอามาใส่ในบลอคค่ะ
ตัวอย่าง
<IMG src="http://album.romerun.com/happymew/folder/16063/album/26326/image/531410/pic/original.gif">
4. คลิกคำว่า <HTML> อีกที จะมีรูปขึ้นมาแบบนี้ค่ะ ถ้าพอใจแล้ว กด publish entry ก็เสร็จเลยค่ะ
แต่ถ้าอยากปรับขนาด จัดตำแหน่งเพิ่ม ดูต่อข้อ5. เลยนะคะ
5. ปรับขนาดรูป + จัดวาง
5.1 ใช้เม้า คลิกซ้าย 1 ที ไปที่รูปนะคะ จะมีกรอบสี่เหลียมขึ้นมา
เหมือนเวลาเราใช้โปรแกรมตกแต่งรูปอ่ะค่ะ คลิกค้างไปที่ขอบก็จะย่อขยายขนาดรูปได้
(ดูภาพประกอบใน วิธีใส่โค้ด html ลงในบลอค รูปที่6. นะคะ )
5.2 อีกวิธีนึง ใช้เม้า เลื่อนไปที่รูปจะเปลี่ยนไปเป็นเครื่องหมาย ลูกศรกากบาท (+) นะคะ
คลิกขวาที่รูปจะมีคำสั่งขึ้นมา คือ
- Size ปรับขนาดอัตโนมัติ มีให้เลือกเป็น% ค่ะ
- Vertical Align จัดวางภาพ เช่น จัดภาพให้อยู่กึ่งกลาง/บน/ล่าง ตัวอักษร
- Horizontal Alignจัดวางภาพกับตัวอักษรเช่น จัดชิดซ้าย ขวา กลาง
ลองเอาไปเล่นดูนะคะ
แบบนี้ค่ะ
6. ตกแต่งจนกว่าจะพอใจเสร็จแล้วกด Publish Entry เลยจ้า
ไม่ยากเลยนะใช่ป่าวค่ะ ^^"
แถมอีกนิดนึงค่ะ วันนี้เอารูปสำหรับใช้แต่งบลอคมาฝาก คลิกที่นี่เลยค่ะ
หรือคลิกที่ link ด้านข้างในหัวข้อ Pics & Animetion ได้นะคะ
ที่ไม่เอามาลงในบลอคนี้เลยเพราะรูปมันเยอะ จะทำให้โหลดนานอ่ะค่ะ ^^"
วิธีหา url จากรูปในที่อยู่ในเวปต่างๆ ทำได้ง่ายๆ ชอบรูปไหนก็ คลิกขวาที่รูปเลยค่ะ
จะมีแถบคำสั่งขึ้นมา กดเลือก Properties จะเห็น url ของรูปอ่ะค่ะเป็น http//:... ก๊อบมาทั้งอันเลยค่ะ
แล้วเอาไปใส่แทนตรงที่ทำเป็นสีๆไว้ในโค้ด นะคะ
ถ้าอยากจะใช้รูปที่มีในเครื่องตัวเอง ก็นำรูปนั้นไปใส่ไว้ในอัลบั้มออนไลน์ ตามเว็บที่มีให้บริการฟรีอัลบั้มได้ค่ะ
อันนี้เป็นเว็ปที่เราใช้อยู่นะคะ
http://www.romerun.com
http://www.imageshack.us
http://photobucket.com
|
เพิ่มเติมอีกซักเล็กน้อย
สำหรับคำถามว่า ทำไงให้รูปมันอยู่ตรงกลาง อันนี้ก็ให้ใส่ <p align=center>...</p>
คร่อมโค้ดอะไรก็ได้ที่เราต้องการจะให้มันอยู่ตรงกลางนะ อย่างเช่น โค้ดรูป คือ <img src="Url ของรูป">
เราก็ใส่แบบนี้ <p align=center><img src="Url ของรูป"></p> รูปก็จะมาอยู่ตรงกลางค่ะ
และถ้าจะเว้นบรรทัดก็ให้ใส่ <br> คั่นระหว่างโค้ดรูปแต่ละอันค่ะ
เช่น <p align=center><img src="Url ของรูป"><br><img src="Url ของรูป"></p>
Tools 
