Bagaimana Cara Membuat Read More Otomatis di Blogspot- Membuat read more ataupun baca selengkapnya diblog memang sudah menjadi hal wajib yang harus kita lakukan untuk membuat blog kita kelihatan efisien, rapi dan indah. Namun terkadang kita sering merasa repot juga jika harus selalu memenggal postingan kita secara manual, atau mungkin sebagian lagi sering lalai melakukannya. Nah kali ini saya akan mengajak anda mengetahui bagaimana cara membuat read more otomatis untuk mempermudah pekerjaan anda, berikut adalah caranya.
Pertama anda masuk dasbord blogger >> lalu pilih rancangan >> Pilih Edit HTML.
Jangan lupa centang Expand Template Widget.
Lalu anda cari kode </head>
Untuk mempermudah pencarian tekan F3 atau boleh juga dengan menekan Control + F
Kemudian, masukan kode berikut tepat ditas </head>
<script type='text/javascript'> var thumbnail_mode = "no-float" ; summary_noimg = 430; summary_img = 340; img_thumb_height = 100; img_thumb_width = 120; </script>
<script type='text/javascript'>
//<![CDATA[
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>
Lalu setelah itu, anda cari kode <data:post.body/>
Kemudian anda hapus kode itu, dan ganti dengan kode dibawah 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 class='rmlink' style='float:right;padding-top:20px;'>
<a expr:href='data:post.url'> <b>Read more</b> »»   </a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/>
</b:if>
Lalu anda save.
Kemudian silahkan buat artikel baru, jangan lupa... biarkan saja seperti itu ketika anda publikasikan, jangan diberi penggalan read more manual seperti yang biasa anda lakukan, sebab kita ingin membuktikan hasilnya.
Dan setelah itu, silahkan lihat hasilnya. Mantapp bukan...!!!
Nah silahkan berikan koment sebagai ucapan terimakasih pada iBlogle, hehe..
Tidak ada komentar:
Write komentar