Read More atau Baca Selanjutnya merupakan sebuah tanda atau petunjuk yang memberitahukan kepada pembaca bahwa tulisan yang sedang ia baca masih ada kelanjutannya. Beberapa hari ini, saya melakukan percobaan untuk membuat script read more lebih sederhana dengan cara meminimalisasi script yang ada pada template blog saya saat ini. Kenapa harus di minimalisasi? Dengan banyaknya script yang ada di template blogger, maka proses loading (memuat halaman) akan lama. Tentunya ini akan menjadi masalah bagi pengunjung yang memiliki koneksi internet lambat. Selain itu juga, ada isu bahwa kecepatan membuka halaman menjadi salah satu parameter Google untuk menempatkan posisi situs di mesin pencarinya. Google memang sangat care (perhatian) dengan kepuasan pelanggannya.
Jika Anda mengambil atau mengunduh sebuah template blogger gratisan, biasanya template tersebut banyak sekali baris-baris kode yang tidak berguna. Salah satunya adalah yang sedang dibahas di tulisan ini (meminimalisasi script read more). Untuk itu, cari baris kode Java Script berikut di template Anda kemudian hapus kode tersebut. Jika tidak diketemukan, abaikan saja.
<b:if cond='data:blog.pageType != "item"'>
<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>
Cari baris kode berikut yang berfungsi untuk memanggil parameter yang telah dideklarasikan dari kode Java Script diatas. Baris kode yang berwarna merah adalah baris yang harus kita hapus.
<div class='post-body' expr:id='"post-" + data:post.id'>
<b:else/><style>.fullpost{display:none;}</style><p><data:post.body/></p>
<b:if cond='data:blog.pageType != "item"'> <a expr:href='data:post.url'><div style="text-align: right;">Read More</div></a></b:if><script type='text/javascript'>checkFull("post-" + "<data:post.id/>");</script></b:if><div style='clear: both;'/>
Jika Anda tidak menemukan kode seperti diatas, cari yang seperti dibawah ini. Ingat, yang berwarna merah adalah baris kode yang dihapus.
<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><div style='clear: both;'/>
Setelah semua kode berwarna merah dihapus, ganti kode yang telah dihapus dengan baris kode berwarna biru dibawah dan diletakan setelah <p><data:post.body/></p>
<div class='post-body' expr:id='"post-" + data:post.id'>
<p><data:post.body/></p>
<b:if cond='data:post.hasJumpLink'><div class='jump-link'><a expr:href='data:post.url + "#more"'><data:post.jumpText/></a></div></b:if ><div style='clear: both;'/>
Untuk mencobanya silakan buat postingan. Klik icon Insert Jump Break untuk menambahkan atau memisahkan tulisan yang ingin di sembunyikan (membuat ringkasan tulisan).
Berikut tampilan jika Anda mengubahnya menjadi mode HTML.
Referensi: Creating 'After the jump' summaries
Tulisan ini merupakan hasil dari percobaan dan sekaligus untuk mengenal lebih dekat cara pembuatan template yang sederhana. Jika ada kesalahan, silakan dikoreksi... Terima kasih.
No comments:
Post a Comment