Membuat Auto Read More dengan Thumbnail di Blogger (versi 1)

proBlogiz

---

Membuat Auto Read More dengan Gambar Thumbnail pada blogger tentu membuat blog Anda semakin mengagumkan dan lebih user friendly. Auto Read More juga dapat mengurangi beban loading time karena postingan hanya ditampilkan dalam ringkasan (summary post ) saja pada homepage / halaman utama dan diikuti link Read More dibawahnya untuk membawa ke postingan selengkapnya.

Pada tuorial Blogger proBlogiz yang lalu, saya telah membagi bagaimana cara memasang / membuat Read More Link pada Blogger, namun seperti Anda tahu membuat Read More link dengan metode itu bukanlah type Read More Otomatis ( Auto Read More Link ).

Dengan membuat Auto Read More, Anda tidak perlu lagi memasangnya secara manual setiap kali membuat atau publis posting baru / artikel baru. Dengan memasang/menambah beberapa kode script pada template ( hack script ) maka otomatis postingan di Homepage, Label page atau Archive page akan ditampilkan sebagai ringkasan pendek atau summary dengan dikuti gambar thumbnail ( image thumb ).

Ada banyak pilihan atau versi Auto Read More with Image Thumbnail - umumnya menggunakan hack scrpit, yang dapat Anda gunakan sesuai dengan karakter template blogger. Karena adanya perbedaan pada masing-masing blogger template ini, memungkinkan tidak semua auto read more script bekerja atau dapat diterapkan di blog Anda. Oleh karena itu pada tuorial Membuat Auto Read More dengan Gambar Thumbnail di Blogger ini, saya ingin membagi dalam beberapa versi , sehingga Anda mempunyai banyak opsi atau pilihan versi Auto Read More with Image Thumbnail yang sesuai dengan karakter blog Anda ( pilih yang dapat diterapkan dengan baik di blog Anda ) :

Membuat Auto Read More dengan Gambar Thumbnail versi 1 
Membuat Auto Read More dengan Gambar Thumbnail versi 2 
Membuat Auto Read More dengan Gambar Thumbnail versi 3

Catatan :

Untuk membuat Auto Read More yang baru di blog Anda, pertama-pertama Anda harus lihat (check ) kembali apakah blog Anda ( template yang sekarang ) sudah ada fungsi atau script Read More, jika ada maka Anda harus menghapusnya dahulu semua kode script Read More Link lama tersebut. Saya sarankan Anda mengikuti tutorialnya Cara Menghapus Read More/Auto Read More Link di Blogger

Baiklah, setelah  memastikan sudah tidak ada lagi  fungsi Read More di template, Anda bisa mengikuti langkah-langkah berikut untuk Membuat Auto Read More dengan Gambar Thumbnail pada blogger :

Membuat Auto Read More dengan Gambar Thumbnail versi 1

Membuat link Auto Read More versi 1 ini, cukup mudah dan banyak keuntungan yang dapat Anda dapatkan, selain javascript bersifat internal sehingga tidak perlu lagi memuat file .js eksternal yang diupload di hosting lain. Dan juga bila Anda menerapkan versi ini :

1. Anda tidak perlu lagi memasukkan opsi Line Break ( Insert Jump Break ) di setiap postingan baru Anda bahkan ototmatis fungsi read more akan berlaku pada postingan lama Anda.

2. Gambar pertama dari posting Anda akan dipilih untuk tampilan pada halaman utama blog Anda untuk postingan tersebut.

Langkah Pemasangan kode Auto Read More :

Masuk Blogger Dashboard > Template > edit HTML

Back up template dahulu > klik Download Full Template 

Check "Expand Widget Templates" box

Tekan Control + F > cari tag </head>

Copy code script berikut dan pastekan tepat diBAWAH tag </head>

<!-- Auto read more v 1 script Start --> <script type='text/javascript'> var thumbnail_mode = "yes"; //yes -with thumbnail, no -no thumbnail summary_noimg = 430; //summary length when no image summary_img = 340; //summary length when with image img_thumb_height = 200; img_thumb_width = 200; </script> <script type='text/javascript'> //<![CDATA[ function removeHtmlTag(strx,chop){ if(strx.indexOf("<")!=-1) { var s = strx.split("<"); for(var i=0;i<s.length;i++){ if(s[i].indexOf(">")!=-1){ s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length); } } strx = s.join(""); } chop = (chop < strx.length-1) ? chop : strx.length-2; while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++; strx = strx.substring(0,chop-1); return strx+'...'; } function createSummaryAndThumb(pID){ var div = document.getElementById(pID); var imgtag = ""; var img = div.getElementsByTagName("img"); var summ = summary_noimg; if(thumbnail_mode == "yes") { if(img.length>=1) { imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>'; summ = summary_img; } } var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>'; div.innerHTML = summary; } //]]> </script> <!-- Auto read more v 1 script End -->

Selanjutnya cari tag <data:post.body/>
Gantilah tag tersebut dengan kode berikut dibawah :

<!-- Auto read more v1 Start -->
<!-- http://problogiz.blogspot.com/ -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<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>
<a class='more' expr:href='data:post.url'>Read more ...</a>
</b:if>
</b:if>
<!-- Auto read more v1 End -->

Sebelumnya klik Preview/Pratinjau dahulu jika tidak ada error message,
Kemudian Save Template

Kostumisasi

var thumbnail_mode = "yes"; 

ini berarti mode ringkasan /summary dengan diikuti thumbnail gambar, jika di set " no " berarti hanya ditampilkan ringkasan teks saja.

summary_noimg = 430;

jumlah karakter tanpa thumbnail gambar, Anda bisa merubah angka sesuai keinginan

summary_img = 340;

jumlah karakter dengan thumbnail gambar, rubah angkanya sesuai keinginan

img_thumb_height = 200; img_thumb_width = 200;

adalah ukuran thumbnail gambar (dalam pixel). ubahlah sesuai dengan keinginan.

Ganti teks " Read more... " dengan teks Anda sendiri, mis : Selengkapnya >>, dll. 
Atau jika ingin menggantinya dengan gambar/image, ganti teks tersebut dengan kode berikut :

<img border='0' src='url gambar/image readmore'/>

Untuk membuat tampilan summary/paragraf ringkasan di hompage menjadi rata kiri kanan (justify), maka tambahkan saja kode  style='text-align:justify;' pada kode line tag yang berwarna merah sehingga mejadi seperti ini :

<div style='text-align:justify;' expr:id='&quot;summary&quot; + data:post.id'>

Jika tutorial cara membuat Auto Read More versi 1 ini, tidak berhasil dengan baik dengan template Anda, cobalah cara yang lain: Auto Read More versi 2 dan versi 3.

Atau jika tetap ingin menerapkanya versi ini, silahkan Anda bertanya di form komentar kalau ada masalah scrpit atau susah memasangnya....saya pasti membantu mencari solusinya buat Anda.

Just Enjoy it!!

Baca juga :  Membuat Read More Link di Blogger (Google Recomended)