Cara Membuat Auto Read More dengan Thumbnail di Blog

Review Bebas - Sebelum saya memberikan tutorial bagaimana cara membuat auto read more read more otomastis, terlebih dahulu saya akan menjelaskan apa itu read more dan bagaimana fungsinya pada template blog kita.

Pengertian Read More dan Fungsinya pada Blog

Baik langsung saja saya jelaskan, Read more pada dasarnya sama dengan jump break fitur insert jump break yang sebenarnya sudah disediakan oleh pihak pengembang blogspot, tapi ada sedikit perbedaan antara read more ini dengan fitur insert jump break pada blogger. Apa perbedaan-nya ?
Pada fitur insert jump break untuk menampilkan potongan atas artikel pada hompage kita harus mengatur-nya secara manual. Agak menyusahkan sedikit sih, tapi, jika anda suka dengan yang manual-manual silahkan.

Nah, pada auto read more yang akan kita buat kali ini memang bisa seikit mengurangi pekerjaan kita, karena dengan memasang auto read more pada template kita tidak perlu susah-susah memotong bagian atas artikel secara manual. Karena jika sudah terpasang pada template kita maka dengan sendiri-nya setiap artikel akan menampilakan potongan atas artikel pada hompage.

Selain itu dengan memasang auto read more pada template, akan mempercantik tampilan blog... karena pada halam homepage semua artikel terpotong dengan rapih sesuai dengan berapa karakter yang ingin kita tampilkan dan berapa ukuran thumbnail/gambar yang akan di tampilkan pada saat di home.

Sudah jelaskan sekarang... ? Kalo belum jelas baca lagi dari atas deh..

Oke... saya anggap anda sudah paham bagaimana cara kerja auto read more ini, sekarang waktu-nya saya memberikan tutorial bagaimana cara membuat-nya.

Cara Membuat Auto Read More dengan Thumbnail

1. Untuk membuat auto read more pertama Login ke akun Blogger anda.

2. Pilih opsi Template > Pilih edit HTML.

3. Cari kode </head> menggunakan CTRL+F untuk mempermudah.

4. Jika sudah ketemu, letakkan kode di bawah ini tepat diatas kode </head>.

<script type='text/javascript'>
(function() {
var po = document.createElement(&#39;script&#39;); po.type = &#39;text/javascript&#39;; po.async = true;
po.src = &#39;https://apis.google.com/js/plusone.js&#39;;
var s = document.getElementsByTagName(&#39;script&#39;)[0]; s.parentNode.insertBefore(po, s);
})();
</script>
<script type='text/javascript'>
var thumbnail_mode = &quot;yes&quot;; //yes-dengan gambar,no-tanpa gambar
summary_noimg = 300;
summary_img = 255;
img_thumb_height = 100;
img_thumb_width = 125;
</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 script auto read more, diatas : 

• 300 = jumlah karakter read more artikel tanpa gambar.
• 255 = jumlah karakter read more artikel dengan gambar.
• 100 = tinggi gambar artikel yang ingin ditampilkan pada read more.
• 125 = lebar gambar artikel yang ingin ditampilkan pada read more.

5. Masih di Edit HTML, cari kode <data:post.body/>, jika ada 2 pilihlah kode yang ke-2.

6. Ganti kode <data:post.body/> yang ke-2 dengan kode di bawah ini.

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb
(&quot;summary<data:post.id/>&quot;);
</script>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/>
</b:if>

7. Klik 'save template' dan selesai.

Mudah sekali kan cara membuat-nya ? sekarang template anda sudah terlihat lebih rapi dan tetu saja ini juga bisa mempercepat loading blog anda. Jika anda tidak jelas atau ada yang belum mengerti, silahkan tuangkan pertanyaan anda pada kolom komentar.

Share This Article :

Share on FB Submit to Digg Tweet on Twitter Share on G+