Đã có 1 số bài viết nói về vấn đề này. Nhưng mình cảm thấy không đầy đủ và những người mới tiếp xúc thì khó có thể tùy biến theo ý mình được. Nay mình xin tổng hợp lại thành bài viết này cho mọi người dễ tham khảo.
Đối với Entry. Đánh dấu check vào nút HTML trước khi chèn code.
Đối với tiện ích HTML/javascript Nếu chưa có tiện ích sẵn thì bạn cần thêm tiện ích mới mới vào blog.
Phần 1. Chỉ chèn hình ảnh.
1. Chèn hình với kích thước mặc định.
Quote:
2. Chèn hình ảnh với kích thước tùy chỉnh.<img src="Link Hình" /> |
Quote:
Bạn chỉ sử dụng code này trong trường hợp bạn biết về kích thước của hình. Ko thì hình sẽ bị biến dạng.<img src="Link Hình" width="n" height="n" /> |
3. Thiết lập chiều rộng của ảnh.
Quote:
Cách này áp dụng khi bạn muốn kích thước của hình vừa với chiều rộng của entry, module hay comment.<img src="Link Hình" width="n" /> |
Khi bạn tùy chỉnh chiều rộng thì chiều cao sẽ tự thay đổi theo.
4. Chèn hình ảnh với tất cả các thuộc tính nâng cao.
Quote:
Trong đó:<img src="Link Hình" alt="Viết mô tả cho tấm hình" title="Nội dung tấm hình" width="n" height="n" border="n" /> |
Quote:
Với bảng này bạn có thể thêm các thẻ, hoặc xóa các thẻ để được đoạn code như ý. Mỗi thẻ cách nhau bằng 1 khoảng trắng.src="Link Hình" Đường dẫn đến tập tin hình ảnh. alt="Mô tả" Dùng để mô tả cho ảnh cũng cần chứa từ khóa. title="Nội dung" Khi rê chuột vào tấm hình sẽ hiển thị nội dung. width="n" height="n" Xác lập kích thước ảnh. Tránh lạm dụng để thay đổi kích thước ảnh vì có thể làm biến dạng ảnh. n: có thể tính bằng pixel hay tỷ lệ phần trăm border="n" Chỉ định độ dày đường viên bao quanh ảnh. n=0: không có đường viền |
Ví dụ:Bạn chỉ muốn viết mô tả cho tấm hình chứ ko muốn hiển thị nội dung khi rê chuột đến thì bạn thêm thẻ alt="
Viết mô tả cho tấm hình" và ko thêm thẻ title="Nội dung tấm hình"
. Tương tự đối với các thẻ khác.
Ví Dụ cụ thể:
Trường hợp chèn hình ảnh với tất cả thuộc tính nâng cao.
Quote:
Phần 2. Chèn hình ảnh có link muốn dẫn đến.<img src="http://lh5.googleusercontent.com/-NKvPu1QH3mw/AAAAAAAAAAI/AAAAAAAArYU/lWz4uGcoQvE/s512-c/photo.jpg" alt="Blog Chu Bang" title="Avata" width="150" height="150" border="1" /> |
Khi bạn click vào hình ảnh sẽ dẫn đến 1 trang khác
1. Chèn hình với kích thước mặc định.
Quote:
2. Chèn với kích thước mặc định, khi click vào hình sẽ hiện ra cửa sổ mới.<a href="Link liên kết muốn đến"><img src="Link ảnh" /></a> |
Quote:
3. Chèn hình với tất cả thuộc tính nâng cao.<a href="Link liên kết muốn đến" target="_blank"><img src="Link Hình" /></a> |
Quote:
Trong đó: <a href="Link liên kết muốn đến" target="_blank"><img src="Link Hình" alt="Mô tả" title="Nội dung tấm hình" width="n" height="n" border="n" /></a> |
Quote:
href="Liên Kết" Đường dẫn đến trang web muốn đến. src="Link Hình" Đường dẫn đến tập tin hình ảnh. alt="Mô tả" Dùng để mô tả cho ảnh cũng cần chứa từ khóa. title="Nội dung" Khi rê chuột vào tấm hình sẽ hiển thị nội dung. width="n" height="n" Xác lập kích thước ảnh. Tránh lạm dụng để thay đổi kích thước ảnh vì có thể làm biến dạng ảnh. border="n" Chỉ định độ dày đường viên bao quanh ảnh. n=0: không có đường viền target="_blank" Nếu chèn thẻ này vào thì khi bạn click vào hình trang được liên kết sẽ hiện ra ở cửa sổ mới |
Với bảng này bạn có thể thêm các thẻ, hoặc xóa các thẻ để được đoạn code như ý. Mỗi thẻ cách nhau bằng 1 khoảng trắng.
Ví dụ: Khi bạn muốn chỉ tùy chỉnh chiều rộng của tấm hình cho phù hợp với module hoặc bài viết thì bạn thêm thẻ width="n" và ko cần thêm thẻ height="n", tương tự cho các thẻ khác.
Ví Dụ cụ thể:
Trường hợp chèn hình ảnh với tất cả thuộc tính nâng cao.
Quote:
<a href="http://blogchubang.blogspot.com" target="_blank"><img src="http://lh5.googleusercontent.com/-NKvPu1QH3mw/AAAAAAAAAAI/AAAAAAAArYU/lWz4uGcoQvE/s512-c/photo.jpg" alt="Blog chu bang" title="Avata" width="150" height="150" border="1" /></a> |
Chúc Các Bạn Thành Công!
20 comments
đã chèn được ảnh thành công, thanks ad. Mạn phép hỏi ad template mà blogchubang đang sử dụng là gì đó, bị bồ kết template này rồi :) nếu được thì mong nhận được chia sẻ từ ad. một lần nữa xin cảm ơn rất nhiều !!! :))
http://thichhocit.blogspot.com/ thanks ad
http://salonmazda.blogspot.com
Hải Đường kinh doanh dự án Dat My Phuoc 3
Bạn ơi chi mình hỏi , hình ảnh của mình mờ quá , bạn có thể xem giùm dc kg : Đây là bloger của mình : bloghttp://tapchitintuc24.blogspot.com/er
ad xài template j mà đẹp thế
-------------------
từ vựng toeic theo chủ đề
Mình đang làm blogspot và add vào domain này, anh em cho ý kiến nhé.
http://www.kienmkt.info/
Thanks ad bài viết hay
https://chubangaiti.blogspot.com/2016/09/chia-se-simplify-2-responsive-blogger-template-premium-2.html
Các bạn vào theo link trên để nhận template mà blogchubang đang sử dụng nhé! tks mọi người đã ủng hộ blog của mình ! (k) (k) (k)(k)
Cảm ơn bạn ! Test thử luôn nhé !
Oil Gas Vietnam
https://blogchiase89.blogspot.com/
Mình cũng đang làm blog https://canhdephd.blogspot.com. đang kiếm ảnh để chèn vào cái của mình thì lại zô đây là sao trời!!
Cảm ơn bài viết của bạn
In bạt Decal Hà Nội
Đã sử dụng chèn ảnh rất đẹp! http://www.amyprint.com
Mình đã làm theo hướng dẫn nhưng phần cài đặt kích thước của ảnh thì không theo ý mình mà vẫn là theo kích thước mặc định mặc dù. ADD giúp mình với
bạn ơi xem giúp mình blog này làm sao chỉnh banner trên vừa với blog
https://kiemtientainha0205.blogspot.com
cảm ơn
ad ơi, làm sao để thêm ảnh ở vào web ạ. Nguồn ảnh tìm ở đâu ạ?
Thông tin bạn chia sẻ thực sự hữu ích
Dịch vụ vận chuyển chó mèo cảnh Sài Gòn Hà Nội
Chuyên dịch vụ phối giống chó Corgi tại Hà Nội
Phối chó Bull Pháp
Đa khoa Phương Nam luôn là địa chỉ chăm sóc khách hàng tốt nhất luôn cung cấp dịch vụ khám và chữa bệnh hiệu quả tiết kiệm chi phí.Trị bệnh hiệu quả tại Đa khoa Phương Nam
EmoticonEmoticon