Cara Membuat Auto Read More

Auto Read More merupakan Read More otomatis dengan fungsi yang canggih. Kenapa canggih? Karena Auto Read More dilengkapi dengan pengaturan jumlah karakter yang tampil pada home page blog Anda. Ada 2 pengaturan jumlah karakter yaitu jumlah karakter Read More dengan gambar dan jumlah karakter Read More tanpa gambar.

Kecanggihan yang lain yaitu Read More ini memiliki image thumbnail yang menampilkan gambar pertama pada postingan blog Anda dan memunculkannya pada awal paragraf.


Jika Anda belum mengetahui apa itu Auto Read More, Anda bisa melihat read more pada home page dari blog Kumpulan Tutorial Ngeblog. Itu merupakan Auto Readmore dengan image thumbnail.

Udah ngga sabar nih menunggu tutorial cara membuat auto read more?? Hehehehehe...

Silakan Anda simak cara membuat auto read more berikut ini

Langkah 1
Login ke akun Blogger milik anda > Tata Letak > Edit HTML. Klik Download Full Template untuk membackup template blog Anda.

Beri tanda centang pada "Expand widget template" kemudian CoPas kode berikut ini di atas kode </head> (tekan Ctrl+F untuk mempermudah dalam pencarian kode)

<script type='text/javascript'>
var thumbnail_mode = "float" ;
summary_noimg = 250;
summary_img = 250;
img_thumb_height = 120;
img_thumb_width = 120;
</script>

<script type='text/javascript'>
//<![CDATA[
/******************************************
Auto-readmore link script, version 2.0 (for blogspot)

(C)2008 by Anhvo

visit http://en.vietwebguide.com to get more cool hacks
******************************************/
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(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>

Anda bisa memodifikasi kode berikut ini
var thumbnail_mode = "float";
summary_noimg = 250;
summary_img = 250;
img_thumb_height = 120;
img_thumb_width = 120;
Ganti angka summary_noimg untuk mengatur jumlah karakter yang tampil pada kutipan artikel tanpa gambar.
Ganti angka summary_img untuk mengatur jumlah karakter yang tampil pada kutipan artikel dengan gambar.

Ganti angka img_thumb_height untuk mengatur tinggi gambar yang tampil pada kutipan artikel.

Ganti angka img_thumb_width untuk mengatur lebar gambar yang tampil pada kutipan artikel.

Langkah 2
Cari kode <data:post.body/> lalu ganti dengan kode berikut ini

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<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</a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

Ganti kata yang berwarna biru dengan left untuk menampilkan link readmore di bagian kiri dan right untuk menampilkan link readmore di bagian kanan.

Ganti kata yang berwarna merah dengan kata yang Anda suka. Misalnya Baca Selengkapnya atau Baca Selanjutnya.

Langkah 3
Klik tombol Pratinjau untuk melihat hasil. Jika hasil sudah sesuai, klik tombol Simpan.

Artikel Terkait



Berlangganan


Tulis alamat email Anda untuk berlangganan artikel terbaru dari blog ini:

Delivered by FeedBurner

35 Response to "Cara Membuat Auto Read More"

Ratasoe mengatakan...

Brkunjung sob, wah lma ga Update niy ;-), mantap sob tutorx..

Rock mengatakan...

Blogku gak aku pasang auto read more sob, dulu pernah nyoba, tampilannya malah jadi lucu... hahaha...

Sou Stalker mengatakan...

blog saya sudah ada auto readmore nya,tapi baru ni tau cara buatnya. Thanks sob.

gak mutu mengatakan...

blog ku sudah auto read more juga. ...
tapi dari dulu ingin kukurangi jumlah kata yang ditampilkan pertama ...

dan ternyata ada disini tutornya ....

munir ardi mengatakan...

mantap tutorialnya

Adib from kompinter mengatakan...

Mantab ni tutorial

IHSAN mengatakan...

kok template saya yang baru sudah ditanam auto readmore ya?

he he he he ga' perhatikan pas nyari kemarin

richo mengatakan...

simpen dulu nih..... siap di praktekin

Blog Gadget mengatakan...

terima kasih kawan

belajar internet mengatakan...

kunjungan rutin sob,,,,

wah,,info menarik nih.

Darin mengatakan...

kalau saya pakai cara default dari editing blogspotnya :)
mungkin ini detailnya ya sob :)

ika_SweetyOrange mengatakan...

dari kmarin ngutak ngatik gak jadi2 Gi.. :(..
thnks infonya... (^_^)

ANAKCIREMAI mengatakan...

siip gan...

MAJALENGKA.BIZ mengatakan...

BERKUNJUNG KANG

Rhyzaboy mengatakan...

Mantab gan,, saya juga sudah pake nih...

tomo mengatakan...

Aku simpan templatenya kawan.mungkin aku berminat ntar

uswah mengatakan...

Rawan tidak ya kalau dimasukkan ke edit html.Maksudku mempengaruhi yang lain tidak gitu

Ngeposting ni yee mengatakan...

iNfo yang bagus kawand,,
lanjutkan..

Arfi mengatakan...

kalo arfi pakai draft.blogger aja.. jadi kalo mau readmore tinggal klik jump break ke awal paragraf postingan yang mau dihilangkan dari homebase blog.. lebih gampang daripada html yang njelimet banget...

arek11 mengatakan...

Thx ya sob.. :)

Digital Baca mengatakan...

Terima kasih infonya sob...
Bisa di coba nich :D
Salam sukses selalu ya...

U-marr mengatakan...

saya dulu pake auto readmore, tapi itu auto readmore nya bawaan dari templatenya...
dan sekarang gak pake, karena menurut saya lebih enak begini, jadi bisa nentuiin bagian mana yang harus di sembunyikan..

tapi, makasih yah mas atas tutorialnya, ni tutorial siapa tau bisa dijadiin bahan referensi dan juga saya jadi tambah ilmu baru. :)

ducky mengatakan...

ehem di blogspot ada yg otomatis tuh di menu postingannya sob...

but, nice info...:)

Irvan mengatakan...

Saya bingung mau pake juga soalnya dah pake model lama, yang ditulis ditiap postingan
kalo diganti apa ga bermasalah ya ?

Clara mengatakan...

trims atas infonya ^^

Munir Ardi mengatakan...

mampir baca tutorial bagus

secangkir teh dan sekerat roti mengatakan...

boleh juga sih, saya sedang pertimbanhkan juga yan ini :)

ags mengatakan...

Nice post,.. thangs..ijin copy 'n salam kenal

denkhoir mengatakan...

makasih...
manfaat....

Chipoy mengatakan...

Tidak ketemu kode </head> dilangkah pertama.?
Truss klo kode gak ketemu gmana donk mas, pengen nich bisa read more otomatis.
Thx ya mas

Intan mengatakan...

Mantapz nich info na.
patut coba nich.

Bahry mengatakan...

Gak bisa bro...
Tapi thx y atas info na, jadi tambah ilmu nich.
^_^

Faiq Qushoyyi mengatakan...

Trim's sob tutorialnya, semoga dapat bermanfaat bagi pengunjung blog sobat.
Kunjungan baliknya ya sob..
Salam Sukses Selalu

Dedhic Pasukan Mati mengatakan...

:X ga ngerti boss.. uyeng-uyengan....

Sechu mengatakan...

nih baru yang aku cari, tapi binun cara prakteknya bos.

Poskan Komentar

Silakan menyampaikan kritik, saran dan komentar.