Seperti yang pernah saya katakan bahwa di share berikutnya akan ada yang lebih menarik lagi dari sebelumnya.Memang trik memasang Read More atau Baca Selengkapnya tidak begitu spesial dan bisa terbilang mudah.Sebelumnya saya sudah pernah membahas tentang Pengenalan label dan fungsinya dengan sedikit pentujuk ringan.Baca Selengkapnya atau istilah populernya Read More merupakan dimana artikel yang kita buat terpotong menjadi beberapa suku kata saja.Banyak blogger yang menggunaan fitur ini karna alasan selain Profesional juga sangat menghemat Loading pada saat pengunjung berada di home page.Untuk lebih jelas silahkan lihat dan cermati gambar ilustrasi berikut ini :
Text " Baca artikel Selengkapnya " merupakan wakil dari link untuk menuju ke halaman Asli artikel tersebut.Gimana , sudah jelas ?Kalau sudah,silahkan ikuti tutorial di bawah ini untuk membuat read more otomatis di blogger.
Cara Membuat Read More Otomatis di Blog
1. Loggin ke blogger dengan ID Anda
2. Klik menu Template
5. Pilih button Edit HTML.
6. Jangan lupa untuk centang kolom Expand Template Widget.
7. Selanjutnya,cari kode
</head> 8. Jika sudah ketemu,letakkan Script berikut tepat di atas kode tadi.
<script type='text/javascript'>var thumbnail_mode = "float" ;summary_noimg = 150;summary_img = 150;img_thumb_height = 100;img_thumb_width = 120;</script><script type='text/javascript'>//<![CDATA[/******************************************Auto-readmore link script, version 2.0 (for blogspot)(C)2008 by Anhvovisit http://en.vietwebguide.com to get more cool hacks********************************************/function removeHtmlTag(strx,chop){if(strx.indexOf("<")!=-1){var s = strx.split("<");for(var i=0;i<s.length;i++){if(s[i].indexOf(">")!=-1){s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);}}strx = s.join("");}chop = (chop < strx.length-1) ? chop : strx.length-2;while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;strx = strx.substring(0,chop-1);return strx+'...';}function createSummaryAndThumb(pID){var div = document.getElementById(pID);var imgtag = "";var img = div.getElementsByTagName("img");var summ = summary_noimg;if(img.length>=1) {imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';summ = summary_img;}var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';div.innerHTML = summary;}//]]></script>
9. Cari Lagi kode seperti
<data:post.body/> atau <p><data:post.body/></p>10. Gantilah Script <data:post.body/> atau <p><data:post.body/></p>dengan kode di bawah ini
<b:if cond='data:blog.pageType != "item"'><div expr:id='"summary" + data:post.id'><data:post.body/></div><script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script><span style='float:right'><a expr:href='data:post.url'>Baca Selengkapnya..</a></span><b:else/><data:post.body/></b:if>
Keterangan : Kode yang berwarna merah bisa anda ganti dengan kata yang diinginkan.
12. Klik menu Simpan Template dan Lihat hasil kreasi anda.
Itulah trik singkat Cara membuat read more atau baca selengkapnya otomatis di blog dan semoga trik ini bisa anda gunakan dengan baik.Selamat mencoba dan semoga berhasil.
Ditulis oleh:
Gusput -
Judul Review : Cara Membuat Read More Otomatis di Blog
Penulis Blog
Hallo,nama saya Gusti Putu.Selamat membaca artikel di blog ini dan jika ada artikel saya yang kurang dimengerti,silahkan gunakan fasilitas Comment di bawah ini.
