วันพฤหัสบดีที่ 23 ธันวาคม พ.ศ. 2553

วิธีใส่ภาพใน Blog

วิธีใส่ภาพใน Blog แบบ html

อยากใส่รูปงามๆในบลอค แต่พอใช้ add photos มันก็ไปอยู่ล่างสุดทุกทีเลย แก้ได้ค่ะ!!
โดยใส่เป็นโค้ด html ทีนี้จะจัดให้อยู่ตรงไหนก็ตามสะดวกละ ซ้าย ขวา กลาง ปรับขนาดได้ด้วย เย้..
จริงๆหลักการเหมือน blog วิธีใส่โค้ด 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

ไม่มีความคิดเห็น:

แสดงความคิดเห็น