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 :
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 :
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):
Masukan (copy paste) kode dibawah ini tepat dibawah kode diatas (langkah 3):
<b:if cond='data:blog.pageType != "item"'>
<script type='text/javascript'>
var fade = false;
function showFullundefinedid) {
var post = document.getElementByIdundefinedid);
var spans = post.getElementsByTagNameundefined'span');
for undefinedvar i = 0; i < spans.length; i++) {
if undefinedspans[i].id == "fullpost") {
if undefinedfade) {
spans[i].style.background = peekaboo_bgcolor;
Effect.Appearundefinedspans[i]);
} else spans[i].style.display = 'inline';
}
if undefinedspans[i].id == "showlink")
spans[i].style.display = 'none';
if undefinedspans[i].id == "hidelink")
spans[i].style.display = 'inline';
}
}
function hideFullundefinedid) {
var post = document.getElementByIdundefinedid);
var spans = post.getElementsByTagNameundefined'span');
for undefinedvar i = 0; i < spans.length; i++) {
if undefinedspans[i].id == "fullpost") {
if undefinedfade) {
spans[i].style.background = peekaboo_bgcolor;
Effect.Fadeundefinedspans[i]);
} else spans[i].style.display = 'none';
}
if undefinedspans[i].id == "showlink")
spans[i].style.display = 'inline';
if undefinedspans[i].id == "hidelink")
spans[i].style.display = 'none';
}
post.scrollIntoViewundefinedtrue);
}
function checkFullundefinedid) {
var post = document.getElementByIdundefinedid);
var spans = post.getElementsByTagNameundefined'span');
var found = 0;
for undefinedvar i = 0; i < spans.length; i++) {
if undefinedspans[i].id == "fullpost") {
spans[i].style.display = 'none';
found = 1;
}
if undefinedundefinedspans[i].id == "showlink") && undefinedfound == 0))
spans[i].style.display = 'none';
}
}
</script>
</b:if>
<script type='text/javascript'>
var fade = false;
function showFullundefinedid) {
var post = document.getElementByIdundefinedid);
var spans = post.getElementsByTagNameundefined'span');
for undefinedvar i = 0; i < spans.length; i++) {
if undefinedspans[i].id == "fullpost") {
if undefinedfade) {
spans[i].style.background = peekaboo_bgcolor;
Effect.Appearundefinedspans[i]);
} else spans[i].style.display = 'inline';
}
if undefinedspans[i].id == "showlink")
spans[i].style.display = 'none';
if undefinedspans[i].id == "hidelink")
spans[i].style.display = 'inline';
}
}
function hideFullundefinedid) {
var post = document.getElementByIdundefinedid);
var spans = post.getElementsByTagNameundefined'span');
for undefinedvar i = 0; i < spans.length; i++) {
if undefinedspans[i].id == "fullpost") {
if undefinedfade) {
spans[i].style.background = peekaboo_bgcolor;
Effect.Fadeundefinedspans[i]);
} else spans[i].style.display = 'none';
}
if undefinedspans[i].id == "showlink")
spans[i].style.display = 'inline';
if undefinedspans[i].id == "hidelink")
spans[i].style.display = 'none';
}
post.scrollIntoViewundefinedtrue);
}
function checkFullundefinedid) {
var post = document.getElementByIdundefinedid);
var spans = post.getElementsByTagNameundefined'span');
var found = 0;
for undefinedvar i = 0; i < spans.length; i++) {
if undefinedspans[i].id == "fullpost") {
spans[i].style.display = 'none';
found = 1;
}
if undefinedundefinedspans[i].id == "showlink") && undefinedfound == 0))
spans[i].style.display = 'none';
}
}
</script>
</b:if>
Langkah 5
Simpan terlebih dahulu template
Langkah 6
Cari kode dibawah ini :
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 :
Gantilah/replace kode diatas (langkah 6) dengan kode dibawah ini :
<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'>[Selengkapnya...]</a>
</span>
<script type='text/javascript'>
checkFullundefined"post-" + "<data:post.id/>");
</script>
</b:if>
<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"post-" + "<data:post.id/>");
</script>
</b:if>
Langkah 8
Periksa secara keseluruhan kode menjadi seperti dibawah ini (warna biru kode tambahan):
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='"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'>[Selengkapnya...]</a>
</span>
<script type='text/javascript'>
checkFullundefined"post-" + "<data:post.id/>");
</script>
</b:if>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
<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'>[Selengkapnya...]</a>
</span>
<script type='text/javascript'>
checkFullundefined"post-" + "<data:post.id/>");
</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
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>
Isi posting yang disembunyikan
</span>
Langkah 11
Selesai.......!!!!
Perhatian!
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
