Membuat Auto Read More dengan Gambar Thumbnail versi 3

Tweet

Get This

proBlogiz

---

Seri tutorial Blogger ketiga ini, Membuat Auto Read More dengan Gambar Thumbnail versi 3, adalah pilihan lain untuk Anda yang ingin membuat link Read More Otomatis dengan feature thumbnail. Seperti tip dan trik yang lalu, Membuat Auto Read More dengan Thumbnail versi 1 dan versi 2, hack blogger ini juga akan meringkas content / postingan, dan menampilkan hanya sumarry / ringkasan dengan dikuti gambar di Homepage, Archives Page dan Label Page. Kelebihan metode ini hanya menggunakan simple kode script yang akan ditambahkan pada template Anda.

Tentu Anda sudah tahu fungsi Auto Read More link ini dapat lebih mempercepat loading blog karena hanya menampilkan ringkasan / intro posting saja ketimbang menampilkan seluruh post konten di homepage.

Untuk itu Anda harus menambahkan kode-kode script dalam template blogger, dan fungsi Automatic read more pada blogger ini dapat diterapkan di blog Anda.

Sebelum mulai membuat Auto Read More, check jika Anda telah memasang Read More Link atau Auto Read More link di template, maka hapus kodenya dahulu semuanya. Caranya ikuti petunjuk Cara Menghapus Read More/Auto Read More Link di Blogger

Langkah Membuat Auto Read More dengan Gambar Thumbnail versi 3

Ada dua pilihan yang bisa Anda pilih pada metode ini yaitu, Auto Read More untuk semua Posting dan Auto Read More untuk Posting Lama ( Postingan yang terbaru akan ditampilkan normal / full post ).

Auto Read More untuk semua Posting

1. Masuk ke Blogger Dashboard > Template
2. Backup template Anda
3. Click Edit HTML
4. Lanjutkan
5. Check Expand Widget Template checkbox
6. Tekan Control + F
7. Cari kode <data:post.body/>
8. Gantilah dengan kode berikut dibawah ini :

<b:if cond='data:blog.pageType != &quot;item&quot;'>
     <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
      <div>
       <b:if cond='data:post.thumbnailUrl'>
        <img class='post-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' width='72px' height='72px'/>
       </b:if>
       <data:post.snippet/>
      </div>
      <div class='jump-link'>
       <a expr:href='data:post.url' expr:title='data:post.title'><data:post.jumpText/></a>
      </div>
     <b:else/>
      <data:post.body/>
     </b:if>
    <b:else/>
     <data:post.body/>
    </b:if>

9. Klik Preview, jika OK
    Save Template

Auto Read More untuk Posting Lama

Postingan yang terbaru akan ditampilkan normal / full post

1. Lakukan hal yang sama sampai langkah no.6

2. Cari kode <data:post.body/>
3. Gantilah dengan kode berikut dibawah ini :

<b:if cond='data:blog.pageType != &quot;item&quot;'> <b:if cond='data:blog.pageType != &quot;static_page&quot;'> <b:if cond='data:blog.url == data:blog.homepageUrl'> <b:if cond='data:post.isFirstPost == &quot;true&quot;'> <data:post.body/> <b:if cond='data:post.hasJumpLink'> <div class='jump-link'> <a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a> </div> </b:if> <b:else/> <div> <b:if cond='data:post.thumbnailUrl'> <img class='post-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' width='72px' height='72px'/> </b:if> <data:post.snippet/> </div> <div class='jump-link'> <a expr:href='data:post.url' expr:title='data:post.title'><data:post.jumpText/></a> </div> </b:if> <b:else/> <div> <b:if cond='data:post.thumbnailUrl'> <img class='post-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' width='72px' height='72px'/> </b:if> <data:post.snippet/> </div> <div class='jump-link'> <a expr:href='data:post.url' expr:title='data:post.title'><data:post.jumpText/></a> </div> </b:if> <b:else/> <data:post.body/> </b:if> <b:else/> <data:post.body/> </b:if>

Klik Preview, jika OK
Save Template

Kostumisasi

1. Jika ingin menampilkan thumbnail disebelah kiri ( float:left )
Copy dan pastekan kode CSS berikut diatas tag ]]></b:skin>

.post-thumbnail{float:left;margin-right:20px}

2. Jika ingin menampilkan thumbnail disebelah kanan ( float:right)
Copy dan pastekan kode CSS berikut diatas tag ]]></b:skin>

.post-thumbnail{float:right;margin-left:20px}

Save Template
Selesai !!

Dengan selesainya tip dan trik Membuat Auto Read More dengan Gambar Thumbnail versi 3 ini, maka lengkaplah seri tutorial proBlogiz untuk membantu meringankan Anda yang ingin membuat auto readmore di blog Anda. Dengan banyak pilihan metode atau cara membuatnya tentu Anda lebih mudah menyesuaikan metode mana yang lebih cocok untuk template Anda.

Membuat Auto Read More dengan Gambar Thumbnail versi 1 

Membuat Auto Read More dengan Gambar Thumbnail versi 2 

Memang tidak ada yang benar-benar sempurna tentunya, jadi saya sangat menghargai saran dan ide lain Anda jika ada silahkan sharing bersama

Terima Kasih....