Pernah ada teman yang ngasih komentar di blog saya, "Halaman kok panjang banget, capek scrollnya :(". Setelah diteliti ternyata emang bener, sangat tidak efisien membiarkan post yang terlalu panjang. Akhirnya saya coba tanya om google bagaimana agar tampilannya tidak terlalu panjang. Begini caranya....
1. Pertama masuk ke Dasbor dan buka web kamu, masuk ke "Tata Letak" kemudian "Edit HTML"
2. Kemudian centang "Expand Template Widget" untuk menampilkan script yang tersembunyi.
3. Kemudian masukkan script ini di antara <head></head>
<b:if cond='data:blog.pageType != "item"'>4. Setelah itu cari script ini
<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 < spans.length; i++) {
if (spans[i].id == "fullpost") {
if (fade) {
spans[i].style.background = peekaboo_bgcolor;
Effect.Appear(spans[i]);
} else spans[i].style.display = 'inline';
}
if (spans[i].id == "showlink")
spans[i].style.display = 'none';
if (spans[i].id == "hidelink")
spans[i].style.display = 'inline';
}
}
function hideFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
for (var i = 0; i < spans.length; i++) {
if (spans[i].id == "fullpost") {
if (fade) {
spans[i].style.background = peekaboo_bgcolor;
Effect.Fade(spans[i]);
} else spans[i].style.display = 'none';
}
if (spans[i].id == "showlink")
spans[i].style.display = 'inline';
if (spans[i].id == "hidelink")
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 < spans.length; i++) {
if (spans[i].id == "fullpost") {
spans[i].style.display = 'none';
found = 1;
}
if ((spans[i].id == "showlink") && (found == 0))
spans[i].style.display = 'none';
}
}
</script></b:if>
<div class='post-body entry-content'> // ada yang 'post-body' aja :Dkemudian ganti dengan script ini
<p><data:post.body/></p>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
<div class='post-body' expr:id='"post-" + data:post.id'>5. Langkah terakhir, pada waktu post artikel baru letakkan post yang ingin di sembunyikan di antara
<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>
<a expr:href='data:post.url'>Read More......</a>
</b:if>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
<span class='fullpost">
</span>
Selamat mencoba... :D
