Auto Read More

Seringkali dengan membuat Read More yang default milik Blogspot, kita kerepotan karena setiap kali harus mengklik icon "insert jump break" dan kalau kelupaan maka isi postingan akan terlihat seluruhnya di homepage.  Maka dari itu bersama ini saya tampilkan cara membuat Read More secara otomatis.  Semoga bermanfaat, selamat mencoba.  Pesan saya sebelum melakukan modifikasi ini sebaiknya simpan dulu tempalate yang sudah dibuat, agar kalau error bisa mengembalikan ke tampilannya semula.

Cara Membuat Auto Read More:

1. Buat dan upload image no thumbnail, contohnya seperti ini
   https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxm9uemw4gNlZxgTU3kcPPjHmCBXsmD5P-9mCqcT1bFWjwXfwednp6xZoz1A2f0uXzrmGrcUkDs_LknlEGcLT85gvKCMFfXtSzLi99m2NKafTHI9iv1QTY-FJsH_zYYaXpbrOpz3gDJ6c/s1600/nothumbnail_notes-and-life_blogspot_com.jpg
2. Buka HTML lalu cari tulisan </head>
   
   letakkan script ini diatasnya, simpan script thumbnail setelah tulisan defaultThumb: &#39;
   
   <script type='text/javascript'>
    var summaryConf = {
    showImage: true,
    imgFloat: &#39;left&#39;,
    imgWidth: 120,
    imgHeight: 120,
    defaultThumb: &#39; https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxm9uemw4gNlZxgTU3kcPPjHmCBXsmD5P-9mCqcT1bFWjwXfwednp6xZoz1A2f0uXzrmGrcUkDs_LknlEGcLT85gvKCMFfXtSzLi99m2NKafTHI9iv1QTY-FJsH_zYYaXpbrOpz3gDJ6c/s1600/nothumbnail_notes-and-life_blogspot_com.jpg&#39;,
    words: 100,
    wordsNoImg: 120,
    skip: 0,
    showHome: true,
    showLabel: true,
    };
    </script>
    <script src='https://s3-us-west-2.amazonaws.com/js-mj/autoreadmore.js' type='text/javascript'/>
    <script type='text/javascript'>
    //<![CDATA[
    (function() {
    var shr = document.createElement('script');
    shr.setAttribute('data-cfasync', 'false');
    shr.src = '//dsms0mj1bbhn4.cloudfront.net/assets/pub/shareaholic.js';
    shr.type = 'text/javascript'; shr.async = 'true';
    shr.onload = shr.onreadystatechange = function() {
    var rs = this.readyState;
    if (rs && rs != 'complete' && rs != 'loaded') return;
    var apikey = '3c7fdfbcafbc6b393fb6fe0d5d7cace1'
    try { Shareaholic.init(apikey); } catch (e) {}
    };
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(shr, s);
    })();
    //]]>
    </script>
    
3. Lalu cari kata itemprop
   
4. Lalu ganti script <data:post.body/> yang ada dibawah script  itemprop
   dengan scrip ini:
   
    <span expr:id='data:post.id'><data:post.body/></span>
    <b:if cond='data:blog.pageType == &quot;index&quot;'>
    <script type='text/javascript'>summary(&quot;<data:post.id/>&quot;)</script>
    <span class='read-more'><a expr:href='data:post.url'>Read-More»</a></span>
    <b:else/>
    <b:if cond='data:blog.pageType == &quot;archive&quot;'>
    <script type='text/javascript'>summary(&quot;<data:post.id/>&quot;)</script>
    <span class='read-more'><a expr:href='data:post.url'>Read-More»</a></span>
    </b:if>
    </b:if>
   
   
5. Tambahkan script ini di CSS:
   
   /*auto read more ini yang dipakai*/
   .read-more a {
   float:right;
   padding-top:40px;
   font-family: 'Times New Roman';
   font-size: 18px;
   color: #000;
   text-transform: uppercase;
   }
   
   .read-more a:hover {
   text-decoration: none;
   color: #BBB;
   text-transform: uppercase;
   }
   
   .read-more a {text-transform: uppercase; background-color: lightgrey; background-repeat: repeat-x; margin: 10px 0px 0; padding: 6px 223px 5px 223px; text-indent: -20px; }
     
   
   
6. Hidden tulisan Read-More» bawaan Blogspot
   
   dengan cara simpan script ini di CSS
   
   /*Hilangkan Read More default*/
    .jump-link {display: none}
    
7. Lihat hasil: