Penting!! Sobat Blogger yang ingin re-post atau menulis kembali artikel kami diblog/website Anda, harap lihat halaman DISCLAIMER ( beberapa blog telah diproses di Google Removal Content ) Setiap tindakan pelanggaran hak cipta (COPAS) akan dilaporkan, TANPA pemberitahuan.

proBlogiz

Auto read more for bloggerSeri 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.



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

Terima Kasih....
Artikel Terkait Lainnya:
Click here for comments

6 komentar

terima kasih gan
infonya bagus bgt

REPLY

loh.. jadi bedannya dengan yang lain apa ya mas ?

REPLY

pemasangan auto readmore pd blogger (hack blogger template) bisa berebda2 mas, tergantung karakter templatenya,jadi saya buat menjadi beberapa pilihan metode pemasanganya, secara umum hasilnya akan sama

REPLY

Terima kasih, yang ini semoga bisa deh.. hehehe, thanks for share

REPLY

Maturnuwun gan mau di coba nih....

REPLY

Silahkan Berkomentar
Komentar/pertanyaan Sesuai Topik, Please NO SPAM, NO Promotion Links
Convert Kode HTML sebelum disisipkan

Convert

Google+ Followers

Submit email Anda, dapatkan update artikel:


Like Me

Artikel Terbaru

|Copyright © 2013| Problogiz |All Rights Reserved|