Dalam posting artikel berikut ini
menunjukkan bagaimana Cara Membuat Read More Otomatis Artikel Di Homepage. Ada beberapa cara untuk membuat Read More
otomatis (Auto Read More). Biasanya Fitur Auto Read More ini ditambahkan di bawah
postingan artikel blog Di Homepage/Beranda.
Fungsi dari Read More Otomatis itu
sendiri merupakan salah satu teknik untuk membuat halaman homepage lebih
terlihat simple dan dinamis, dengan menampilkan judul, gambar dan sedikit
uraian sehingga memudahkan pengunjung untuk memilih judul artikel yang
diinginkan.
Untuk menambahkannya hanya memerlukan waktu beberapa menit saja. Read More Otomatis Artikel ini memiliki beberapa versi, dan untuk postingan berikut, akan diuraikan versi yang memiliki loading tercepat, sehingga sangat baik bagi Mesin Pencari.
Untuk menambahkannya hanya memerlukan waktu beberapa menit saja. Read More Otomatis Artikel ini memiliki beberapa versi, dan untuk postingan berikut, akan diuraikan versi yang memiliki loading tercepat, sehingga sangat baik bagi Mesin Pencari.
Berikut langkah-langkah Cara Membuat Read More Otomatis Artikel Di
Homepage (Beranda):
- Login Ke Blogger.
- Klik Template, Backup template untuk jaga2 bila diperlukan,
- atau langkah berikut bisa di uji coba menggunakan Blog percobaan yang lain.
- Klik Edit HTML.
- cari kode </head> untuk mempermudah gunakan ctrl+f copy paste kode dibawah ini tepat dibawah kode </head>
<script type='text/javascript'>
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 150;
img_thumb_width = 150;
img_thumb_nosrc = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKIKqYPO01HJ0tQ2KoIU9GKg0VD66Ivh3DXj174suTMQuPpeNiHfZ3mBXyJos_eHyj66Nd787ZOy9GFf4Q5mNEx2xPly-8vwCZq9rt54U5iE7Y9XYwaVjlFVNusHbTbthVYYl7OYytSZxi/s1600/default.png";
</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;
// this block of code is used to add default thumbnail to post without images
if(img.length<=1) {
imgtag = '<div style="clear:both; margin:0 10px 10px 0px;float:left;"><img src="'+img_thumb_nosrc+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></div>';
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>
<!-- Automatic read more script End -->
NOTE:
- summary_noimg = 430; adalah jumlah kata pada artikel yang tidak memiliki gambar
- summary_img = 340; kebalikannya dari summary_noimg, summary_img adalah jumlah kata-kata pada artikel yang mempunyai gambar.
- img_thumb_height = 150; adalah pengaturan ukuran tinggi dari gambar untuk auto readmore
- img_thumb_width = 150; adalah pengaturan dari ukuran lebar gambar untuk auto readmore
- img_thumb_nosrc = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKIKqYPO01HJ0tQ2KoIU9GKg0VD66Ivh3DXj174suTMQuPpeNiHfZ3mBXyJos_eHyj66Nd787ZOy9GFf4Q5mNEx2xPly-8vwCZq9rt54U5iE7Y9XYwaVjlFVNusHbTbthVYYl7OYytSZxi/s1600/default.png"; adalah gambar pengganti pada artikel yang tidak memiliki gambar
Saran saya sih tidak usah diubah-ubah lagi karena auto readmore ini sudah diatur denga baik dan rapih
6.cari <data:post.body/> biasanya kode tersebut ada lebih dari satu oleh karena itu cari kode <data:post.body/> yang kedua kemudian ganti dengan kode dibawah ini
<!-- Automatic read more script Start -->
<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == "static_page"'>
<data:post.body/>
<b:else/>
<div style='text-align:justify;' expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'> createSummaryAndThumb("summary<data:post.id/>");
</script>
<a class='more' expr:href='data:post.url'><div style="text-align: right;"><img border='0' src='http://i1307.photobucket.com/albums/s597/depermana/bluish_zps515fdacf.png'/></div></a>
</b:if>
</b:if>
<!-- Automatic read more script End -->
<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == "static_page"'>
<data:post.body/>
<b:else/>
<div style='text-align:justify;' expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'> createSummaryAndThumb("summary<data:post.id/>");
</script>
<a class='more' expr:href='data:post.url'><div style="text-align: right;"><img border='0' src='http://i1307.photobucket.com/albums/s597/depermana/bluish_zps515fdacf.png'/></div></a>
</b:if>
</b:if>
<!-- Automatic read more script End -->
keterangan:
kode warna merah : letak thumbnail read more RIGHT: kanan LEFT: kiri
kode warna biru: icon read more, mungkin sobat ingin menggantinya dengan icon punya sobat.
kode warna merah : letak thumbnail read more RIGHT: kanan LEFT: kiri
kode warna biru: icon read more, mungkin sobat ingin menggantinya dengan icon punya sobat.
