Cara Membuat Auto Read More Thumbnail Ringan dan Anti JQuery


Read More adalah Menyematkan Artikel Menjadi kecil. Tujuannya adalah agar postingan tidak memakan tempat. Read More biasa disebut " Baca Selengkapnya " Ini sangat penting diterapkan di blog anda. Kali ini yang akan diposting Cara Membuat Auto Readmore Tanpa Menggunakan Jquery atau Java Script. Seperti yang kamu ketahui bahwa Java Script dapat menyebabkan loading blog menjadi lama. Anda bisa melihat Contohnya gambar diatas, Jika kalian suka? Yaudah langsung saja kita praktekan..

Cara Pertama :

1. Buka Blogger - Kemudian Login.
2. Dashboard - Template
3. Edit HTML.
4. Cari (CTRL+F) Kode ]]></b:skin>
5. Copy & Paste kode berikut ini, dan Letakkan diatas kode ]]></b:skin>

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

6. Cari (CTRL+F) kode <data:post.body/> . Biasanya kode ini lebih dari satu, pilih yang kedua.
7. Copy & Paste kode berikut ini, dan ganti 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.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>

Note : Baca Selengkapnya bisa diubah misalkan Read More.

8. Simpan Template.

Bagaimana? Mudah bukan, jika terjadi kesalahan Silakan Berkomenar dibawah ini. Sekian dari saya, Terima kasih telah berkunjung. Semoga Bermanfaat!

Related Post

2 Responses to "Cara Membuat Auto Read More Thumbnail Ringan dan Anti JQuery"

  1. kekurangan dari script diatas apa ya?

    ReplyDelete
    Replies
    1. Emangnya kenapa dengan scriptnya mas candra? apakah ga work?

      Delete