Lấy ra ảnh đầu tiên của bài viết của Blogger

Ngay hôm trước mình đã chia sẻ với các bạn Auto Readmore không thumbnail, và trong bài viết đó mình có nói sẽ hướng dẫn các bạn lấy là hình ảnh đầu tiên của bài viết mà không cần dụng tới Javascript, chỉ cần sử dụng mã mặc định của Blogger là đã lấy ra được nó rồi.

Lấy ra ảnh đầu tiên của bài viết của Blogger

Việc sử dụng đoạn mã mặc định của Blogger sẽ giúp cho blog của bạn có tốc độ tải trang nhanh hơn và ít lỗi hơn nhiều so với việc nhờ vả Javascript. Thì không phải lằng nhằng nữa vào việc thôi sau đây là điều các bạn quan tâm.

Lấy ảnh đầu tiên của bài viết bằng mã mặc định của Blogger

Nếu các bạn tinh ý và thích vọc nhiều trong template như mình các bạn sẽ thấy, mặc định của một Blogger Template chưa chỉnh sửa gì hết sẽ có một đoạn mã như thế này
<b:if cond='data:post.firstImageUrl'>
 <meta expr:content='data:post.firstImageUrl' itemprop='image_url'/>
</b:if>
đoạn mã này có nhiệm vụ tạo ra một thẻ meta khai báo hình ảnh của bài viết và từ thẻ meta đó nó cung cấp đường link của hình ảnh đầu tiên của bài viết đến các công cụ tìm kiếm.

Lợi dụng nó các bạn chỉ cần chỉnh sửa đôi chút là đã lôi hình ảnh đầu tiên ra rồi, cái này chắc khỏi phải giải thích cho rắc rối, mình sẽ làm luôn cho các bạn, ở đoạn mã trên sau khi mình chỉnh sửa xong thì nó sẽ thành ra thế này
<b:if cond='data:post.firstImageUrl'>
 <img expr:src='data:post.firstImageUrl' expr:title='data:post.title' expr:alt='data:post.title' />
</b:if>
ở đây mình xóa bỏ đi thuộc tính itemprop vì không phải thẻ meta và ko cần xài nó nữa, và mình có thêm vào 2 thuộc tính title và alt để tối ưu hơn cho SEO.

Bây giờ bạn có thể đặt vào bất cứ vị trí nào bên trong phần
<b:includable id='post' var='post'>
...
</b:includable>
thì nó sẽ hiện hình ảnh đầu tiên ở đó.

Trong trường hợp nếu bài viết không có hình ảnh, thì tương đương với nó sẽ không hiện gì hết, trong trường hợp bạn muốn có hình ảnh mặc định cho bài không có ảnh bạn sử dụng đoạn mã sau
<b:if cond='data:post.firstImageUrl'>
   <img expr:src='data:post.firstImageUrl' expr:title='data:post.title' expr:alt='data:post.title'/>
<b:else/>
   <img src='ĐỊA CHỈ URL HÌNH ẢNH MẶC ĐỊNH' expr:title='data:post.title' expr:alt='data:post.title'/>
</b:if>
bằng việc sử dụng if & else đơn giản, chắc bạn nhìn qua cũng hiểu rồi.

Lời kết

Thủ thuật này mình sử dụng cách lấy dữ liệu ra của blogger bằng các đoạn mã data đơn giản, và tham khảo thêm một chút tại Blogger Template mặc định. Nếu bạn nào muốn biết và tìm hiểu chuyên sâu hơn thì các bạn có thể tham khảo qua chuyên mục Lập trình Blogger có trên blog của mình, và 2 bài viết có liên quan sau đây "Data trong Blogger", "Thẻ điều kiện Blogger".

