Gank Zone Blog? Join Now!
RSS Feed Facebook Twitter

Membuat Readmore Otomatis (auto readmore)

Share or Like on :


Membuat Readmore Otomatis (auto readmore

Pada tahu belum apa itu read more?? itu tuh biasanya kalau di halaman depan blog kan banyak banget tuh daftar postingannya. Biar gak terlalu panjang, maka postingan pada halaman depan itu disingkat, maksudnya yang tadinya panjang hanya sebagian saja yang ditampilkan, nah untuk membuat yang semacam itu menggunakan read more, jika pembaca ingin melanjutkan membaca postingan tersebut yaitu dengan cara mengklik read more atau bahasa indo nya baca selengkapnya . . .


Read more ini ada dua versi, yang pertama cara manual, dan yang kedua cara otomatis, tetapi di sini saya akan bahas mengenai read more yang otomatis. Hebatnya read more otomatis ini dilengkapi dengan thumbnail gambar dan otomatis menyesuaikan jumlah huruf yang ditampilkan. Jadi jika postingan yang sobat buat mengandung gambar, gambar tersebut secara otomatis akan dijadikan sebagai thumbnail gambar.


Biar gak pusing, langsung saja sikat tutorial berikut :


Pertama, login dulu ke blogger terus masuk ke menu rancangan dan pilih edit HTML jangan lupa untuk mencentang expand template widget. Biar aman, backup dulu template blog sobat. Abis itu cari kode </head> kemudian copy script dibawah ini dan paste sebelum kode </head>.


<script type='text/javascript'>

var thumbnail_mode = &quot;no-float&quot; ;

summary_noimg = 550;

summary_img = 551;

img_thumb_height = 150 ;

img_thumb_width = 150;

</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");
if(img.length<1) {
imgtag = '<span style="float:left; padding:0px 5px 5px 10px;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyEJuGXUFm9_Gj4LSW6_DBQAllf-92rKqO5s2gTvKkpj3woVWsVwyQ29bZIME5aPkAExRs9Y8Ahhhc8oK9fSrt0-sJQaUz9oxYgQYpbOhjsXOEf1nkAvXYiB6iOkhpVhYamxn8gjU6rdOd/s1600/logo-gank-zone.jpg" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
var summ = summary_noimg;
}
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 5px 5px 10px;"><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>


Nah, kalau sudah, masih pada halaman edit HTML cari lagi kode <data:post.body/> , biasanya setiap template berbeda, jika pada template sobat sudah ada script-script lain misalnya tombol like atau lainnya sesuaikan saja. Kalau sudah ketemu hapus dan ganti kode <data:post.body/> dengan kode di bawah ini :


<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>
<span class='rmlink' style='float:left'><a expr:href='data:post.url'><b>Read more &#187;</b></a></span>
</b:if>
</b:if>


Setelah itu simpan template sobat dan lihat hasilnya pada halaman depan blog sobat, apakah sudah berubah atau belum.


Catatan Penting :

var thumbnail_mode = &quot;no-float&quot; ; (ini adalah untuk mengubah posisi gambar apakah di(float) kiri atau jika tidak silahkan ganti dengan (no-float)


summary_noimg = 550; (Banyaknya huruf yang akan ditampilkan di posting tanpa gambar / thumbnail)


summary_img = 551; (Banyaknya huruf yang akan ditampilkan di posting dengan gambar / thumbnail)


img_thumb_height = 150; (Thumbnail 'tinggi gambar dalam piksel)


img_thumb_width = 150; (Thumbnail 'lebar gambar dalam piksel)


https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyEJuGXUFm9_Gj4LSW6_DBQAllf-92rKqO5s2gTvKkpj3woVWsVwyQ29bZIME5aPkAExRs9Y8Ahhhc8oK9fSrt0-sJQaUz9oxYgQYpbOhjsXOEf1nkAvXYiB6iOkhpVhYamxn8gjU6rdOd/s1600/logo-gank-zone.jpg = (Gambar default yang akan ditampilkan jika postingan tidak mempunyai gambar).


Selamat mencoba semoga sukses :)




19 komentar

Kamis, 12 April, 2012

wah mantab ni buat di pasang di blog ku :D

Terimakasih gaulhost atas Komentarnya di Membuat Readmore Otomatis (auto readmore)
Kamis, 12 April, 2012

Sip, silakan dipasang sob, Terima kasih sob telah berkunjung.

Sabtu, 14 April, 2012

Segera dipraktekkan mas

Terimakasih intermezo atas Komentarnya di Membuat Readmore Otomatis (auto readmore)
Sabtu, 14 April, 2012

sip mas

Sabtu, 14 April, 2012

Pas Mantap! Pas cari ilmu readmore,
mantap ada postingannya disini.

Terimakasih Unknown atas Komentarnya di Membuat Readmore Otomatis (auto readmore)
Minggu, 15 April, 2012

Mantap bro, sdh saya aplikasikan ke blog saya.
Thanks :)

Terimakasih Utulubul atas Komentarnya di Membuat Readmore Otomatis (auto readmore)
Selasa, 17 April, 2012

Asiiiik keren kang, ini yang ane cari

tutorial di blog lain read more nya ngenain page juga, soalnya aku naruh guest book di page bukan di postingan, tenkyu mas :D

Terimakasih Rouen atas Komentarnya di Membuat Readmore Otomatis (auto readmore)
Rabu, 18 April, 2012

pernah pasang read more...tapi setelah lama tidak update blog. read more nya jadi hilang.kenapa ya?

Terimakasih bintang_biru07 atas Komentarnya di Membuat Readmore Otomatis (auto readmore)
Selasa, 24 April, 2012

Mungkin itu readmore yg versi lama. Kalau mau muncul harus diberi div class="fullpost" dulu pada postinganya.

Kamis, 14 Juni, 2012

mantap ganz...
thank's auto readmore ny . .
ijin copas scriptnya.. :)

Terimakasih gunks atas Komentarnya di Membuat Readmore Otomatis (auto readmore)
Kamis, 14 Juni, 2012

silakan dicoba sob, makasih udah mampir

Rabu, 20 Juni, 2012

Sob BANNER NYA Sudah di paasang nih link dimana letak banner sobat http://maytommy-perdana.blogspot.com/2012/03/tuker-link.html pasang banner ane juga yah

Terimakasih Unknown atas Komentarnya di Membuat Readmore Otomatis (auto readmore)
Minggu, 22 Juli, 2012

makasi gan, langsung ane praktekkan jadi deh, salam sukses dari http://buanasenja.blogspot.com

Terimakasih Fuadi atas Komentarnya di Membuat Readmore Otomatis (auto readmore)
Senin, 23 Juli, 2012

@Fuadi silakan dicoba sob semoga bermanfaat

Selasa, 21 Agustus, 2012

makasi boz untuk tutorialnya ....

Terimakasih Software Download Full atas Komentarnya di Membuat Readmore Otomatis (auto readmore)
Senin, 10 September, 2012

oh gitu ya gan caranya,,makasih ya

Terimakasih gejala kista atas Komentarnya di Membuat Readmore Otomatis (auto readmore)
Senin, 10 September, 2012

mantap banget nih gan informasinya,sukses selalu

Terimakasih pantangan asma atas Komentarnya di Membuat Readmore Otomatis (auto readmore)
Senin, 10 September, 2012

Makasih nih informasinya salam kenal gan moga sukses trus gan...

Terimakasih Mengatasi Disfungsi Seksual atas Komentarnya di Membuat Readmore Otomatis (auto readmore)

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

Terimakasih YUEZHA SOFTWARE | Download Software Gratis atas Komentarnya di Membuat Readmore Otomatis (auto readmore)

Posting Komentar

Silahkan berkomentar pada blog ini dengan baik dan sopan. Jadilah Top Komentator Untuk Mendapatkan Backlink Gratis!!!

 
© Copyright 2012 - Gank-Zone Blog. Powered by Blogger.com and Gank-Zone
Gank Zone Blog