Cara Membuat Auto Readmore Dengan Tumbnail, Pada tutorial kali ini saya akan mengajarkan sobat bagaimana cara membuat Auto Readmore dengan tumbnail di blogger. Sebenarnya cara membuat Auto Readmore sangatlah mudah bahkan untuk pemula sekalipun. Dengan cara ini, otomatis postingan di halaman utama, halamn label/kategori dan kategori sobat akan diringkas menjadi bebrapa karakter dan tumbnail berdasarkan setingan yang sobat tentukan.
Dengan menggunakan Auto Readmore di blog sobat, akan membuat loading blog sobat menjadi lebih cepat dengan menunjukkan ringkasan postingan dan bukan postingan penuh pada halaman utama.
Cara Menginstal Auto Readmore :
1.Buka blogger.com.
2.Backup dulu template anda dengan cara, klik tombol Cadangkan/Pulihkan di kiri atas, lalu klik Unduh Template Lengkap.
3.Klik Template, Kemudian edit HTML.
4.Tekan Ctrl + F secara bersamaan.
5.Kemudian cari kode ini "</head>".
6.Tepat di ATASnya, tambahkan kode ini
<script type='text/javascript'>
var thumbnail_mode = "no-float" ;
summary_noimg = 200;
summary_img = 200;
img_thumb_height = 60;
img_thumb_width = 100;
</script>
<script type='text/javascript'>
//<![CDATA[
/******************************************
Auto-readmore link script, version 2.0 (for blogspot)
********************************************/
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:0; margin:3px 10px 0 0;"><img alt="Thumbnail" itemprop="image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOy8iVbTN68fpMN6X6ks0imjpcAEI3YPubvDX8crqg06X8VeDoEefiLaX7S2aOIl1pgVojUAwwIkKRQwMDE_wvwRj580SbAXGmdb-vucPxV6qpwIcnXzYUYGfwzUmigltVyOHLuOG8dBFu/s1600/nothumb.png" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
var summ = summary_noimg;
}
if(img.length>=1) {
imgtag = '<span style="float:left; margin:3px 10px 0 0;"><img alt="Thumbnail" itemprop="image" src="'+img[0].src.replace(/\/s(320|400|640|1600)/, "\/s" + img_thumb_width) + '" 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>
NB: Double Clik / Ctrl + A to copy all
Keterangan:
- Summary_noimg = 230; adalah banyaknya karakter yang akan ditampilkan ketika tidak ada gambar di dalam posting anda, anda bisa mengubah jumlahnya.
- Summary_img = 140; adalah banyaknya karakter yang akan ditampilkan ketika terdapat gambar di dalam posting anda, anda bisa mengubah jumlahnya.
- Img_thumb_height = 100; adalah tinggi gambar thumbnail, anda dapat mengubah nilainya.
- Img_thumb_width = 100; adalah lebar gambar thumbnail, anda dapat mengubah nilainya
"<data:post.body/>"
8.Kemudian ganti dengan kode di bawah ini.
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
</b:if>
</b:if>
<b:if cond='data:blog.pageType != "static_page"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
</b:if>
</b:if>
NB: Double Clik / Ctrl + A to copy all
Keterangan:
- Padding-top:5px, ganti nilainya untuk membuat jarak dengan tulisan di atas readmore.
Float:right, ganti right dengan left jika ingin readmore muncul di sebelah kiri- Sobat bisa mengganti Read more dengan kata-kata lain misalnya "Baca Selanjutnya", Atau apa saja seterah sobat
9.Klik Pratinjau Template. Jika kodenya bekerja dengan benar, Klik Save Template.
Semoga artikelnya dapat bermanfaat ^_^
0 komentar: