Cara menampilkan Read More di Blog

Hasil browsing di internet :p

Bagi Anda yang belum pernah memasang kode read more pada blogger dan ingin memasangnya. Silahkan ikuti cara-cara dibawah ini:
1. Login ke Blogger. Klik menu Layout lalu klik Edit HTML. Back-up terlebih dahulu template Anda dengan cara klik pada Download Full Template untuk menyimpan file template di komputer Anda.
2. Beri tanda centang pada opsi "Expand Widget Templates" (tunggu beberapa saat hingga proses selesai).
3. Setelah itu, cari kode </head> pada template Anda. Supaya lebih mudah untuk mencarinya, tekan Ctrl+F lalu masukkan kode </head> trus klik Next.
4. 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 kode read more-nya 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>

5. Kemudian cari kode

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

atau

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

6. Kalau sudah ketemu, hapus kode tersebut lalu ganti dengan kode yang 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'>Read More...</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.
7. Jika sudah selesai, klik tombol Save Template. Kalau muncul "Your changes have been saved" berarti proses pengeditannya berhasil.
8. Kemudian klik Settings, lalu klik Formatting. Cari "Post Template". Kalau sudah ketemu, isi kotak kosong tersebut dengan kode berikut:

<span id="fullpost">
</span>

9. Jika sudah, klik tombol Save Settings
Cara memposting supaya muncul Read More pada saat artikel ditampilkan:
Pada saat Anda mau memposting, anda akan tampak 2 baris kode pada bagian Edit HTML kotak posting seperti pada gambar dibawah ini.
a hrif="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-Scsm_2lNmv6z4Lwmzlc-TNOXd2HlIN7hRO0dUEYK_VPTQdeOUZKEU18Kn5g31SBCcm-DwmmNJyQxdtwGqfp5kOmBOCoyFkTc3vKfrz1bA2Sh2LLXVskPGx2KijqO4Bh_BisFowfTjpq_/s1600-h/blogger+post+editor+edit+html+mode.gif">
Letakkan postingan yang mau ditampilkan diatas kode

<span id="fullpost">

Dan sisanya (yang mau disembunyikan) diantara

<span id="fullpost">

dan

</span>

Klik Publish Post, lalu klik (in a new window) untuk melihat hasilnya pada halaman baru
Catatan:
Artikel yang sudah diposting sebelum memasang kode Read More akan tetap tampil penuh dihalaman muka. Untuk mengeditnya, Anda bisa menggunakan cara berikut:
1. klik Edit Posts pada menu posting
2. Klik Edit pada artikel yang ingin dipasang Read More
3. Klik mode Edit HTML, lalu pindahkan kode <span id="fullpost"> dibawah postingan yang mau ditampilkan dan letakkan kode </span> diakhir artikel
4. Klik tombol Publish Post, lalu klik (in a new window) untuk melihat hasilnya berhasil atau tidak. Jika tidak, mungkin ada bagian yang terlewatkan atau salah. Coba liat kembali langkah diatas.
Selamat Mencoba. Semoga berhasil...!!

Baca juga artikel yang lain:

Jangan Lupa:

Share ke FacebookShare ke TwitterDownload Versi PDFKirim Lewat EmailPrint Artikel Ini