Cara Membuat Read More/ Baca Selengkapnya Pada Blogger Post

Posted by Herman on Saturday, October 18, 2008 49 comments

Pembuatan link 'Read more' atau 'Baca selengkapnya' merupakan teknik untuk menyembunyikan sebagian isi artikel pada halaman depan blog agar halaman blog tidak terlalu panjang.

Dengan demikian pengunjung akan lebih mudah untuk mengeksplorasi halaman blog anda dan bila ada pengunjung yang tertarik untuk membaca lebih lanjut artikel anda dapat dengan menekan link 'Read more' atau 'baca selengkapnya'.

Teknik ini banyak disukai oleh pemilik blog karena selain membuat blog terlihat lebih profesional, cara ini juga mempercepat loading blog.

Bagi anda yang ingin memasang link read more pada blog anda, silahkan ikuti langkah-langkah berikut:

1. Login ke Blogger. Klik menu Design-> Edit HTML.

2. Beri tanda centang pada "Expand Widget Templates".

3. Agar lebih aman, back-up terlebih dahulu template Anda dengan cara klik pada Download Full Template.

4. Setelah itu, cari kode </head> pada template Anda. Supaya lebih mudah untuk mencarinya, tekan Ctrl+F lalu masukkan kode </head> trus klik Next.

5. Jika sudah ketemu, letakkan kode dibawah ini diatas kode </head>

Catatan:

Bagi para blogger yang sudah pernah memasang kode read more harus dihapus
terlebih dahulu kodenya sebelum memasang kode ini.

<b:if cond='data:blog.pageType != &quot;item&quot;'> <script type='text/javascript'>

var fade = false;
function showFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
for (var i = 0; i &lt; spans.length; i++) {
if (spans[i].id == &quot;fullpost&quot;) { if (fade) { spans[i].style.background = peekaboo_bgcolor;
Effect.Appear(spans[i]);
} else spans[i].style.display = 'inline';
}
if (spans[i].id == &quot;showlink&quot;)
spans[i].style.display = 'none';
if (spans[i].id == &quot;hidelink&quot;)
spans[i].style.display = 'inline';
}
}


function hideFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
for (var i = 0; i &lt; spans.length; i++) {
if (spans[i].id == &quot;fullpost&quot;) {
if (fade) {
spans[i].style.background = peekaboo_bgcolor;
Effect.Fade(spans[i]);
} else spans[i].style.display = 'none';
}
if (spans[i].id == &quot;showlink&quot;)
spans[i].style.display = 'inline';
if (spans[i].id == &quot;hidelink&quot;) spans[i].style.display = 'none';
}
post.scrollIntoView(true);
}

function checkFull(id) { var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
var found = 0; for (var i = 0; i &lt; spans.length; i++) { if (spans[i].id == &quot;fullpost&quot;) { spans[i].style.display = 'none'; found = 1; } if ((spans[i].id == &quot;showlink&quot;) &amp;&amp; (found == 0)) spans[i].style.display = 'none';
}
}

</script>

</b:if>


6. Kemudian cari kode berikut

<div class='post-body'>
<p><data:post.body/></p>
atau

<div class='post-body entry-content'>
<p><data:post.body/></p>

7. Kalau sudah ketemu, hapus kode tersebut dan ganti dengan kode dibawah ini:

<div class='post-body' expr:id='"post-" + data:post.id' >
<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>
<span id='showlink'>
<a expr:href='data:post.url'><b>Read More...</b></a>
</span>
<script type='text/javascript'>
checkFull("post-" + "<data:post.id/>");
</script>
</b:if>

Catatan:

Kata Read More yang dicetak tebal diatas bisa anda ganti dengan kata lain misalnya, Baca Selengkapnya, Selanjutnya, Lanjut membaca, dan lain-lain.

8. Jika sudah, simpan template anda

Sampai disini proses pengeditan template telah berhasil. Namun fungsi read more masih belum bekerja. Untuk mengaktifkan fungsi read more pada artikel, anda harus menyelipkan dua baris kode diantara artikel yang mau disembunyikan.