15 bình luận

  1. avatar says

    lúc 23:20 16 tháng 8, 2014

    mình không dùng Auto Read More vì khi xài thì cái đoạn tóm tắt nội dung bài viết nó ghi liền 1 mạch ở ngoài trang chủ không đẹp nên mình xài cái Read More ngắt trang của blogger luôn
    nên khi mình xài đoạn code lấy ảnh đầu tiên ra làm thumbnail thì bị 1 vấn đề là ảnh đó nó ko tự resize nhỏ lại được mà bự y như hình đầu tiên trong bài luôn, bạn chỉ mình edit code cái này với
    cảm ơn nhiều

  2. avatar says

    lúc 12:57 17 tháng 8, 2014

    Bạn muốn kích thước nó như teh61 nào và nằm ở đâu mình sẽ hướng dẫn cho bạn.

  3. avatar says

    lúc 13:19 18 tháng 8, 2014

    Lúc mình xài Read More ngắt trang của blogger và dùng code "lấy ảnh đầu tiên làm thumbnail" ở trên của bạn thì hình nó to như hình gốc, mình chèn thêm width và height vào thẻ img thì làm nó nhỏ được nhưng hình nó nằm ở trên còn đoạn tóm tắt nó nằm ở dưới.
    Nếu được thì bạn code giúp mình sao cho cái hình nó nhỏ 120 x 80 và nằm bên trái nhé, nhưng mà chỉ có hình năm bên trái thôi, cho dù đoạn chữ có dài chăng nữa nó cũng nằm phía bên phải chứ không chạy xuống phía dưới cái hình ý.
    Với mình tìm chỗ để đổi chữ read more của blogger mặc định nằm bên trái qua bên phải không được, bạn giúp mình luôn nhé. Cảm ơn bạn rất nhiều :D

  4. avatar says

    lúc 16:25 21 tháng 12, 2014

    Hỏi Lâm Kiều đôi chút,
    Mình thực hiện thủ thuật lấy ảnh đầu tiên ra làm thumbnail được rồi, song đến một bước là blogspot tự động share bài viết đến google+ thì lại không có ảnh thumbnail giống như bài viết ở blogspot, mà googl+ lại thực hiện lấy 1 hình khác trong bài viết , như vậy sẽ không thu hút được khách hàng. Vậy nhờ Lâm Kiều giúp xem làm sao để ảnh hiển thị ở google+ giống với ảnh thumbnail ở blogspot.
    thanks ấy

  5. avatar says

    lúc 19:19 22 tháng 12, 2014

    Mình cũng không chắc về vấn đề này nữa, mình lâu lâu cũng hay gặp tình trạng này mặc dù đánh dấu dữ liệu cũng kỹ lắm rồi, ảnh kích thước cũng tương đối. Mình thấy đa phần sử dụng ảnh mà mình up lên Picasa hoặc Blogger là hay bị vậy, thua bác Google :D

  6. avatar says

    lúc 21:01 31 tháng 1, 2015

    Cảm ơn bạn nhiều lắm :). bạn cho mình hỏi chút, mình có trang web bằng blogspot. không hiểu sao không thấy hiện ảnh thumbail ngoài trang đầu. mình gà về code, mày mò mãi không ra, mình không biết chèn vào chỗ nào trong html của nói ,nản quá. có bạn nào giúp mình với, thank nhé .bloge mình đây ạ. http://bulonghoachat.blogspot.com/

  7. avatar says

    lúc 21:17 31 tháng 1, 2015

    Xem web không thì mình không thể nói được blog của bạn nó bị lỗi gì nữa. Mình check sơ thì thấy Javascript lấy hình và ghi hình ra ổn cả.

  8. avatar says

    lúc 15:10 17 tháng 3, 2015

    Mình cài đặt rồi mà nó vẫn k tự động lấy ảnh b ơi ! Là bị lsao ấy nhỉ ??
    http://bongdangoaihanganholevn.blogspot.com/

  9. avatar says

    lúc 20:49 17 tháng 3, 2015

    Mình thấy nó hiện 1 đống ảnh mà :D

  10. avatar says

    lúc 22:18 16 tháng 6, 2015

    Bạn ơi, code này chỉ lấy được ảnh up lên blog thôi à, còn ảnh tại sever khác thì không lấy được đúng không? Mình muốn lấy ảnh từ nơi khác làm ảnh thumb thì làm thế nào bạn.

  11. avatar says

    lúc 11:53 21 tháng 6, 2016

    em lam trang wed ban hang nhung ma template cue chi tiet sản phẩm ko bỏ vào giỏ hàng dược ak .va em muon tạo chi tiết giỏ hàng và xem giỏ hàng , xong thanh toán hang bàng cách đặt hàng qua email form liên hê khi khách đặt hàng thì tự đọng giử vào email em và khách hàng và co luon thong tin san phảm để dể quản lí ak. mong anh giup cho ak .

  12. avatar says

    lúc 18:03 26 tháng 8, 2016

    Chào bạn. Mình muốn hỏi chúy, blog của mình những bài viết copy về cả ảnh thì nó không tự động lấy ảnh đàu tiên làm ảnh thumbnail đại diện bên ngoài được. Có cách nào giải quyết ngoài cách up thẳng lên blog không, vì mình dùng phần mềm tự động lấy tin. Thank bạn

  13. avatar says

    lúc 12:53 11 tháng 9, 2016

    Bạn cho mình hỏi là muốn lấy link ảnh này làm background cho post thì phải làm ntn? vì trong dâu nháy '' luôn luôn bắt đầu bằng data: thì phải

  14. avatar says

    lúc 08:17 12 tháng 9, 2016

    Bạn kiếm thẻ mà bao cái bài viết của bạn lại, rồi nhét cái thuộc tính style vào như thế này
    <div expr:style='"background:" + data:post.firstImageUrl' >
    ...
    </div>

  15. avatar says

    lúc 22:49 13 tháng 5, 2018

    e thử rồi mà k dc anh ơi

Mọi nhận xét trên blog KslZone.NET sẽ được kiểm duyệt trước khi được xuất bản trên blog. Lưu ý: Nếu bạn để lại backlink về website của bạn, miễn là kèm theo nhận xét hợp lý thì nhận xét đó vẫn sẽ được chấp nhận. Nếu bạn muốn hiện mã HTML thì bạn cần chuyển đổi trước bằng công cụ phía dưới.