Nah Readmore selama ini banyak menggunakan files javascript dan untuk membuat readmore blogspot tanpa javascript
bisa di ikutin tips dibawa ini:
1. Login ke blogger
2. pilih Edit HTML template
3. Beri tanda centang Expand Widget Templates
4. Lalu cari kode berikut <data:post.body/> dan ganti dengan kode dibawah ini :
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:post.thumbnailUrl'>
<a expr:href='data:post.url'><img class='post-thumbnail' alt='thumbnail' expr:src='data:post.thumbnailUrl'/></a>
<b:else/>
<a expr:href='data:post.url'><img class='post-thumbnail' alt='thumbnail' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOfIpSFaYeuEJcPOuh3mMS-2hI7hyphenhyphenRDkpXGjxSGvXQffLZGAwIpjNxE6TeBobjIEqR5kM00DG0HrL6y_V3IZqu3IFKjBrs8SY6IH1YQHV8CGZr7EJV1uuWhufvKtf3zaig9uEnw4InT1E/s1600/no-image.png'/></a>
</b:if>
<div class='post-snippet'><data:post.snippet/></div>
<div class='rm-button-wrap'>
<a class='button' expr:href='data:post.url'>Readmore</a>
</div>
</b:if>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == "static_page"'>
<data:post.body/>
</b:if>
</b:if>
5. Simpan template.<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:post.thumbnailUrl'>
<a expr:href='data:post.url'><img class='post-thumbnail' alt='thumbnail' expr:src='data:post.thumbnailUrl'/></a>
<b:else/>
<a expr:href='data:post.url'><img class='post-thumbnail' alt='thumbnail' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOfIpSFaYeuEJcPOuh3mMS-2hI7hyphenhyphenRDkpXGjxSGvXQffLZGAwIpjNxE6TeBobjIEqR5kM00DG0HrL6y_V3IZqu3IFKjBrs8SY6IH1YQHV8CGZr7EJV1uuWhufvKtf3zaig9uEnw4InT1E/s1600/no-image.png'/></a>
</b:if>
<div class='post-snippet'><data:post.snippet/></div>
<div class='rm-button-wrap'>
<a class='button' expr:href='data:post.url'>Readmore</a>
</div>
</b:if>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == "static_page"'>
<data:post.body/>
</b:if>
</b:if>
Catatan:
1. Jika template sebelumnya sudah menggunakan Autoreadmore dengan javascript silakan cari kode berikut ini:
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
2. Lalu ganti semua kode diatas sehingga akan menjadi seperti ini :
<b:if cond='data:post.thumbnailUrl'>
<a expr:href='data:post.url'><img class='post-thumbnail' alt='thumbnail' expr:src='data:post.thumbnailUrl'/></a>
<b:else/>
<a expr:href='data:post.url'><img class='post-thumbnail' alt='thumbnail' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOfIpSFaYeuEJcPOuh3mMS-2hI7hyphenhyphenRDkpXGjxSGvXQffLZGAwIpjNxE6TeBobjIEqR5kM00DG0HrL6y_V3IZqu3IFKjBrs8SY6IH1YQHV8CGZr7EJV1uuWhufvKtf3zaig9uEnw4InT1E/s1600/no-image.png'/></a>
</b:if>
<div class='post-snippet'><data:post.snippet/></div>
<a expr:href='data:post.url'><img class='post-thumbnail' alt='thumbnail' expr:src='data:post.thumbnailUrl'/></a>
<b:else/>
<a expr:href='data:post.url'><img class='post-thumbnail' alt='thumbnail' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOfIpSFaYeuEJcPOuh3mMS-2hI7hyphenhyphenRDkpXGjxSGvXQffLZGAwIpjNxE6TeBobjIEqR5kM00DG0HrL6y_V3IZqu3IFKjBrs8SY6IH1YQHV8CGZr7EJV1uuWhufvKtf3zaig9uEnw4InT1E/s1600/no-image.png'/></a>
</b:if>
<div class='post-snippet'><data:post.snippet/></div>
3. Sedikit modifikasi readmore blogspot kamu dengan bantuan CSS.
Copy dan pastekan kode css dibwah dan letakkan sebelum kode ]]></b:skin>
.post-thumbnail {
width:100px;
height:100px;
float:left;
margin:0px 10px 0px 0px;
}/div>
Atur setting ukuran sesuai keingingan sobatwidth:100px;
height:100px;
float:left;
margin:0px 10px 0px 0px;
}/div>
4. simpan dan lihat hasilnya.
0 komentar:
Post a Comment