Membuat Auto Readmore Keren di Blog

Mari kita lanjutkan tutorial blog tentang Membuat Auto Readmore Keren di Blog. Dengan menggunakan auto readmore akan memudahkan kita dalam m...

Mari kita lanjutkan tutorial blog tentang Membuat Auto Readmore Keren di Blog. Dengan menggunakan auto readmore akan memudahkan kita dalam membuat posting. Memasang fitur ini membuat kita tidak perlu membubuhkan kode <!--more--> atau mengklik tanda insert jump break setiap kali melakukan posting.Fitur auto readmore akan mengurangi pekerjaan ini karena secara otomatis semua posting yang muncul di halaman-halaman utama (misalnya home, search query results, tag results, dll) akan terpotong dengan readmore.

1. Langsung terjuna aja ke editor template HTML. Silahkan Backup atau Download template terlebih dahulu (untuk amannya).

2. Centang expand widgets template.

3. Masukkan script berikut TEPAT SEBELUM code </head> atau DIATAS tag </head> (gunakan Ctrl+F untuk mencari)

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

Keterangan:
Warna merah untuk mengatur banyaknya kutipan dari artikel.
Warna biru adalah Pengaturan Lebar dan tinggi gambar4. Lanjutkan dengan mencari <data:post.body/>. Biasanya terdapat 2 kode <data:post.body/>, pilih yang kedua ya sob.  (seperti biasa, gunakan Ctrl+F untuk memudahkan pencarian)

4. Lalu GANTI <data:post.body/> dengan script berikut:

<!-- 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. Untuk memastikan hasilnya, jangan di-save dulu. Gunakan preview untuk mengeceknya.

6. Setelah selesai, silakan di-save.

7. Finished, blog sobat akan terlihat lebih keren dan canggih.

Sekian postingan kali ini yang membahas tentang Membuat auto readmore keren di blog. terima kasih atas kunjungannya....