1. Klik menu Posting -> Edit Post. Buka artikel yang mau dipasang read more. (Cara ini juga berlaku untuk artikel yang akan dipublikasi).

2. Pilih mode Edit HTML



3. Masukkan kode
<span id="fullpost"> diatas artikel yang mau disembunyikan dan kode </span> di akhir artikel. Sehingga posisinya menjadi seperti ini

Isi artikel yang ditampilkan
<span id="fullpost">

Isi artikel yang mau disembunyikan
</span>
4. Agar lebih jelas perhatikan gambar dibawah ini



5. Kalau sudah, klik tombol Publish Post dan lihat hasilnya.

Selamat mencoba dan semoga berhasil


Recent Posts:

49 comments

Anonymous said... 03 June, 2009
thanks atas nformasinya aku baru belajr dan ii sangat bermanfaat.
ekosetyadik blog said... 13 August, 2009
terima kasih mas...sangat bermanfaat bagi saya.
Bima said... 28 August, 2009
:D thx mas
Harga Harco Mangga Dua said... 14 September, 2009
Terima kasih



http://hargaharco.blogspot.com
Situs Harga Komputer Harco Mangga Dua
eno imoetabies said... 20 September, 2009
makasih bgd yah mas... aku baru belajar nih, bikin blog,,, hehhe,,, ;)
Kang Asep Hehehe said... 18 October, 2009
thank's =))
Ian File said... 25 March, 2010
udah saya coba n berhasil... makasi banget ya tipsnya... semoga sukses
liaoutlet said... 26 March, 2010
belum juga berhasil kang...baik itu postingan baru maupun lama... :(
Aciel Diary said... 05 May, 2010
mas, ko saya tidak bisa menambahkan read more di bloger saya ? setelah di save selalu ada bacaan xml error, dsb. padahal langkahnya sama. mohon bantuannya mas.
Okky said... 09 July, 2010
@ Acil Diary: kalo saya tidak ada trouble di penempatan xml-nya,TAPI KENAPA KATA "READMORE" GA MUNCUL YAH?? =))
MasKarso said... 14 July, 2010
Wah....trmksh atas artikel-nya. Yang sudah saya praktek-kan adalah "Cara menambahkan add-gadget" dan sudah berhasil.

"Keep On Blogging Man"
'Nda.NiEzz ^^ said... 14 July, 2010
horeeeeee...setelah saya ikuti...ternyata berhasil mas...aduh makasih banyak ya...

:x
chriswy said... 22 July, 2010
mas herman...saya uda coba untuk bikin readmore dengan script dari anda,kode yang pertama OKe setelah di pratinjau,tapi untuk kede yang ke 2 kayanya ada tag yg salah.karna saya tidak berhasil.coba mas herman teliti lagi.terimakasih...
herman said... 22 July, 2010
@chriswy

terima kasih atas informasinya. sudah saya ralat. silahkan dicoba kembali. semoga berhasil kali ini :)
Nex said... 02 August, 2010
mudah²an berhasil kali ini. tahnks...,
http://www.isiflashdisk.blogspot.com/ <---- semuanya ber-irama
Nex said... 02 August, 2010
==))
==))

setelah sekian jam fusing otank nyari sana sini... eh nyangkutnya sini. berhasil mas.. thank u

