làm thế nào để một bài viết trong blog có nhiều hình

[nhatthuc147]

em muốn viết trong blog và chèn nhiều hình vào bài viết nhưng không biết làm sao, các anh chỉ em với. cảm ơn.

 

[kongcom]

Có lẽ đây là câu hỏi nhiều người thắc mắc nhất. Xin hướng dẫn các bạn chi tiết cách "gửi" nhiều ảnh lên Blog. Thực chất từ "gửi" ở đây có nghĩa là lấy ảnh từ 1 website khác về Blog của bạn. Website mà ta sử dụng là http://photobucket.com Hoặc http://imageshack.us/ vì dịch vụ này không cấm hotlink. Với photobucket thì ảnh của bạn sẽ bị delelet sau một khoảng thời gian nhất định. Vì thế nên dùng imageshack.
• Đầu tiên, dĩ nhiên bạn phải 1 tài khoản tại photobucket.com. Đăng ký khá dễ dàng.Trong phần soạn Blog, tìm và chọn mục "View HTML Source" ngay bên dưới phần soạn nội dung.
• Tại vị trí bạn muốn chèn hình ảnh, bạn nhập vào đoạn code HTML như sau: (Trong đó, bạn lưu ý)
- Chiều rộng(width) và chiều dài(height) là bắt buộc phải có.
- Chiều rộng không được quá 500 pixels.
- "chú thích" là phần chữ sẽ hiện lên khi người xem hover chuột lên ảnh.
• Để lấy được địa chỉ ảnh, bạn quay sang trang http://photobucket.com. Sau khi đã upload ảnh lên, photobucket.com cung cấp ngay địa chỉ trong mục "Url", bạn có thể copy và chèn vào đoạn code trong Blog.
• Vẫn tại photobucket.com, bạn click vào hình ảnh bạn vừa post để xem chi tiết, bạn sẽ thấy bên dưới hình ảnh có kích thước mà bạn sử dụng cho đoạn code.
• Bỏ "View HTML Source" đi và bạn sẽ thấy hình ảnh hiện lên trên Blog của mình.
Một số lưu ý khác:
• Photobucket.com có cung cấp luôn cho bạn đoạn code để gửi ảnh lên trong hộp thoại "Tag". Bạn có thể sử dụng nó, tuy nhiên, nhớ thêm 2 thẻ width và height nếu không ảnh sẽ không hiện khi bạn ấn nút "Post This Entry".
• Nếu bạn muốn lấy hình ảnh từ 1 website bất kỳ, bạn click chuột phải lên hình ảnh, chọn "Properties", bạn sẽ nhận được địa chỉ và kích thước của hình ảnh để post lên Blog, rất đơn giản và... không có gì để giải thích...
• Còn 1 cách khác đơn giản hơn rất nhiều, không cần phải sử dụng đến code là "kéo thả". Để 2 cửa sổ soạn Blog và website có hình ảnh song song. Bạn hover lên ảnh, click chuột trái và giữ chuột, di chuyển qua ô nhập text bên Blog và thả chuột. Hình ảnh sẽ hiện lên. Tuy nhiên, bạn vẫn nên click "View HTML Source" để xem đoạn code Yahoo! vừa tự sinh ra có width và height hay không để sửa lại cho đúng.

 

[Pansy_flower]

• Tại vị trí bạn muốn chèn hình ảnh, bạn nhập vào đoạn code HTML như sau: (Trong đó, bạn lưu ý)
- Chiều rộng(width) và chiều dài(height) là bắt buộc phải có.
- Chiều rộng không được quá 500 pixels.
- "chú thích" là phần chữ sẽ hiện lên khi người xem hover chuột lên ảnh.

Bạn thiếu đoạn code rồi. Code như sau:

<img border="0" width="100" height="100" alt="Tên hình ảnh hoặc tên của liên kết thay thế" src=”http://i80.photobucket.com/albums/j167/Secret_grasses/2-3.jpg” />

SG giải thích thêm cái này chút xíu:

Border: dòng kẻ bao quanh hình.

Width và height: kích thước chiều rộng và cao của hình bằng đơn vị pixel hoặc phần trăm lớn hơn hay nhỏ hơn ảnh gốc. Ví dụ: width="468" height="60" kích cở banner mà bạn thường thấy, width="90%" heighr="90%" kích cở nhỏ hơn ảnh gốc 100% - 90%=10%.

Alt (alternate): Tên hình ảnh hoặc tên của liên kết thay thế, thường là để chú thích, dòng chữ này sẽ hiển thị trước trong khi chờ hình ảnh hiển thị.

____________

Một số thủ thuật khác liên quan đến hình ảnh trong blog:


-Nếu bạn muốn text liên kết đến hình ảnh:

Bạn cần phải biết tag <a>. Tag đóng của nó là </a>.

Ví dụ:

<a href=”http://i80.photobucket.com/albums/j167/Secret_grasses/2-3.jpg” />Hình ảnh_click</a>

Kết quả: Hình ảnh_click

-Nếu bạn muốn Hình ảnh liên kết đến một trang web: bạn cần thay text bằng tag dùng cho hình ảnh như ở trên.


Ví dụ:

<a href="http://www.giaiphapexcel.com"/><img border="0" src="http://i80.photobucket.com/albums/j167/Secret_grasses/2-3.jpg" />
</a>

Kết quả:
(bạn click vào hình xem điều gì xảy ra nhé).

-Nếu bạn muốn hình ảnh link đến hình ảnh: như vậy sẽ là


Ví dụ:

<href="http://i80.photobucket.com/albums/j167/Secret_grasses/2-3.jpg"/><img border="0" src="http://i80.photobucket.com/albums/j167/Secret_grasses/2-3.jpg" />
</a>

Kết quả:
(bạn click vào hình xem có j khác biệt so với click vào ảnh ở trên nhé).

-Nếu bạn chỉ có một hình, muốn cho hình này hiển thị ở kích thước nhỏ và khi click vào thì nó hiển thị kích thước lớn, như chế độ xem ảnh thumbnails của hệ điều hành: thì bạn định lại kích thước width và height:

Ví dụ:

<a href="http://i80.photobucket.com/albums/j167/Secret_grasses/2-3.jpg" ><img width="50" weight="50" src="http://i80.photobucket.com/albums/j167/Secret_grasses/2-3.jpg" />
</a>

Kết quả:

____________

Tuy nhiên, để đỡ rắc rối, nhìn mấy đoạn code này có thể làm bạn chóng mặt thì bạn có thể làm 1 trong 3 cách sau:

C1: Rút ngắn đoạn code như sau:

<img src="http://i80.photobucket.com/albums/j167/Secret_grasses/2-3.jpg" />

Không giống các tag khác, tag <img> không có tag đóng vì vậy người ta thêm dấu / ở cuối.
Src (source): là liên kết đến hình ảnh. Hình ảnh là những file có phần mở rộng .jpg, .bmp, .gif,…


C2: bạn làm như 2 hình sau:

Bước 1:

Bước 2: (Hình ở b2 là hình mấy bữa mình minh họa cho nhỏ em, nên dùng từ "em". Các bạn thông cảm nhé!)

C3: Nếu bạn không nhớ các đoạn code này thì bạn mở hình của bạn ra, click chuột phải vào hình ===>chọn copy===>paste trực tiếp vào blog của bạn. (Cách này bạn không cần phải tích chọn nút "View HTML source")

Thân,
SG

 

[kongcom]

Không hiểu sao có Type Code mà không hiển thị . Cảm ơn bạn đã đính chính giùm . Áy náy từ nãy giờ .