Cara Membuat Auto Read More

Sebuah artikel pada suatu blog yang baru diposting, biasanya akan muncul dihalaman depan blog kalau bahasa kerennya Homepage. Namun, jika artikel tersebut terlalu panjang akan membuat homepage anda menjadi penuh dan tentunya membuat loading blog anda akan menjadi berat. Jika ingin membuat postingan yang ada dihalaman utama cuma tampil sebagian saja, artikel HM kali ini tentang Cara Membuat Auto Read More pas banget buat anda, selain untuk memudahkan meringkas artikel dihalaman utama, secara tidak langsung akan membuat loading blog anda akan menjadi lebih ringan.

Oke, tanpa banyak buang waktu lagi, berikut langkah-langkahnya :

1. Login ke Blogger

2. Pilih Template

3. Backup Template (jaga-jaga bila terjadi kesalahan)

4. Pilih Edit HTML

5. Cari kode </head>

6. Salin kode dibawah ini diatas kode </head>

12345678910111213141516171819202122232425262728<!--Auto Read More Mulai--> 

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>

<b:if cond='data:blog.pageType != &quot;item&quot;'>

<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 : Untuk mengatur lebar dan tinggi gambar

7. Kemudian cari kode <data:post.body/>, biasanya ada dua, cari versi web biasanya yang kedua

8. Hapus kode <data:post.body/> yang kedua, ganti dengan kode dibawah ini :

12345678910111213141516<!-- Auto read more Mulai -->

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<data:post.body/>

<b:else/>

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>

<data:post.body/>

<b:else/>

<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>

      <div class='read-more'>

      <a expr:href='data:post.url'>Baca Selengkapnya &#187;</a>

      </div>

</b:if>

</b:if>

<!-- Auto read more Akhir -->

* Warna Biru boleh dihapus, boleh tidak, Baca Selengkapnya bisa anda ganti dengan kata Read More atau terserah anda.

Perhatian : Jika sebelumnya anda sudah menggunakan fitur Readmore otomatis, maka versi yang sebelumnya harus dihapus, anda harus bisa memperkirakan darimana kemana script yang harus dihapus.

9. Preview terlebih dahulu, kalau bagus Simpan Template, dan lihat hasilnya.

Demikian artikel HM tentang Cara Membuat Auto Read More, semoga bisa membantu dan bermanfaat, selamat mencoba. Terimakasih...