Cara Membuat Auto ReadMore (Thumbnails) Blogger V2 dengan Button

Script auto readmore blogger/blogspot dengan thumbnails (gambar preview) ini adalah penyempurnaan dari script auto readmore V1, di mana ditemukan adanya masalah pada halaman statis. Ketika halaman statis ditampilkan, auto readmore ikut muncul, sehingga harus diberi pengecualian (b if cond & b else) untuk static pages pada scriptnya. Selain itu, javascript dlm auto readmore ini juga bersifat internal jadi tidak perlu lagi memuat file .js eksternal yang diupload ke hosting lain. Meskipun file template menjadi sedikit lebih besar, namun loading  page menjadi lebih cepat daripada auto readmore sebelumnya.

Langkah-langkahnya:

• Masuk ke dashboard > Template > Edit HTML. Download/back up file XML template terlebih dahulu agar nanti bisa mengembalikan seperti semula jika ada kesalahan.
• Jika dulu sudah diisi script auto readmore yang pertama, hapus terlebih dahulu, gunakan panduan dari posting auto readmore V1 untuk mengetahui mana saja yang harus dihapus dan dikembalikan.
• Copy-paste script berikut tepat DI BAWAH </head> (gunakan Ctrl+F dan masukkan tag di dalam kotak search, tekan enter):

01	<!-- Auto read more script -http://www.mikaila-tech.com/ Start -->

02	<script type='text/javascript'>

03	var thumbnail_mode = "yes"; //yes-dengan gambar,no-tanpa gambar

04	summary_noimg = 430;

05	summary_img = 340;

06	img_thumb_height = 150;

07	img_thumb_width = 150;

08

</script>

09	<script type='text/javascript'>

10	//<![CDATA[

11	function removeHtmlTag(strx,chop){

12	if(strx.indexOf("<")!=-1)

13

{

14	var s = strx.split("<");

15	for(var i=0;i<s.length;i++){

16	if(s[i].indexOf(">")!=-1){

17	s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);

18

}

19

}

20	strx =  s.join("");

21

}

22	chop = (chop < strx.length-1) ? chop : strx.length-2;

23	while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;

24	strx = strx.substring(0,chop-1);

25	return strx+'...';

26

}

27

28	function createSummaryAndThumb(pID){

29	var div = document.getElementById(pID);

30	var imgtag = "";

31	var img = div.getElementsByTagName("img");

32	var summ = summary_noimg;

33	if(thumbnail_mode == "yes") {

34	if(img.length>=1) {

35	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>';

36	summ = summary_img;

37

}

38

}

39	var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';

40	div.innerHTML = summary;

41

}

42

//]]>

43

</script>

44	<!-- Auto read more script -http://www.mikaila-tech.com- End -->

1. summary_noimg=jumlah karakter tanpa gambar, 
2. summary_img=jumlah karakter dengan gambar, 
3. sedangkan img_thumb_height dan img_thumb_width adalah ukuran gambar (tinggi dan lebar [dalam pixel]).

Ubahlah poinpoin tersebut sesuai dengan keinginan.

• Kemudian cari <data:post.body/> (gunakan Ctrl+F, masukkan kode ke dalam kotak pencarian, tekan enter), dan GANTI dengan:

01	<!-- Auto read more -http://www.mikaila-tech.com- Start -->

02	<b:if cond='data:blog.pageType == &quot;item&quot;'>

03	<data:post.body/>

04

<b:else/>

05	<b:if cond='data:blog.pageType == &quot;static_page&quot;'>

06	<data:post.body/>

07

<b:else/>

08	<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>

09	<script type='text/javascript'> createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);

10

</script>

11	<a class='more' expr:href='data:post.url'>Read More >></a>

12

</b:if>

13

</b:if>

14	<!-- Auto read more -http://www.mikaila-tech.com- End -->

Keterangan

Ganti Read More >> dengan kata-kata yang diinginkan. Atau jika ingin menggantinya dengan gambar, ganti tulisan berwarna biru tersebut dengan:

<img border='0' src='url (direct link) gambar readmore'/>

Contoh :

<a class='more' expr:href='data:post.url'><img border='0' src='http://linkgambar.com/gambar-readmore.png'/></a>

• Atau anda menggunakan gambar yang anda buat kemudian anda upload dan anda sisipkan link gambar tersebut

Selamat mencoba