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.