Membuat Readmore Post di blogger

Posted on | November 12, 2012 | No Comments

Read more atau After the Jump 

Adalah feature yang di gunakan untuk meringkas posting sementara menjadi lebih sedikit di halaman depan.Dengan mengaktifkan After the Jump atau Readmore maka artikel yang panjang akan di potong sementara.



Ada dua cara untuk membuat Readmore:

 Membuat readmore dengan jumbreak

1. .Menggunakan After the Jump di post editor dengan mengunakan Insert Jump break pada toolbar edit post anda tidak perlu membuat readmore dengan memasukan HTML,Caranya adalah ketika anda menulis posting cukup arahkan ke "Insert Jump Break icon pada toolbar edit post ketika anda ingin memasukan readmore.
   
   Syarat:Template anda masih berbentuk template dinamis atau belum pernah menambahkan kode script readmore
   
   Jump break feature tidak akan muncul jika pada halaman post anda,Untuk mengaturnya silahkan anda pergi ke Setting | Basic | Other dan editlah pada allow Blog Feed.
   
   
   
   
   
   Ketika anda menulis post Klik jump break icon pada toolbar edit post untuk memotong artikel
   
    
   
   
   
2. Memasang script di template anda
   Untuk membuat Readmore seperti tampilan yang di tampilkan pada blog saya,caranya sebagai berikut:
   
   
   
   Catatan:
   -Anda belum pernah menggunakan Read more sebelumnya
   -Jika anda sekarang sudah menggunakan readmore hapus semua kode yang pernah anda tambahkan baik itu CCS maupun html.    
   
   

1. Buka template blog anda
2. Download template anda terlebih dahulu
   
   Klik Edit HTML-klik Procces,than beri tanda tick pada Expands widget template
3. Cari kode ini: ]]></b:skin>
4. opy kode ini dan paste di bawahnya:
   
   

   <style>
   
   <b:if cond='data:blog.pageType == "item"'>
   
   span.fullpost {display:inline;}
   
   <b:else/>
   
   span.fullpost {display:none;}
   
   </b:if>
   
   </style>
   

5. Cari kode ini: <data:post.body/>
6. .Copy kode ini dan paste di bawah <data:post.body/>

   <script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>
   
   <div style='float:right;padding:6px 0 0 0;font:normal 12px Arial;'>
   
   <span class='rmlink'><a expr:href='data:post.url'><img alt='readmore' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYclIKjUEju1u69UiJklunzHhOIXZVJCxaTzcOCMNtX0soDm8zKhewM2T092r6eFFw5_8O1NmMo0TXyMVNLFQu5Ii_G-6txP-jkZXd9Kslj30sVCVdV-A9bQlnFZ2RJbQOQ5Ib3oUxHcw/s1600/readmore.png'/></a></span>
   
    </div>
   
   </b:if>
   
   </b:if>
   
   <b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
   
   <b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/></b:if>

   
   Lihat susunan kode ini:
   

   <div class='post-header'>
   
   <div class='post-header-line-1'/>
   
   </div>
   
       <div class='post-body entry-content'>
   
   <b:if cond='data:blog.pageType != &quot;item&quot;'>
   
   <b:if cond='data:blog.pageType != &quot;static_page&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> 
   
   <div style='float:right;padding:6px 0 0 0;font:normal 12px Arial;'>
   <span class='rmlink'><a expr:href='data:post.url'><img alt='readmore' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYclIKjUEju1u69UiJklunzHhOIXZVJCxaTzcOCMNtX0soDm8zKhewM2T092r6eFFw5_8O1NmMo0TXyMVNLFQu5Ii_G-6txP-jkZXd9Kslj30sVCVdV-A9bQlnFZ2RJbQOQ5Ib3oUxHcw/s1600/readmore.png'/></a>
   
   </span> 
   
   </div>
   
   </b:if> 
   
   </b:if>
   <b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if> 
   
    <b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/></b:if>
   
    <div style='clear: both;'/> <!-- clear for photos floats -->
   ;

7. Klik"Save"

Comments