Tutorial Membuat Read More Bergambar Otomatis

AKUMARU.com 6:05 AM Tutorial Blogger 4 comments

Contoh postingan yang menggunakan readmore

Tutorial Membuat Readmore Bergambar Otomatis - Tidak semua template mempunyai fitur readmore bergambar yang otomatis. Atau template yang telah memiliki readmore otomatis namun bila postingan kita tidak ada gambarnya, template secara otomatis akan menampilkan gambar "no image". Yang menurut saya agak menggangu.

Pada Tutorial kali ini, saya akan mencoba untuk memberikan informasi bagaimana cara membuat readmore bergambar otomatis, artinya hanya postingan 300 kata pertama atau 200 kata pertama saja yang tampil, tergantung setingan sobat. Dan apabil postingan memiliki gambar, maka akan ditampilkan juga di homepage, namun bila tidak ada gambar, maka tidak akan ditampilkan.

Bagaimana sob? Ingin mencoba Tutorial Membuat Readmore Bergambar Otomatis ? Silahkan ikuti step by step dibawah ini, semoga dapat membantu sobat sekalian :

Langkah-Langkah :

Lakukan Intro (login blogger -> edit HTML)
Click ctrl + F untuk mencari code <head>
Letakkan script dibawah ini tepat dibawah code <head>

# Anda dapat mengcopy code dibawah disini #

<script type='text/javascript'>
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
<script type='text/javascript'>
var thumbnail_mode = "yes"; //yes-dengan gambar,no-tanpa gambar
summary_noimg = 300;
summary_img = 255;
img_thumb_height = 100;
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(thumbnail_mode == "yes") {
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>

Cari code <data:post.body/>, biasanya setiap template ada lebih dari satu code tersebut, coba satu per satu atau coba pada <data:post.body/> yang ada pada code di bawah ini :
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
Ganti code tersebut (<data:post.body/>) dengan code dibawah ini:

# Anda dapat mengcopy code dibawah disini #

<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>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/>
</b:if>

Keterangan :

300 = jumlah karakter read more artikel tanpa gambar.
255 = jumlah karakter read more artikel dengan gambar.
100 = tinggi gambar artikel yang ingin ditampilkan pada read more.
125 = lebar gambar artikel yang ingin ditampilkan pada read more.

Semoga berhasil sob, dan semoga bermanfaat tutorialnya.. :)