Membuat Auto Read More Tanpa Javascript

Pemula, Tutorial

Belum ada komentar

  <data:post.snippet/> untuk mengambil ringkasan posting dan <img expr:src='data:post.thumbnailUrl'/>, untuk mengambil thumbnail pada posting. di banding dengan yang memakai javascript, Auto Read More yang ini lebih ringan, walau kita tidak bisa mengkostum-nya lagi seperti menentukan jumlah karakter dan ukuran gambar. ukuran gambar pun hanya bisa max. 72x72px. tetapi kita dapat meng-akalinya dengan membuat dua kolom posting pada tampilan homepage.
   Auto Read More Tanpa Javascript ini memanfaatkan fungsi HTML pada blogger yaitu markup

Langkah pertama jika anda belum memasang auto read more yang lain adalah cari kode ini :

<data:post.body/>

   
Cukup ganti kode di atas dengan kode dibawah ini :

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
       <b:if cond='data:post.thumbnailUrl'>  <!--tampilkan gambar thumbnail -->
           <a expr:href='data:post.url'>
               <img class='post-thumbnail' alt='thumbnail' expr:src='data:post.thumbnailUrl'/>
           </a> 
      <b:else/>  <!--tampilkan gambar dafault jika tidak ada gambar thumbnail -->
           <a expr:href='data:post.url'>
               <img class='post-thumbnail' alt='thumbnail' src='http://reader-download.googlecode.com/svn/trunk/images/no-image-72x72.png'/>
           </a> 
       </b:if> 
   <div class='isi-ringkasan'> 
         <data:post.snippet/> <!--ringkasan artikel -->
   </div>
   <div class='tombol-readmore'> 
        <a class='button' expr:href='data:post.url'>Baca Selengkapnya</a> 
   </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>
<!-- untuk dibawah <data:post.body/> -->

Namun jika anda telah memakai Auto Read More cukup ganti :

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

dengan ini:

<b:if cond='data:post.thumbnailUrl'> 
         <a expr:href='data:post.url'>
               <img class='post-thumbnail' alt='thumbnail' expr:src='data:post.thumbnailUrl'/>
        </a> 
<b:else/> 
      <a expr:href='data:post.url'>
              <img class='post-thumbnail' alt='thumbnail' src='http://reader-download.googlecode.com/svn/trunk/images/no-image-72x72.png'/>
      </a>
 </b:if> 
<div class='isi-ringkasan'><data:post.snippet/></div>

agar tampilan lebih baik tambahkan css di bawah ini :

.isi-ringkasan { width:72px; height:72px; float:left; Align: justify; margin:2px 10px 0 0; }
.tombol-readmore {float:right;}

Simpan dan beres.