Fungsi dari Read More Otomatis itu sendiri merupakan salah
satu cara untuk membuat halaman homepage lebih terlihat simple dan dinamis,
dengan menampilkan judul, gambar yang mempunyai efek transisi dan uraian
singkat yang dapat diatur panjangnya sehingga memudahkan pengunjung untuk
membaca artikel yang diinginkan. Auto Read more Artikel dapat di modifikasi
sesuai kebutuhan, diuraikan di dalam keterangan.
Berikut langkah-langkah Cara Membuat Auto Read More Otomatis
Di Blog. Perhatian: bagi yang sudah memasang read more otomatis yang ada
sebelumnya harus dihapus terlebih dahulu. Versi Ini telah Direvisi.
- Login Ke Blogger.
- Klik Edit HTML.
- cari kode berikut </head>
- Masukan Kode berikut diatas </head>
<!--Auto Read More Mulai-->
<b:if cond='data:blog.pageType !=
"static_page"'>
<b:if cond='data:blog.pageType !=
"item"'>
<style>
.post-body{text-align:justify;}
.post-body img{max-width:none;width:auto;}
.read-more{float:left; padding-top: 10px;}
.read-more a{ color: #fff!important;text-shadow:0 1px 0
rgba(0,0,0,0.5);background:#0457A9;
text-decoration:none;font:bold 13px Arial;padding:5px;}
.read-more a:hover{text-decoration:none;background:#666;}
.pic{border: 10px solid #fff;float:left;height:165px;width:280px;margin-right:
20px;margin-bottom:10px;overflow:hidden;box-shadow: 5px 5px 5px #111;}
.grow img{height:165px;width:280px;transition:
all 2s ease;}
.grow img:hover{width:400px;height:250px;}
</style>
<script type='text/javascript'>
var thumbnail_mode = "yes"; //yes -dengan
gambar, no -tanpa gambar
summary_noimg = 300;
//banyaknya huruf jika tidak ada gambar
summary_img = 250;
//banyaknya huruf jika ada gambar
img_thumb_height = 165;
img_thumb_width = 280;
</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(thumbnail_mode ==
"yes"){if(img.length>=1){imgtag = '<div class="grow
pic"><img src="'+img[0].src+'"
width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></div>';summ
= summary_img;}}var summary = imgtag + '<div>' +
removeHtmlTag(div.innerHTML,summ) + '</div>';div.innerHTML = summary;}
//]]></script>
</b:if>
</b:if>
<!--Auto Read More Akhir-->
Warna Biru untuk mengatur
banyaknya kutipan dari artikel.
Warna Hijau adalah
Pengaturan Lebar dan tinggi gambar
- Kemudian Cari Kode <data:post.body/>
Kode tersebut diatas jumlahnya biasanya ada 2, Cari yang
versi web,
biasanya yang kedua (ke-2) dengan enter 2x pada kotak
pencarian.
- Hapus Kode <data:post.body/> yang ke-2 dan Ganti dengan kode dibawah ini.
<!-- Auto read more Mulai -->
<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 expr:id='"summary" +
data:post.id'><data:post.body/></div>
<script type='text/javascript'>
createSummaryAndThumb("summary<data:post.id/>");
</script>
<div class='read-more'>
<a
expr:href='data:post.url'>Baca Selengkapnya »</a>
</div>
</b:if>
</b:if>
<!-- Auto read more Akhir -->
Warna Biru Muda boleh
dihapus boleh tidak, bedakan saja.
"Baca Selengkapnya" juga bisa diganti bebas.
- Preview terlebih dahulu, kalo bagus ya terus Save Template, dan lihat hasilnya.
Demikian Tutorial Cara Membuat Auto Read More Otomatis
Artikel Di Blog, mudah-mudahan bisa bermanfaat.
