Readmore Peekabo V.S. Readmore Standar (HTML)

Beberapa saat yang lalu aku pernah membuat artikel tentang readmore, ada 2 jenis readmore yaitu Readmore Peekabo dan Readmore Standar HTML. Dari kedua jenis Readmore tersebut memiliki kekurangan dan kelebihan masing-masing, berikut perbandingannya :
Readmore Peekabo :

• Kelebihan ; loading page per artikel cepat, fleksible dan terlihat profesional
• Kekurangan ; rumit dan sulit dalam pemasangan karena menggunakan code JavaScript, sering terjadi kegagalam pemenggalan dan atau kurang rapi

Readmore Standar :

• Kelebihan ; sederhana dan mudah dalam pemasangan, loading page per artikel lama
• Kekurangan ; kurang fleksibel dan kurang terlihat profesional
• Pada artikel kali ini kita akan menggabung kedua jenis readmore tersebut (sebenarnya hanya memodifikasi readmore peekabo).

Ikuti langkah pemasangan readmore modifikasi berikut :
Langkah 1
Login ke Blogger
Langkah 2
Masuk kebagian "TATA LETAK" dan pilih tab "Edit HTML"
Langkah 3
Klik "Expand Template Widget" dan cari kode dibawah ini :

]]></b:skin>

Langkah 4
Masukan (copy paste) kode dibawah ini tepat dibawah kode diatas (langkah 3):

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<script type='text/javascript'>
var fade = false;
function showFullundefinedid) {
var post = document.getElementByIdundefinedid);
var spans = post.getElementsByTagNameundefined&#39;span&#39;);
for undefinedvar i = 0; i &lt; spans.length; i++) {
if undefinedspans[i].id == &quot;fullpost&quot;) {
if undefinedfade) {
spans[i].style.background = peekaboo_bgcolor;
Effect.Appearundefinedspans[i]);
} else spans[i].style.display = &#39;inline&#39;;
}
if undefinedspans[i].id == &quot;showlink&quot;)
spans[i].style.display = &#39;none&#39;;
if undefinedspans[i].id == &quot;hidelink&quot;)
spans[i].style.display = &#39;inline&#39;;
}
}
function hideFullundefinedid) {
var post = document.getElementByIdundefinedid);
var spans = post.getElementsByTagNameundefined&#39;span&#39;);
for undefinedvar i = 0; i &lt; spans.length; i++) {
if undefinedspans[i].id == &quot;fullpost&quot;) {
if undefinedfade) {
spans[i].style.background = peekaboo_bgcolor;
Effect.Fadeundefinedspans[i]);
} else spans[i].style.display = &#39;none&#39;;
}
if undefinedspans[i].id == &quot;showlink&quot;)
spans[i].style.display = &#39;inline&#39;;
if undefinedspans[i].id == &quot;hidelink&quot;)
spans[i].style.display = &#39;none&#39;;
}
post.scrollIntoViewundefinedtrue);
}
function checkFullundefinedid) {
var post = document.getElementByIdundefinedid);
var spans = post.getElementsByTagNameundefined&#39;span&#39;);
var found = 0;
for undefinedvar i = 0; i &lt; spans.length; i++) {
if undefinedspans[i].id == &quot;fullpost&quot;) {
spans[i].style.display = &#39;none&#39;;
found = 1;
}
if undefinedundefinedspans[i].id == &quot;showlink&quot;) &amp;&amp; undefinedfound == 0))
spans[i].style.display = &#39;none&#39;;
}
}
</script>
</b:if>

Langkah 5
Simpan terlebih dahulu template
Langkah 6
Cari kode dibawah ini :

<p><data:post.body/></p>

Langkah 7
Gantilah/replace kode diatas (langkah 6) dengan kode dibawah ini :

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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'>[Selengkapnya...]</a>
</span>
<script type='text/javascript'>
checkFullundefined&quot;post-&quot; + &quot;<data:post.id/>&quot;);
</script>
</b:if>

Langkah 8
Periksa secara keseluruhan kode menjadi seperti dibawah ini (warna biru kode tambahan):

<div class='post-header-line-1'>
</div>

<div class='post-body' expr:id='&quot;post-&quot; + data:post.id'>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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'>[Selengkapnya...]</a>
</span>
<script type='text/javascript'>
checkFullundefined&quot;post-&quot; + &quot;<data:post.id/>&quot;);
</script>
</b:if>

<div style='clear: both;'/> <!-- clear for photos floats -->

Langkah 9
Sampai disini "SIMPAN TEMPLATE" karena modifikasi template sudah selesai dan minum dulu
Langkah 10
Masukan kode dibawah pada setiap posting/artikel yang akan di publish

<span id="fullpost">
Isi posting yang disembunyikan
</span>

Langkah 11
Selesai.......!!!!

Perhatian!

• Posting/artikel yang terletak di antara kode langkah 10 itulah yang terpenggan dan akan ditampilkan jika pengunjung mengklik Readmore... atau Selengkapnya...
• Lihat langkah 7 dan cari kata Selengkapnya.... anda dapat mengubahnya dengan kalimat apapun (misal; baca terus...)
• Masukan kode pemenggalan (Langkah 10) pada mode Edit HTML