Tuesday, November 27, 2012
Mengurangi penggunaan javascript akan mengurangi beban loading blog pada browser, dan akan membantu meningkatkan pagespeed blog, bisa juga mengkompres fies javascript untuk memperkecil ukuran files javascript. tapi lebih baik tidak terlalu banyak menggunakan javascript pada blog terutama seperti blogspot.
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 :
Catatan:
1. Jika template sebelumnya sudah menggunakan Autoreadmore dengan javascript silakan cari kode berikut ini:
2. Lalu ganti semua kode diatas sehingga akan menjadi seperti ini :
3. Sedikit modifikasi readmore blogspot kamu dengan bantuan CSS.
Copy dan pastekan kode css dibwah dan letakkan sebelum kode ]]></b:skin>
4. simpan dan lihat hasilnya.
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.