Salam Blogger, terima kasih berkenan berkunjung di Blog ini. Artikel kali ini akan menjelaskan Cara Mudah Membuat Auto Read More atau umum disebut Baca Selengkapnya. Apa sebenarnya kegunaan auto read more ini ? Kilas balik saja, jika anda pertama kali membuat blog ( blogspot khususnya ) Anda akan mendapatkan template Original atau asli bawaan blogger ( pastinya anda tahu kan ? ).
Template bawaan Blogeer pada umumnya tanpa read more atau baca selengkapnya. Kegunaan read more ( baca selengkapnya ) adalah sebagai sinopsis atau rangkuman dari semua isi artikel yang Anda posting.
Artinya posting Anda tidak di tampilkan secara keseluruhan namun hanya artikel bagian awal saja yang nampak ( sesuai settingan pada kode script ). Hal ini juga menimbulkan efektifitas View BLOG Anda. Pengunjung juga bisa lebih leluasa melihat seluruh posting Anda tanpa harus banyak scroll ke bawah.
Catatan: Jika anda menggunakan template dari situs dowload template pada umumnya sudah menggunakan read more otomatis. Namun tetap waspada setiap download template, karena tidak menutup kemungkinan template yang anda download mengandung malware dan dampaknya jelas merugikan loading blog Anda lambat atau peringatan by E-mail dari Google.
Membuat Readmore Otomatis di Blogger
1. Login ke Blogger► Template
2. Klik tombol Cadangkan / Pulihkan di pojok kanan ► Unduh Template Lengkap, setelah template terunduh, tekan Tutup ( biasanya dalam bentuk tgl,bulan th.xml = 17.05.14.xml)
3. Kemudian tombol Edit HTML.
4. Copy kode ini : </head>
5. Tekan CTRL+F untuk lebih cepatnya, lalu copy pastekan </head> pada kolom ► enter
6. Setelah ketemu kode </head> , letakkan kode berikut diatas </head>
CSS
<script type='text/javascript'>
var thumbnail_mode = "float" ;
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>
7. Kemudian cari kode <data:post.body/> caranya sama seperti anda mencari kode </head>
Catatan : Jika anda temui kode tersebut lebih dari satu. Gunakan <data:post.body/> yang kedua. Jika tidak berhasil..! kita harus coba-coba, mulai dari <data:post.body/> yang paling akhir.
CATAT DENGAN BAIK DI BARIS BERAPA ANDA MENGGANTIKAN <data:post.body/>
8 . Jika sudah ketemu kode <data:post.body/> yang kedua, maka ganti kode tersebut dengan kode dibawah ini:
HTML
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<span class='rmlink' style='float:left'><b>Baca Selengkapnya</b> → <a expr:href='data:post.url'><data:post.title/></a></span>
</b:if></b:if>
<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>
</b:if>
<b:if cond='data:blog.pageType == "static_page"'><data:post.body/></b:if>
9. Klik Pratinjau Template terdebih dahulu, jangan langsung Save. Hal ini untuk memastikan apakah script berjalan dengan baik. Jika berjalan baik Anda bisa SAVE
Sangat penting :
01. Jika tidak berhasil ( hapus script pada no. 8 tadi ) pada baris berapa Anda mengantikan kode <data:post.body/> dengan kode script no. 8.
02. Anda coba kembali pada cara no 8 ( lihat tulisan warna hijau ), MASUDNYA hapus script..! no. 8 dan gantikan kembali dengan <data:post.body/>. Lalu coba gantikan <data:post.body/> yang terakhir, dengan script no.8
03. Ulangi cara no.9 jika berhasil tekan save.
Untuk setting 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
Catatan.: Semua cara edit HTML memiliki resiko kesalahan, ( baca no. 2 ) ► untuk menghindari kesalahan ( template blog Anda AMAN dan kembali seperti default-nya ).
Demikian artikel Cara Mudah Membuat Auto Read More atau Baca Selengkapnya. Silahkan tinggalkan komentar jika terjadi masalah pada editing HTML. Dengan senang hati saya akan membantu menyelesaikannya…Terima kasih.