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 MoreMembuat 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 ) :


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) 
Artikel Terkait Lainnya:
Click here for comments

9 komentar

knp setiap di read more dia malah quote jadi ada dua postingan berulang ulang?
mohon pencerahanya gan

REPLY

@Lost Chip
kemungkinan di template Anda msh ada fungsi auto readmore yang lama, bisa bawaan blogger atau bawaan template, coba dihapus dlu, caranya, check artikel: Cara Menghapus Read More/Auto Read More Link di Blogger

REPLY

postingan yg bagus ..
salam blogwalking

mampir juga
djarumnews.blogspot.com

REPLY

thanks mas dah berkunjung
ok pssti saya mampir

REPLY

Mantap sekali Gan, tapi kalau mau menyisipkan kode adsense agar iklan muncul setelah Read More diklik bagaimana, Gan? Tolong bikinin panduannya juga, Gan.
Terimakasih

REPLY

kalau maksud Anda pasang iklan di postingan, tutornya bisa dilihat di Cara Pasang Iklan Di Awal Posting
semoga membantu :)

REPLY

nice www.pinang-community.blogspot.com blog ane

REPLY

trims informasinya kk , tapi kenapa di template saya ga bisa di terapkan ya , mungkin kk bisa membantu saya http://gieproject-course.blogspot.com/

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|