Read More Otomatis dengan Thumbnail

Gratis Belajar Corel Free untuk kalian pecinta CORELDraw dimanapun berada. Kami tidak menerima request, nikmati saja apapun yang ada di website kami. Semoga kalian semua beruntung, bahagia dan silahkan berkunjung kapanpun kalian mau.

Pemenggalan kalimat atau readmore langsung bekerja secara otomatis tanpa harus menekan icon readmore pada menu bar. Fungsi readmore ini mampu menampilkan image (gambar) thubnail pertama dengan ukuran yang sudah ditentukan dalam postingan diawal paragraf pertama, meskipun gambar yang kita letakan berada ditengah atau akhir postingan dan berapapun ukuran gambar dalam postingan tetap akan sama besar pada tampilan di homepage atau tampilan labels/kategory, dalam read more ini kita juga dapat mengatur jumlah karakter yang ditampilkan. Disini ada dua pilihan untuk jumlah karakter, yang pertama, jumlah karakter yang ditampilkan jika ada image (gambar) yang disertakan pada postingan dan yang kedua jumlah karakter tanpa image (gambar) pada postingan. Untuk lebih jelasnya lihat gambar dibawah ini!

Langkah Pertama;

Login Blogger > pilih Template > pilih  EDIT HTML, Cari kode </head> kemudian letakan script dibawah ini di atas kode </head> Kalau sudah, simpan terlebih dahulu.

<script type='text/javascript'>summary_noimg = 600;summary_img = 440;img_thumb_height = 125;img_thumb_width = 125;</script><script type='text/javascript'>//<![CDATA[function removeHtmlTag(strx,chop){ if(strx.indexOf("<")!=-1){var s = strx.split("<"); for(var i=0;i<s.length;i++){ if(s[i].indexOf(">")!=-1){ s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length); } } strx = s.join(""); }chop = (chop < strx.length-1) ? chop : strx.length-2; while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++; strx = strx.substring(0,chop-1); return strx+' [....]'; }function createSummaryAndThumb(pID){var div = document.getElementById(pID);var imgtag = "";var img = div.getElementsByTagName("img");var summ = summary_noimg;if(img.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>' + removeHtmlTag(div.innerHTML,summ) + '</div>';div.innerHTML = summary;}//]]></script>

Langkah kedua;

Tetap pada Edit HTML, tekan Ctrl+F temukan kode seperti dibawah

<data:post.body/>

pada template blogger kode ini ada 3, pilih yang nomor 2 dan ganti kode <data:post.body/> dengan semua kode dibawah ini;

<b:if cond='data:blog.pageType != "item"'><div expr:id='"summary" + data:post.id'><data:post.body/></div><script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script><span class='rmlink' style='float:left'><a expr:href='data:post.url'>Read more &#187;</a></span></b:if><b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

Silahkan disimpan dan lihat hasilnya.

Keterangan:

summary_noimg = 600; (Menetapkan berapa banyak karakter akan ditampilkan di posting tanpa gambar)

summary_img = 440; (Menetapkan berapa banyak karakter akan ditampilkan di posting dengan gambar)

img_thumb_height = 125; (Thumbnail tinggi dalam satuan px)

img_thumb_width = 125; (Thumbnail lebar dalam satuan px)

Sekian.

Source: belajarcoreldraw.co