Cara Membuat Read More Otomatis Pada Blogger Plus Thumbnail

Berikut ini adalah tutorial bagaimana cara membuat read more otomatis pada blog di blogger plus thumbnail dengan menggunakan javascript yang akan memudahkan kita mengatur besarnya gambar thumbnail yang ingin ditampilkan begitu pula dengan jumlah teks snippet yang akan tampil bisa kita sesuaikan dengan kebutuhan kita.

Caranya adalah :

1. Masuk ke bagian pengeditan HTML pada dashboard blogger anda kemudian tampilkan fungsi search dengan cara menekan tombol ctrl + F untuk menemukan kode seperti ini : </head>

2. Setelah anda temukan kode </head> letakan script berikut ini diatasnya

<!-- readmore plus thumbnail part 1 start -->
<script type='text/javascript'>
var thumbnail_mode = &quot;float&quot; ;
summary_noimg = 200;
summary_img = 150;
img_thumb_height = 150;
img_thumb_width = 200;
</script>

<script type='text/javascript'>
//<![CDATA[

function removeHtmlTagundefinedstrx,chop){
ifundefinedstrx.indexOfundefined"<")!=-1)
{
var s = strx.splitundefined"<");
forundefinedvar i=0;i<s.length;i++){
ifundefineds[i].indexOfundefined">")!=-1){
s[i] = s[i].substringundefineds[i].indexOfundefined">")+1,s[i].length);
}
}
strx = s.joinundefined"");
}
chop = undefinedchop < strx.length-1) ? chop : strx.length-2;
whileundefinedstrx.charAtundefinedchop-1)!=' ' && strx.indexOfundefined' ',chop)!=-1) chop++;
strx = strx.substringundefined0,chop-1);
return strx+'...';
}

function createSummaryAndThumbundefinedpID){
var div = document.getElementByIdundefinedpID);
var imgtag = "";
var img = div.getElementsByTagNameundefined"img");
var summ = summary_noimg;
ifundefinedimg.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img

[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height

+'px"/></span>';
summ = summary_img;
}

var summary = imgtag + '<div>' + removeHtmlTagundefineddiv.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>
<!-- readmore plus thumbnail part 1 end -->

3. Setelah itu temukan kode ini : <data:post.body/>, lalu ganti kode tersebut dengan script read more otomatis blogger plus thumbnail bagian kedua. (biasanya terdapat lebih dari satu kode <data:post.body/> , pilih kode yang kedua atau ketiga)

<!-- readmore plus thumbnail part 2 start -->
<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

undefined&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>
<!-- readmore plus thumbnail part 2 end -->

4. Tekan tombol "Preview template" yang ada dibagian atas, untuk melihat apakah trik ini sudah berhasil atau belum.

5. Kesalahan yang sering terjadi adalah saat melakukan langkah pada point 3. Bila setelah di preview trik ini belum berhasil, hapus script bagian satu dan ganti dengan <data:post.body/> lalu coba pada <data:post.body/> yang anda temukan berikutnya.

6. Bila setelah di preview berhasil, simpan template anda.

7. Anda bisa melakukan beberapa penyesuaian sesuai selerea anda pada beberapa bagian berikut ini :

1. summary_noimg = 200;  Ganti angka 200 untuk merubah jumlah karakter yang ditampilkan pada artikel yang tidak memiliki gambar.
2. summary_img = 150; Ganti angka 150 dengan angka lain untu merubah jumlah karakter yang akan ditampilkan pada artikel yang memiliki gambar.
3. img_thumb_height = 150; Ganti angka 150 untuk merubah tinggi gambar pada read more secara otomatis
4. img_thumb_width = 200; Ganti angka 200 dengan angka lain untuk merubah lebar gambar pada read more secara otomatis.
5. Read More.. ; Silahkan ganti kata tersebut yang terdapat pada script 2 untuk disesuaikan dengan selera anda.

Setelah membaca artikel belajar blogger tentang cara membuat read more otomatis pada blogger plus thumbnail diatas, bila masih terdapat kendala, silahkan sampaikan melalui form komentar dibawah ini !.