Cara Membuat Auto Read More dengan Gambar

          Halooooo….Kembali lagi dengan saya Bayu si Newbie Blogger. Di Postingan kali ini saya akan memberi sedikit tutorial Cara Membuat Read More dengan Gambar dan Auto Read More. OK, Langsung saja ke Postingannya.

          Biasanya banyak orang yang menggunakan Read More classic atau sebut saja dengan istilah Read More dengan Tulisan. Kali ini saya akan Memberi tau sedikit tutorial Cara Membuat Read More dengan Gambar dan Auto Read More.

Langkah – Langkah nya :

1.)    Login Blogger

2.)    Back up template kalian dahulu, ini bertujuan supaya jika anda salah dalam Kode HTML anda bisa tinggal Back up tema kalian tadi.

3.)    Jika sudah, Pilih Template   -->  Edit HTML

4.)    Kita sudah masuk ke Tahap Edit HTML, Centang kotak tulisan Expand Template Widget

5.)    Jika sudah langkah pertama cari Kode HTML :

</head>

6.)    Jika sudah ketemu, Letakkan Kode HTML di bawah ini tepat di atas Kode </head>

<script type='text/javascript'>

var thumbnail_mode = &quot;float&quot; ;

summary_noimg = 250;

summary_img = 250;

img_thumb_height = 120;

img_thumb_width = 120;

</script>

<script type='text/javascript'>

//<![CDATA[

/******************************************

Auto-readmore link script, version 2.0 (for blogspot)

(C)2008 by Anhvo

visit http://en.vietwebguide.com to get more cool hacks

********************************************/

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>

7.)    Jika sudah, jangan di Save Template dulu. Masih ada Langkah selanjutnya.

Sekarang cari Kode HTML :

<data:post.body/>

8.)    Hapus / Replace kode <data:post.body/>  kemudian ganti dengan Kode di bawah ini :

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

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

<div style='float:right;padding:10px 0px 5px 0px'>

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

<span class='rmlink' style='float:left'><a expr:href='data:post.url'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFLE1FivGuIT6Ajs8nQKaY28ssOX4Aci9GAITtZ2N__iSaOv7bTUJNth2QF4CbkrY8Bb3tamObubjO0pSVeqMQBADaBchzEIlAxkAImHVrMvtAIqAg07x86m0QMPnIBhqBru5BFPpFAKQ/s1600/readmore1.jpg'/></a></span>

</div>

</b:if>

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

9.)    Jika kalian sudah yakin benar, Klik Save Template. Tetapi  jika masih ragu-ragu Klik Pratinjau dahulu

NB :

var thumbnail_mode = “float”;  (Letak thumbnail berada di (float) kiri atau jika tidak silahkan ganti dengan (no-float)

summary_noimg = 250; (Banyak karakter yang akan ditampilkan di posting tanpa / thumbnail)

summary_img = 250; (Banyak karakter yang akan ditampilkan di posting dengan / thumbnail)

img_thumb_height = 120; (Thumbnail ’tinggi dalam piksel)

img_thumb_width = 120; (Thumbnail ’lebar dalam piksel)

Ganti url gambar Read More 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFLE1FivGuIT6Ajs8nQKaY28ssOX4Aci9GAITtZ2N__iSaOv7bTUJNth2QF4CbkrY8Bb3tamObubjO0pSVeqMQBADaBchzEIlAxkAImHVrMvtAIqAg07x86m0QMPnIBhqBru5BFPpFAKQ/s1600/readmore1.jpg' dengan URL Gambar Read More punya kalian.

Ganti  letak perataan kode <div style='float:right;padding:10px 0px 5px 0px'> sesuai keinginan kalian.



Mudah Kan ?
Kalo ada yang gak tau Comment aja

ARTIKEL TERKAIT: