Cara Membuat READ MORE Pada Blog OTOMATIS MUDAH 2013

Blog ini sekarang banyak membahas tentang tutorial blogspot, dan yang dibahas adalah tutorial dasar atau awal semisal dari cara membuat email, membuat blog dan semisalnya. Dalam keadaan blog itu jika telah jadi tentu tidak bisa langsung tulis saja, tapi perlu dilakukan beberapa perubahan semisal menambahkan read more otomatis untuk mempercantik tampilan blog.

Dari beberapa teman yang baru mengikuti panduan membuat blog blogspot disini, dan minta dikunjungi, saya lihat masih banyak yang belum memasang read more atau baca selengkapnya sehingga dirasa perlu untuk memberikan tutorial cara membuat read more pada blog agar tips blogging ini terus bersambung dan mungkin nanti akan menjadi panduan lengkap cara membuat blog dari awal.

Sebenarnya pada artikel Bagaimana cara menulis artikel di blogspot untuk pemula pada point ke 13 sudah dijelaskan cara memotong tampilan artikel agar tidak panjang alias tehnik membuat read more tapi itu cara manual, dan cukup merepotkan jika harus menggunakannya setiap kali posting. sehingga kita gunakan saja "baca selanjutnya" yang otomatis 

Kalau anda menggunakan template dari situs tempat dowload template keren, bisa dikatakan hampir semuanya sudah menggunakan read more otomatis sehingga tutorial ini mungkin kurang menarik untuk anda.

Cara Membuat Readmore Otomatis di Blogger

1. Silahkan login ke Blogger > Template
2. Supaya lebih aman, klik tombol Cadangkan / Pulihkan yang ada di pojok kanan > Unduh Template Lengkap, setelah selesai template terunduh, tekan Tutup
3. Sekarang klik tombol Edit HTML.
4. Copy kode ini:
</head>
5. Letakkan kursur DI DALAM kotak Edit HTML.
6. Tekan CTRL+F untuk mencari lalu tekan CTRL+V lalu tekan ENTER
7. Setelah ketemu kode </head> , maka letakkan kode berikut diatas </head>

<script type='text/javascript'>
var thumbnail_mode = &quot;float&quot; ;
summary_noimg = 250;
summary_img = 220;
img_thumb_height = 120;
img_thumb_width = 220;
</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>

8. Sekarang cari kode <data:post.body/> sebagaimana anda tadi mencari </head> maka akan anda temui kode tersebut tidak hanya satu. sehingga kita harus coba-coba, tapi mulailah dari <data:post.body/> yang paling bawah atau akhir.

Jika sudah ketemu yang paling akhir, maka ganti kode tersebut dengan ini:

 <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'><b>Baca Selengkapnya</b> &#8594; <a expr:href='data:post.url'><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>

9. Klik Pratinjau Template untuk melihat apakah artikel di homepage anda sudah menampilkan baca selengkapnya kemudian judul artikel. Contohnya seperti di blog ini  http://inibeli.blogspot.com/

Jika belum berhasil maka klik tombol Edit Template  lalu hapus script yang baru saja anda tambahkan tadi atau tekan CTRL + Z. Sekarang coba ganti dengan <data:post.body/> yang ada di atasnya, semoga kali ini anda berhasil. Jika ketika di Pratinjau sudah terpasang dengan benar klik tombol Save Template.

Jika anda ingin mengatur seberapa panjang teks yang di tampilkan atau seberapa besar gambar yang dimuat berikut ini keterangannya:

summary_noimg = 250;  adalah banyaknya karakter yang ditampilkan ketika postingan anda tidak ada gambar

summary_img = 220; adalah banyaknya karakter yang ditampilkan ketika postingan atau pada artikel anda terdapat gambar.

img_thumb_height = 120; adalah tinggi gambar thumbnail

img_thumb_width = 220; adalah lebar gambar thumbnail

Anda bisa juga mengganti BACA SELENGKAPNYA dengan kata-kata lain.

Demikian artikel Cara Memasang Read More Pada Artikel di Blog. Silahkan baca artikel lainnya, terima kasih.