Cara Mudah Membuat Read More Otomatis

Cara Mudah Membuat Read More Otomatis – banyak para blogger yang masih kebingungan untuk membuat read more secara otomatis di blog mereka, walaupun banyak sekali artikel-artikel yang mebahas bagaimana cara membuat read more otomatis. Hal ini disebabkan karena banyaknya artikel yang copas padahal si pemilik blog sendiri tidak faham dengan caranya. Disini saya akan menjelaskan cara membuat readmore otomatis secara detail sehingga blogger pemula sekalipun bisa membuatnya.

Fungsi dari pemasangan Read More :

1. Menghemat Ruang pada tampilan halaman utama sebuah website.
2. Menjadi Lebih Elegant dan Interaktif.
3. Membuat pengunjung membaca artikel tersebut hingga selesai.
4. Menambah pageviews artikel yang dibaca oleh pengunjung.
5. Menambah Link Anchor terhadap keyword judul.

Nah bagi agan-agan yang ingin memasang read more pada blog agan-agan silahkan ikuti cara-caranya di bawah ini :

• Login/Masuk ke Blogspot anda.
• Pilih Pada Pengaturan Template.
• Backup template sebelum mendesain template anda, ini berfungsi untuk berjaga-jaga mengembalikan pengaturan anda ke default sebelum anda edit apabila terjadi kesalahan.
• Edit HTML → proses centang "Expand Template Widget" .
• Tekan Ctrl+F untuk mencari kode </head>
• Tambahkan kode dibawah ini tepat diatas kode tersebut atau dibawah kode ]]></b:skin>

<!-- kode Read More -->
<script type='text/javascript'>
var thumbnail_mode = &quot;float&quot; ;
summary_noimg = 230;
summary_img = 250;
img_thumb_height = 60;
img_thumb_width = 60;
</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>

• Tekan Ctrl+F untuk mencari kode <data:post.body/>

• Tambahkan kode berikut tepat dibawah kode tersebut dan diatas kode penutup </b:if>

<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script><span class='rmlink' style='float:right;padding-top:20px; border:1px solid #fff;'>
<a expr:href='data:post.url'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwaWgWLzzRXhHfA1wuMt1YVE6xR70jBkt2rKSDFpspmOxvH5LlAXZS9GMyHkuNquH4CPEUcF6-oreljk5sT4JXqmR2eI6NLt4e5mbQekkLE1k5WDnqmEcMu6EqN9P8MxmYOD4rU1gUF5E/s74/readmore_thumb.gif'/></a></span>

• Maka anda akan memperoleh hasil seperti berikut ini :

<div class='post-header'>
    <div class='post-header-line-1'/>
    </div>
    <div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' itemprop='articleBody'>
<b:if cond='data:blog.pageType != &quot;item&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:right;padding-top:20px;'>
<a expr:href='data:post.url'><img src='http://lh3.ggpht.com/_kTaFrEr_318/SkKGIoU-oPI/AAAAAAAAA9g/5A_nTHvFgiI/readmore_thumb%5B2%5D.gif'/></a></span>
</b:if><b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
      <div style='clear: both;'/> <!-- clear for photos floats -->
    </div>

• Silahkan lihat tampilan blog anda, jika anda melakukannya sesuai langkah-langkah diatas maka pasti Read More Otomatis pada blog anda akan terpasang dengan sukses.

Beberapa keterangan yang harus anda ketahui :

• Kode <data:post.body/> tidak hanya ada satu, pilih kode pertama atau sesuaikan.
• Untuk link gambar http://lh3.ggpht.com/_kTaFrEr_318/SkKGIoU-oPI/AAAAAAAAA9g/5A_nTHvFgiI/readmore_thumb%5B2%5D.gif bisa disesuaikan dengan kebutuhan
• Summary_noimg = 230; adalah jumlah karakter yang tampil, summary_img = 250; adalah gambar yang tampil di depan konten post jika posting menggunakan gambar, img_thumb_height = 60;, img_thumb_width = 60; adalah tinggi dan lebar gambar yang tambil di depan konten post. 

Demikianlah tadi postingan kali initentang Cara Mudah Membuat Read More Otomatis dan semoga bermanfaat. Terimakasih.

• Tweet

Judul: Cara Mudah Membuat Read More Otomatis
Rating: 100% based on 99998 ratings. 5 user reviews.
Ditulis Oleh KANG COPPY 23:04

Artikel Terkait Tutorial Blog :