http://isiflashdisk.blogspot.com/
dimas demuse said... 01 January, 2011
mas apa bisa kata read more diganti dengan gambar :-o
KunangKunang said... 15 January, 2011
kok lom bisa read more sih ?? padahal langkah2nya dah sama persis ma yg ms ajarkan..:(
UQIXpakeX said... 01 February, 2011
Sip! Makasih artikelnya bro..
Sangat membantu..
Anjar Subiantoro Subagio Gibran said... 08 February, 2011
Kenapa pada HTML q gag ada kode seperti nomor enam,,??



Bantuan ya! Please!
Friska Adriana said... 16 May, 2011
nyerah deh tutorial yang ini susah banget dan bikin capek :(( ~x(
Netrin Ndeo said... 02 June, 2011
koq punyaku ga jadi yaa mas? :(
Febrilian Kristiawan said... 06 June, 2011
Kelihatannya ribet... coba dulu ah!
RyNI's_BLoG>. said... 13 June, 2011
kalo kode html yang kedua dah q cr, tp tdk addaaaa....!!!!
itulohh kode yang mw d gantiiii.....
gmana donk..????
real-freaker said... 05 July, 2011
mas, kok saya ga bisa mas, padahal, sesuai loo sama petunjuknya. mohon bantuannya mas.
agus Nawawi said... 24 July, 2011
GAN MINTA VIDEO TUTORIALNYA

PLEASE
borneoblog said... 02 September, 2011
terima kasih banyak bang...artikel anda sangat membantu dalam pembuatan blog saya...makhlum bru belajar membuat blog..
borneoblog said... 02 September, 2011
klu bisa entar klu blog saya udah berumur boleh yah tukaran link...
Junius Putra said... 30 September, 2011
This comment has been removed by the author.
Junius Putra said... 30 September, 2011
pny saya gk bisa mas.. coba tlg cek yah.. http://gunting-jari2.blogspot.com/2011/09/bentuk-bentuk-laptop-jadul.html
ayunakudo said... 06 December, 2011
untuk artikel pertama da kedua muncul readmorenya...tapi artikel selanjutnya ga muncul..:((
ayunakudo said... 07 December, 2011
masssss..mohon bantuan dongg...
setelah saya otak-atik lagi. kok tulisan readmorenya muncul di bagian paling bawah postingan ya?
jd tetep aja yg muncul di halaman depan keseluruhan isi blog. bedanya di bawah postingan ada tulisan read morenya aja..
mohon di balass mass...:((
Vidya Erlina Tyagita said... 25 December, 2011
jadi tiap posting kudu nulis 2 kode terakhir ya..
Tips & Trick said... 29 December, 2011
thanx infonya
masdolar said... 30 December, 2011
makasih gan, sangat bermanfaat
Erla Ayu Pertiwi said... 09 January, 2012
ada kode yang ga ada di blog aku, jadi ga bisa dipraktekkan, mohon pencerahannya :(
Olira said... 09 February, 2012
mas kode sperti di nomor 6 dilaman HTML q ngak ada knpa ya?
Rahmah Solehah said... 14 June, 2012
ah, belom berhasil terus nih :-L
bantu dong, gan....

kasusnya sama nih
kode sperti di nomor 6 dilaman HTML q ngak ada knpa ya?
ҒдӉяїzдL ѕҫядємїлб dєдтђ мєтдӏ said... 07 August, 2012
waktu mau back up. kok gak ada tulisan donwload full template yah ???? x(

kalo gak di back up bisa gak ??? bales donk coment nya,
mampir yah.. www.dunia-blogger-yahuud.blogspot.com
Ahmad Suryani said... 11 August, 2012
This comment has been removed by the author.
Ahmad Suryani said... 11 August, 2012
ko gak berhasil ? ~X(
BPP TIRIS said... 15 August, 2012
ma kasih gan bermanfaaaaat buaaaaanggggeeeeetttt...
Nuzul Asrul said... 26 August, 2012
Thx sangat bermanfaat buat aku yang masih pemula

http://alyfdownload.blogspot.com
Leviosa Bongkar said... 22 November, 2012
blogger yg sekarang g sama dg yg dlu... g tau mau nyari edit htmlnya dmn ???
erna rostiana said... 24 November, 2012
makasih atas ilmunya mas,blog saya bisa pake cara ini :)
Dharani Kassapa said... 29 December, 2012
Gimana caranya Download Full Template ya ? Kok ga ada tulisannya -_-"

Makasi :)
MUHAMMAD HAJIR AKIB said... 05 February, 2013
KODE YANG MAS MAKSUD GA' SAYA TEMUKAN, GI MANA DONK..!!! HELP ME
mbedunz-duk said... 05 February, 2013
good post bang bermanfaat :)
sangSurya said... 12 February, 2013
good artikel bung..
berhasil q terapkan..thx.
sangsurya24.blogspot.com

:)) :)] ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* : 8-} ~x( :-t b-( :-L x( =))

Post a Comment