Cara membuat readMore pada Blog

Kemarin waktu saya bermain-main dengan Facebook saya, saya bergabung dengan Komunitas Blogger Indonesia. Saya sempat meng-add teman-teman blogger dan akhirnya ada seorang teman yang bertanya kepada saya Bagaiman membuat Read more atau baca seterusnya.
Pada posting kali ini sya akan membahas tentang membuat Read More. Read More berfungsi untuk menyingkat tampilan blog kita agar dapat memposting dengan karakter yang banyak namun bsa disesuaikan dengan tampilan. Entah itu diperpendek atau yang lain.
Sebenarnya saya sendiri dulu tidak bias, namun setelah blogwalking ke beberapa blog, saya menemukan yang namanya membuat read more di blog. Dan akhirnya saya belajar dari kang herman. Setelah mempelajari beberapa tips tentang membuat read more akhirnya saya berhasil membyat readmore di blog saya sendiri.
Baiklah begini caranya:
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>

<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>

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.


Letakkan postingan yang mau ditampilkan diatas kode:

<span id="fullpost">

Dan sisanya (yang mau disembunyikan) diantara

<span id="fullpost">

dan

</span>

dan lalu klik TERBITKAN ENTRI

dan akhirnya anda sekarang bisa mengulangi posting dengan menggunakan read more. Tetapibila seandainya andaingin menggantinya, anda juga bisamengganti dengan baca seterusnya dll. Selamat mencoba!

Sumber: http://hermanblogtips.blogspot.com