Tại thời điểm hiện tại thì Blogger khá là phổ biến với dân SEOer, hầu hết mọi cá nhân tổ chức không ít thì nhiều đều sử dụng nó làm website vệ tinh cho mình. Thông thưởng thì đối với một website vệ tinh thì có người thì tự xây dựng nội dung như một website chính thức - TỐT, có người thì sử dụng những phần mềm để auto post bài lấy tin từ những website tin tức.
Vấn đề xây ra thường xuyên là đối với những website từ động lấy tin ở các website khác là đối với những website đang xài Auto Readmore với Thumbnail không sử dụng Javascript mà không tải hoặc đăng lại ảnh, thì nó sẽ không xuất hiện ảnh thumbnails. Điều này không những chỉ gặp ở những website auto post bài, mà còn ngay cả với chúng ta nữa.
Bài viết này mình xin chia sẻ với các bạn Auto Readmore không sử dụng Javascript lấy ảnh đầu tiên làm ảnh thumbnail do mình chỉnh sửa cho các bạn có nhu cầu sử dụng.
Auto Readmore không sử dụng Javascript lấy ảnh đầu tiên làm ảnh thumbnail
Đối với đoạn mã dưới này thì nó khá tương tự với đoạn mã Auto Readmore trước kia, mình chỉnh sửa lại đôi chút thôi, cái này khá đơn giản mà thấy nhiều bạn cũng có nhiêu cầu nên mình chỉnh sơ lại luôn.
Cách thức sử dụng cũng tương tự như cách sử dụng toàn bộ những đoạn mã auto readmore trước kia, bạn tìm đến các thẻ
<data:post.body/>
và thay thế toàn bộ chúng bằng
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:post.firstImageUrl'>
<div class='postThumb'>
<img expr:alt='data:post.title' expr:src='data:post.firstImageUrl' expr:title='data:post.title'/>
</div>
</b:if>
<data:post.snippet/>
<div class='jump-link'>
<a expr:href='data:post.url' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
<b:else/>
<data:post.body/>
</b:if>
<b:else/>
<data:post.body/>
</b:if>
Đoạn mã trên là có hình thì nó hiện không có thì thôi, bạn nào muốn hiện ảnh mặc định cho mấy bà viết không có hình thì xài đoạn mã sau
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:post.firstImageUrl'>
<div class='postThumb'>
<img expr:alt='data:post.title' expr:src='data:post.firstImageUrl' expr:title='data:post.title'/>
</div>
<b:else/>
<div class='postThumb'>
<img expr:alt='data:post.title' expr:title='data:post.title' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLwB0GE-u1sIpqC7Usdz1xnW-lNNGquhcYFYd09Q_eoFkXcaCI-0r37MtDzFw585juVZriJ3ShynoJeAPpkbXACrmChN7Pw49f4J1FsXBkjeEjMhbB4xcb1ouEp-YXSnFHM44kMkklOQka/w360-c-h220/no-image.png'/>
</div>
</b:if>
<data:post.snippet/>
<div class='jump-link'>
<a expr:href='data:post.url' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
<b:else/>
<data:post.body/>
</b:if>
<b:else/>
<data:post.body/>
</b:if>
Bước cuối cùng chèn đoạn css sau lên trên thẻ ]]></b:skin>
.postThumb { float: left; margin-right: 20px; width: 300px; height: 250px }
các bạn nhớ thay thế chiều rộng chiều cao cũng như vị trí của hình ảnh mà bạn mong muốn, rồi lưu lại.
Lời kết
Đây là đoạn mã mình viết lại cho mấy bạn có nhu cầu trong không sử dụng Javascript, nhưng vẫn muốn có ảnh up lên ở bên ngoài. Đối với thủ thuật này thì đôi khi hình ảnh sẽ bị bóp méo vì sử dụng css để căn chỉnh nó, bạn có thể sử dụng đoạn js ở
bài này với #Blog1 là ID của phần blog, nhưng mà bạn phải lưu ý bỏ nó vào cặp thẻ điều kiện sau
<b:if cond='data:blog.pageType != "index"'>
<b:if cond='data:blog.pageType != "static_page"'>
ĐOẠN JS
</b:if></b:if>
để nó không resize và cắt ở cả trang bài viết nhé.
Belum ada tanggapan untuk "Auto Readmore không JS lấy ảnh đầu tiên"
Post a Comment