Cara membuat Readmore Otomatis

Kawan Blogger semua sudah pasti tahu apa itu Readmore / selengkapnya atau apalah namanya yang berfungsi untuk memotong / memenggal isi Artikel, :q; di Home Page, yang pada Template Modern sudah terisi secara tak langsung, begitu juga pada Editor [tempat menulis artikel] juga sudah ada fasilitas dimaksud :z; seperti gambar berikut

karena sifatnya default dan manual yang menyebabkan banyaknya suka kata yang kita potong besar kemungkinan tidak sama :y;

Readmore / Selengkapnya yang saya bahas sekarang ini khusus untuk kawan Blogger yang Blognya tidak berisi Readmore atau untuk kawan Blogger yang ingin mencoba ber-Kreasi dengan Readmore Otomatis seperti yang saya pakai pada Blog ini

Caranya :

• Masuk Account Blogger dengan ID kawan
• Pada Dasbor pilih Template - Edit HTML - Lanjutkan
• Copas Kode berikut diatas ]]></b:skin>

.jump-link a{-moz-border-radius:5px;-khtml-border-radius: 5px;-webkit-border-radius: 5px;float:right;padding: 0 12px; background: transparent; color: #456069;font-style: normal;border:0px solid #333;margin: 0 5px;text-decoration:none;  text-shadow: 2px 2px 2px #FFF; font-family: Segoe Print;font-size: 14px;} 

.more a:hover, .jump-link a:hover{background: transparent;color:#F00;text-shadow: 2px 2px 2px #FFF;text-decoration:none; }

• Selanjutnya copas script berikut diatas </head>

<SCRIPT type=text/javascript> var thumbnail_mode = &quot;no-float&quot; ; summary_noimg = 300; summary_img = 250; img_thumb_height = 50; img_thumb_width = 50; </SCRIPT> <SCRIPT src=https://sites.google.com/site/blogbegocreation/javascript/readmore-otomatis.js type=text/javascript/> 

• Simpan sementara Template kawan
• Beri tanda check  disamping Expand Template Widget
  
• Cari <data:post.body/> yang pertama yang kode kurang lebih sebagai berikut 

    <div class=post-header-line-1/>

    <div class=post-body entry-content>

      <data:post.body/>

<b:if cond=data:post.hasJumpLink>

      <div class=jump-link>

        <a expr:href=data:post.url + &quot;#more&quot;><data:post.jumpText/></a> 

      </div>

    </b:if> 

      <div style=clear: both;/> <!-- clear for photos floats -->

    </div>

• Ganti semua script yang saya beri warna Biru dengan script berikut

 <div class=post-body entry-content>
<b:if cond=data:blog.pageType == &quot;item&quot;>
<data:post.body/>
<b:else/>
<DIV expr:id=&quot;summary&quot; + data:post.id><p><data:post.body/></p></DIV> <SCRIPT type=text/javascript>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</SCRIPT>    
</b:if></div>
<b:if cond=data:blog.pageType != &quot;item&quot;>
<div style=float:right; padding: 0 5px; margin: -5px 0 -15px 0; >
                  <div class=jump-link><a expr:href=data:post.url target=_blank>Selengkapnya..... </a>
</div></div></b:if>

• Simpan Template kawan

Ini hanyalah salah satu contoh Readmore Otomatis dari sekian banyak model yang ada, silahkan kawan men-Kreasikan sesuai seninya masing-masing :w;

Read more