Wednesday, 19 February 2014

Auto Read More Thumbnail Tanpa Javascript

Unknown

Wednesday, 19 February 2014

Selamat malam buat semua sahabat Blogger. Kali ini saya akan berbagi cara tentang membuat Auto Read More Thumbnail tanpa Javascript, maka otomatis blog anda loadingnya akan lebih cepat dari sebelumnya karena tidak ada javascript yang di gunakan. Tutorial ini sebenarnya udah banyak di Google, tapi apa salahnya untuk berbagi pengetahuan..
Untuk demo Anda bisa melihat template yang saya gunakan ini, atau lebih jelasnya seperti ini Screen Shootnya ...

Jika Anda saat ini telah menggunakan auto read-more versi javascript, 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>

Note's

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>

Jika template blog Anda masih berupa posting bisa berikut tutorial lengkap membuat Auto Read More Thumbnail Tanpa Javascript

Berikut Tutorialnya

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"

Demikian tutorial Cara Membuat Auto Read More Thumbnail Tanpa Javascript, apabila Anda mengalami masalah atau masih bingung untuk menerapkan dalam Membuat Auto Read More Thumbnail Tanpa Javascript silahkan tinggalkan komentar Anda di form komentar bawah. Terima kasih ...