Cara Membuat Read More Pada Blogspot

Cara Membuat Read More Pada Blogspot - Read more adalah salah satu cara untuk mempercantik blog kita yang juga berguna untuk merapikan semua posting kita. Dan adapun read more itu banyak macamnya diantaranya : ada yang menggunakan teks saja, ada yang menggunakan gambar untuk tombol read morenya. Dan kali ini avizeon akan berbagi ilmu tentang blogspot yaitu Cara Membuat Read More Pada Blogspot.

Langkah membuat read more pada blogspot :

• Login ke blog anda
• Lalu masuk ke rancangan > Edit HTML
• lalu cari kode </head> (gunakan ctrl + f untuk mempermudah pencarian)
• copy dan paste kode di bawah ini tepat diatas kode </head>

<script type='text/javascript'> var thumbnail_mode = "no-float" ; summary_noimg = 430; summary_img = 340; img_thumb_height = 100; img_thumb_width = 120; </script> <script src='http://rizqi.moehamed.googlepages.com/read-moreotomatis.js' type='text/javascript'/>

 Keterangan :

summary_noimg = 430; adalah tinggi potongan artikel tanpa gambar
summary_img = 340; adalah tinggi potongan artikel dengan gambar
img_thumb_height = 100; adalah ukuran tinggi thumbnail
img_thumb_width = 120; adalah ukuran lebar thumbnail

• Selanjutnya cari kode <data:post.body/> atau <p><data:post.body/></p>

Setelah itu untuk cara membuat read more button dengan menggunakan gambar, hapus kode tersebut dan ganti dengan kode berikut :

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>
<span style='float:right'><a expr:href='data:post.url'><img alt='Read More..' src='http://1.bp.blogspot.com/-IHpf1c0gAZE/TahDsOmCrCI/AAAAAAAAAy0/lOZgwgw7eHg/s1600/pelajaran%2Bblog%2Bread%2Bmore%2Botomatis.jpg'/></a></span>
<b:else/>
<data:post.body/>
</b:if>

Sedangkan untuk cara membuat read more button dengan menggunakan teks, hapus kode tersebut dan ganti dengan kode berikut :

 <b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>
<span style='float:right'><a expr:href='data:post.url'>Read More..</a></span>
<b:else/>
<data:post.body/>
</b:if>

• Setelah itu simpan template dan lihat perubahan blog anda
• Semoga berhasil

Tags :
Cara membuat read more otomatis pada blogspot, Cara membuat readmore dengan gambar pada blog, Tutorial blogspot, Cara mempercantik tampilan blog, Cara memasang read more pada blogspot

Tweet