Membuat Auto Read More
Membuat Auto Read More | Tutorial Blog
Auto Read More adalah opsi yang otomatis memotong artikel Sobat saat di tampilkan pada home page blog Anda. Auto Read More ini dilengkapi dengan pengaturan jumlah karakter, Ada 2 pengaturan jumlah karakter yaitu jumlah karakter Read More tanpa gambar dan jumlah karakter Read More dengan gambar.
Berikut cara membuat auto read more :
- Login ke akun Blogger Sobat, klik Design / Rancangan > Edit HTML.Penting!!! Biasakan men-Download / membackup template blog Anda sebelum mengedit template.
- Beri tanda centang pada Expand widget template, kemudian letakkan kode berikut ini di atas kode </head> (tekan Ctrl+F untuk mempermudah dalam pencarian kode)<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[
Baca Juga
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>Terakhir klik Pratinjau / Preview untuk melihat hasilnya. Jika Anda rasa sudah sesuai, klik tombol Simpan / Save Template.
",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>
Anda juga dapat merubah kode berikut:
var thumbnail_mode = "float";
summary_noimg = 250;
summary_img = 250;
img_thumb_height = 120;
img_thumb_width = 120;
Ganti angka pada summary_noimg untuk mengatur jumlah karakter yang tampil pada kutipan artikel tanpa gambar.
Ganti angka pada summary_img untuk mengatur jumlah karakter yang tampil pada kutipan artikel dengan gambar.
Ganti angka pada img_thumb_height untuk mengatur tinggi gambar yang tampil pada kutipan artikel.
Ganti angka pada img_thumb_width untuk mengatur lebar gambar yang tampil pada kutipan artikel.
Selanjutnya cari kode <data:post.body> lalu ganti dengan kode 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:left'><a expr:href='data:post.url'><b>More about</b> →</a></span>
</b:if>
<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'><a expr:href='data:post.url'><b>More about</b> →</a></span>
</b:if>
Ganti kata left dengan right untuk menampilkan link readmore di bagian kanan.
Ganti kata More about dengan kata yang Anda inginkan. Misalnya Read More,Baca Selengkapnya, Selanjutnya atau Seterusnya.
Catatan : Jika Sobat menggunakan opsi ini, Artikel pada halaman juga akan terpotong.
Semoga tutorial ini bisa berguna buat sobat yang ingin Membuat Auto Read More.
0 Response to "Membuat Auto Read More"
Post a Comment