Cara Membuat Read more Otomatis dengan Mudah di Blogger

Cara Membuat Read more atau Baca Selengkapnya Otomatis dengan Mudah di Blogger atau Blogspot - Hai sobat ketemu lagi dengan saya dewan komputer dan kali ini saya akan membahas tantang cara membuat readmore atau baca selengkapnya yang biasanya ada pada beranda blog sobat. Dengan readmore ini maka hanya sepotong saja postingan yang ditampilkan karena jika terlalu banyak maka tidak enak dipandang karena terlalu panjang dan juga pengunjung langsung bisa melihat banyak postingan sehingga kita hanya mendapatkan 1 klik saja dari pengunjung yang seharusnya 5 misalkan.
Namun jika untuk para newbie pasti pertama-tama akan kebingungan terlebih saat baru mengunggah tema baru yang tidak ada fasililtas readmorenya. Saya dulu juga sempat kebingungan tetapi setelah mencari-cari akhirnya saya sudah bisa dan tidak kebingungan lagi.

Cara Membuat Read more Otomatis dengan Mudah di Blogger

Cara ini sangatlah mudah, simple, dan sederhana karena tidak memerlukan gambar atau tanpa gambar sehingga lebih ringan. Langsung saja menuju langkah-langkahnya yaitu :
1. Buka Dashbor blogger sobat.

2. Kemudian masuk ke Template => Edit HTML

3. Patekan kode di bawah seperti gambar pas dibawah <head>
Kodenya :
<script type='text/javascript'>
var thumbnail_mode = &quot;float&quot; ;
summary_noimg = 150;
summary_img = 150;
img_thumb_height = 80;
img_thumb_width = 120;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(b,a){if(b.indexOf("<")!=-1){var d=b.split("<");for(var c=0;c<d.length;c++){if(d[c].indexOf(">")!=-1){d[c]=d[c].substring(d[c].indexOf(">")+1,d[c].length)}}b=d.join("")}a=(a<b.length-1)?a:b.length-2;while(b.charAt(a-1)!=" "&&b.indexOf(" ",a)!=-1){a++}b=b.substring(0,a-1);return b+" [...]"}function createSummaryAndThumb(d){var f=document.getElementById(d);var a="";var b=f.getElementsByTagName("img");var e=summary_noimg;if(b.length>=1){a='<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+b[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';e=summary_img}var c=a+"<div>"+removeHtmlTag(f.innerHTML,e)+"</div>";f.innerHTML=c};
//]]>
</script>

Keterangan :
Sobat bisa ganti tulisan yang berwarna merah sesuai yang sobat inginkan.
- summary_noimg = banyaknya huruf jika tidak ada gambarnya.
- summary_img = banyaknya huruf jika ada gambarnya.
- img_thumb_height = ukuran tinggi dari gambarnya.
- img_thumb_width = ukuran lebar dari gambarnya.
4. Cari lagi kode <data:post.body/> dan pastekan seperti gambar dibawah pada pembuka sampai penutupnya atau lebih pas disebut MENGGANTI <data:post.body/> 
 Pada gambar yang diblok semua bisa dihapus dan langsung pastekan kodenya dan jadinya seperti gambar dibawah masih dibawah </Post Header>

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

    <div class='entry-utility'>
    <div class='post-footer-line post-footer-line-1'>

        <b:if cond='data:top.showReactions'>
        <span class='reaction-buttons'>
          <table border='0' cellpadding='0' cellspacing='0' width='100%'><tr>
            <td class='reactions-label-cell' nowrap='nowrap' valign='top' width='1%'>
              <span class='reactions-label'>
              <data:top.reactionsLabel/></span>&#160;</td>
            <td><iframe allowtransparency='true' class='reactions-iframe' expr:src='data:post.reactionsUrl' frameborder='0' name='reactions' scrolling='no'/></td>
           </tr></table>
        </span>
        </b:if>

Keterangan :
Tulisan Readmore yang berwarna merah bisa sobat ganti dengan tulisan lainnya seperti "Baca Selengkapnya", Lanjutkan Membaca", dan lain-lain.

5. Selanjutnya Simpan Templates

Jika sobat buka seharusnya sudah jadi Readmore-nya. Sekian postingan tentang Cara Membuat Read more Otomatis dengan Mudah di Blogger. Apabila ada pertanyaan bisa ditanyakan pada kotak komentar yang telah disediakan dibawah. Semoga bermanfaat dan sampai ketemu lagi di postingan saya selanjutnya...
Previous
Next Post »

1 komentar:

Click here for komentar
18 Juni 2015 pukul 05.11 ×

Terimakasih infonya...

Congrats bro Gaya Hidup Sehat you got PERTAMAX...! hehehehe...
Reply
avatar

Jika Anda ingin bertanya silahkan berkomentar dengan sopan gan dan JANGAN PASANG LINK DI KOMENTAR.... ConversionConversion EmoticonEmoticon