Cara Membuat Auto Read more Otomatis di Blog

Banyak sekali para Blogger yang tampilan halaman depan Blog nya menggunakan auto read more/baca selengkapnya, mungkin dengan menggunakan auto read more, blog mereka bisa lebih ringan, terlihat menarik, juga profesional.

Namun ada juga sebagian para Blogger yang tidak memasang Auto  read more pada blog nya, entah itu di sengaja atau juga mereka tidak tahu cara untuk memasang nya.

Maka dari itu, bagi anda yang tidak tahu cara membuat Auto read more, saya akan coba menjelaskan sedikit tutorial tentang cara Membuat Auto Read more Otomatis di Blog. auto read more ini mempunyai efek gambar yang menarik sehingga enak untuk di pandang, nah biar tidak basa basi ini dia cara cara nya.

CARA CARA

1. masuk ke mode Html di Blog anda
2. kemudian letakan Kode di bawah ini tepat di atas kode </head>

<!--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 = &quot;yes&quot;; //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-->

*Catatan

1. tulisan yang berwarna merah tujuannya untuk mengatur Jumlah kata descripsi
2. Tulisan berwarna kuning tujuannya untuk mengatur tinggi dan lebar Gambar

silahkan anda atur sesuai keinginan anda

3.  langkah selanjutnya silahkan anda cari kode <data:post.body/>

setelah ketemu kode tersebut, pasti kode nya tidak hanya satu, pasti jumlah nya ada dua bahkan sampai tiga.

4. silahkan anda hapus kode <data:post.body/> yang ke dua, dan ganti dengan kode di bawah ini

<!--Auto Read More Akhir-->

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

5. langkah terakhir silahkan Simpan Template anda, dan lihat hasil nya. jika bagus lanjutkan, dan jika tidak bagus, silahkan kembalikan saja ke semula.

*Catatan

jika Blog anda sudah memakai Auto Read more sebelum nya, di mohon untuk menghapus dulu yang sudah ada, supaya Auto Read more yang ini bisa bekerja dengan Baik. terima kasih.

Nah itulah sedikit pembahasan mengenai Cara Membuat Auto Read More otomatis Di Blog, selamat mencoba ya. oh ia satu lagi jika kode di atas tidak berfungsi mohon untuk segera memberi tahu saya, agar cepat di perbaiki.

Bagikan Artikel Ini