Cara Pasang Auto Read More Terbaru pada Blog

 

Artikel trik blog ini kebetulan memang saya sadur, gabung, dan susun kembali dari 2 (dua) sumber blogger yang patut diacungi jempol, karena memang keduanya telah memberikan “pencerahan” dan info pengetahuan (khususnya bagi saya yang pemula ini) tentang bagaimana tips dan trik blog yang bagus dan menarik. Yaitu dari blog ( tips dan tutorial blog bagi pemula ) dan blog ( o-om.com ). Terimakasih untuk keduanya atas info bermanfaatnya. 

 

Auto readmore terbaru ini sangat berbeda sekali dengan readmore versi-versi sebelumnya, dimana untuk mendapatkan readmore kita harus secara manual memasukannya kedalam postingan dan hal ini kadangkala menyulitkan kita dalam mempostingnya. Yaitu dimana kita harus meng-cut tulisan menggunakan cara manual dengan melakukan pemasangan fungsi <div class="fullpost">..</div> atau <span class="fullpost">..</span> dimana kode ini biasanya kita tanamkan secara manual kedalam halaman postingan. Sedikit ribet, bukan?!

Akan tetapi, untuk auto readmore terbaru ini, sepertinya lebih canggih lagi, karena fungsi pemenggalan kalimat langsung bekerja secara otomatis, tanpa harus install code secara manual dan menempatkan postingan secara terpisah, atau dipisahkan dengan script tertentu seperti penjelasan diatas.

 

Sekedar informasi, fungsi Readmore ini mampu menampilkan image pertama dalam postingan dan mem-fload image tersebut di awal paragraf awal, meskipun gambar yang kita letakan berada di tengah atau akhir postingan. Mungkin lebih nyaman disebut saja dengan fasilitas image thumbnail. ( Sebagai contoh nyatanya, dapat anda lihat sendiri pada tampilan “home” postingan blog saya ini. Hehe !! )

Tidak hanya itu saja, kita dapat juga mengatur jumlah karakter yang ditampilkan. Disini ada 2 pilihan untuk jumlah karakter. Yang pertama, jumlah karakter yang ditampilkan jika ada image yang diikutsertakan dalam postingan dan yang kedua jumlah karakter tanpa image.

 

 

 

 

 

Lalu, Bagaimana Cara Memasang Auto Read More Terbaru ini ?? 

 

Penting! Yang sudah memasang Read More versi lama sebaiknya kode HTML-nya dikembalikan dulu ke seperti semula. Caranya hapus kode yang berwarna merah dibawah ini (Setiap template mungkin berbeda, jadi tinggal disesuaikan saja. Tapi ingat, download template terlebih dahulu untuk jaga-jaga !!)

 

<div class='post-header-line-1'/>
<div class='post-body'>
<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>
<p><data:post.body/></p>
<a expr:href='data:post.url'>Readmore</a>
</b:if>
<div style='clear: both;'/>

Setelah itu masih di Edit HTML, cari code berikut ini </head> dan pasang script berikut diatas kode </head> tadi.

<script type='text/javascript'>
var thumbnail_mode = "float" ;
summary_noimg = 250;
summary_img = 250;
img_thumb_height = 120;
img_thumb_width = 120;
</script>
<script src='http://h1.ripway.com/ooms/autoreadmore.js' type='text/javascript'/>

Jangan lupa untuk menyimpan editan tadi, setelah itu centang "Expand widget template" dan cari code berikut ini <data:post.body/>. Setelah ketemu, ganti code <data:post.body/> tersebut dengan script dibawah ini.

<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<span class='rmlink' style='float:left'><a expr:href='data:post.url'>READ MORE - <data:post.title/></a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

Silahkan disimpan dan lihat hasilnya.

 

Keterangan:

 

Anda bisa juga mengatur sendiri dan menyesuaikan tampilan readmore terbaru ini sesuai keinginan dengan men-setting kode-kode script tampilan yang diletakkan diatas kode </head> sebelumnya. Berikut penjelasannya :

 

var thumbnail_mode = "float";  (kita dapat memutuskan apakah letak thumbnail berada di (float) kiri atau jika tidak silahkan ganti dengan (no-float)
summary_noimg = 250; (Menetapkan berapa banyak karakter akan ditampilkan di posting tanpa gambar / thumbnail)
summary_img = 250; (Menetapkan berapa banyak karakter akan ditampilkan di posting dengan gambar / thumbnail)
img_thumb_height = 120; (Thumbnail 'tinggi dalam piksel)
img_thumb_width = 120; (Thumbnail 'lebar dalam piksel)

 

 

Selamat Mencoba dan Semoga Berhasil !!!

Artikel Yang Berhubungan