Membuat Auto Readmore Dengan Thumbnails di Blogger
Sebenarnya, pihak Blogger sendiri sudah menyediakan fitur readmore yang berada di halaman pengeposan yang diberi judul "jump break". Perbedaannya, jump break dengan auto readmore adalah jump break tidak dapat menampilkan thumbnails guna pengganti kata readmore, sedangkan auto readmore bisa. Perbedannya yang lain secara kasat mata adalah jump break harus diklik terlebih dahulu dimana paragraf akan dipotong, namun auto readmore tidak, karena dari judulnya "auto", maka readmore akan terlihat sendirinya. Satu hal yang pasti, readmore tidak memberatkan loading page blog, karena hanya menggunakan kode CSS (Cascading Style Sheet). Ikuti langkah-langkah berikut untuk membuat auto readmore dengan thumbnails:
1. Pada dasbor, pindah ke Template.
2. Pilih Edit HTML.
3. Cari kode </head>. Untuk mempermudah pencarian, tekan Ctrl+F. Jika sudah ketemu, letakkan kode berikut tepat dibawah kode tersebut.
<script type='text/javascript'>
var thumbnail_mode = "yes";
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 150;
img_thumb_width = 150;
</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 = '<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>
Keterangan:
summary_noimg = Banyaknya tulisan yang ditampilkan di readmore tanpa gambar.
summary_img = Banyaknya tulisan yang ditampilkan dalam readmore dengan gambar.
img_thumb_height = Tinggi gambar thumbnails (dalam satuan pixel).
img_thumb_width = Lebar gambar thumbnails (dalam satuan pixel).
4. Cari lagi kode <data:post.body/>. Biasanya terdapat 3 kode yang sama persis. Kita hanya membutuhkan kode yang kedua.
<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>
<a class='more' expr:href='data:post.url'>Read More >></a>
</b:if>
</b:if>
Keterangan:
Readmore >> = Ganti dengan kata yang akan ditampilkan sebagai readmore. Atau, Anda juga bisa menggantinya dengan tombol (gambar), ganti yang berwarna merah tersebut dengan kode berikut:
<img border='0' src='URL gambar readmore'/>
Ganti URL gambar readmore dengan link yang akan Anda jadikan tombol readmore.
5. Simpan Template. Lihat perubahannya.
Readmore >> = Ganti dengan kata yang akan ditampilkan sebagai readmore. Atau, Anda juga bisa menggantinya dengan tombol (gambar), ganti yang berwarna merah tersebut dengan kode berikut:
<img border='0' src='URL gambar readmore'/>
Ganti URL gambar readmore dengan link yang akan Anda jadikan tombol readmore.
5. Simpan Template. Lihat perubahannya.
0 komentar