Cara Mudah Membuat Auto Readmore

Cara Mudah Membuat Auto Readmore Thumbnail Yang Ringan Tanpa  Javascript , seperti yang kita tahu bahwa javascript sangat memengaruhi loading blog kita . Auto Readmore ini memakai post snippet sehingga auto readmorenya valid dan loadingnya cepat sekali.

Cara Mudah Membuat Auto Readmore

Cara Membuat Auto Readmore yang masih berupa posting biasa tanpa belom ada readmorenya

Untuk template bawaan blogger

• Login Ke Blogger
• Klik Edit Template (Jangan Lupa Back Up dulu)
• Cari kode ]]></b:skin>
• Copy Css Berikut di atas kode tersebut..

.thumbnail-post {
width:100px; 
height:100px; 
float:left; 
margin:0px 10px 0px 0px;
}

• Setelah itu Cari kode <data:post.body/> yang ke 2 atau 3 atau ke 4, ganti dengan kode 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.firstImageUrl'>
      <a expr:href='data:post.url'><img class='thumbnail-post' expr:title='data:post.title' expr:src='data:post.firstImageUrl'/></a>
    <b:else/>
      <a expr:href='data:post.url'><img class='thumbnail-post' expr:title='data:post.title' src='http://1.bp.blogspot.com/-XeZs003zT-4/UwM1mfc9l3I/AAAAAAAAAlw/TNTcFCMPH4A/s1600/no-image-thumbnail.jpg'/></a>
    </b:if>
    <div class='post-snippet'>
      <data:post.snippet/>
    </div>
    <div class='rm-button-wrap'>
      <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>

Keterangan: Thumbnail saya menggunakan <data:post.firstImageUrl>

Snippet di ambil dari Referensi pada Popular Post <data:post.snippet/>

• Langkah Terkahir "Save Template"

Memodifikasi AUto Readmore Yang Sudah Menggunakan Javascript

Cara Yang Kedua Yaitu Apabila Template sobat udah ada auto readmorenya yang menggunakan java script

, Anda bisa memodifikasinya pada formulir HTML Temlpate, temukan kode ini:

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

Keterangan Jangan lupa untuk menghapus script auto read-more link yang biasanya terletak di atas </head>

Kalau udah ketemu hapus semua kode tersebut kemudian Anda ganti dengan kode di bawah ini

<b:if cond="data:post.firstImageUrl">
  <a expr:href="data:post.url">
<img class="thumbnail-post" expr:src="data:post.firstImageUrl" expr:title="data:post.title" /></a>
<b:else>
  <a expr:href="data:post.url">
<img class="thumbnail-post" src="http://1.bp.blogspot.com/-XeZs003zT-4/UwM1mfc9l3I/AAAAAAAAAlw/TNTcFCMPH4A/s1600/no-image-thumbnail.jpg" expr:title="data:post.title" /></a>
  </b:else>
</b:if>
<div class='post-snippet'>
  <data:post.snippet/>
</div>

• Kemudian Simpan Template dan Lihat Hasilnya

Share this

antoncabon

adalah seorang blogger yang menyukai keindahan panorama alam hasil ciptaan Tuhan, suka mendaki gunung, suka bermain dengan anak-anak nya, suka berbagi, dan yang lebih penting adalah kaya raya juga baik hatinya, hampir lupa satu lagi, ya dia tampan :).