07 September 2015

Cara Membuat Auto Readmore Tanpa Java Script

auto readmore tanpa javascript

Pada tema kali ini tujuannya sama dengan tema yang sebelumnya yaitu membuat Auto Readmore.Tetapi untuk kali ini tentu sedikit berbeda cara pembuatannya,dimana kalau yang sebelummya menggunakan Java Script,dan untuk yang sekarang tanpa Java Script.
Tentu dengan kedua cara tersebut masing-masing mempunyai kelebihan dan kekurangannya.


Perbandingan 

Sebelum menuju ke langkah pembuatan Auto Readmore tanpa Java Script,Disini saya akan coba membandingkan dulu kelebihan dan kekurangan antara kedua cara pembuatan Auto Readmore.
Berikut inilah yang saya tahu mengenai kekurangan dan kelebihan:

Tanpa ScriptMenggunakan Script
Loading Cepat Loading Kurang Cepat
Jumlah Karakter tidak bisa di set Jumlah karakter bisa di set
Thumb Image Kurang jelas Thumb Image Jelas walaupun size kita perbesar

Dengan ini mungkin diantara teman-teman bisa memilih dulu jika suatu nanti mau membuat Auto Readmore mana yang cocok dengan selera.

Langkah Pembuatan

Baiklah karena saya sudah ulas sedikit perbandingan antara kekurangan dan kelebihannya masing-masing karena cara pembuatan Auto Readmore dengan Java Script artikelnya sudah saya buat kemarin maka kali ini sesuai tema akan membuat Auto Readmore tanpa Java Script.
Berikut langkah-langkah pembuatannya

Pertama biasa kita masuk pada Edit HTML lalu cari kode ini 
]]></b:skin>
Setelah ketemu coba tambahkan kode ini diatas kode tadi
.thumbnail-post {
width:100px;
height:100px;
float:left;
margin:0px 10px 0px 0px;
}
Fungsi dari kode diatas adalah untuk mensetting ukuran Thumb Image besar kecilnya,silahkan seting sesuai dengan selera anda.
Langkah selanjutnya kemudian cari kode
<data:post.body/>
Kemungkinan akan didapat lebih dari satu kode tadi,cari yang kedua kode tadi dan 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>
Setelah itu coba preview apabila tidak ada error baru di save template.
Mungkin beginilah cara membuat Auto Readmore tanpa Java Script,semoga catatan ini bermanfaat bagi yang lain.

Oke salam Blogger.

No comments:

Post a Comment