Membuat Read More (Baca Selengkapnya)

Cara Membuat Read More atau Baca selengkapnya pada Blogspot. Kenapa kita perlu membuat read moer?? Ya simple aja supaya lebih ringkas tampilang blog kita. Apalagi jika artikel blog kamu panjang-panjang, membuat read more sangat penting untuk mempercantik tampilan blog kamu. Gimana caranya, Ikuti langkah=langkah berikut ini :

Membuat Read More (bagian Pertama)

1. Klik Menu Lay Out > Edit HTML
2. Setelah itu klik Expand Template Widget
3. Cari kode </head> supaya lebih mudah tekan Ctrl + F
4. Lalu masukkan kode berikut tepat diatas kode </head>

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

5. Masih ada lagi yang harus dilakukan, Cari kode berikut ini :

<div class='post-body'>
<p><data:post.body/></p>

atau

<div class='post-body entry-content'>
<p><data:post.body/></p>

Ganti kode tersebut dengan kode 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>

Catatan : kamu bisa mengganti kata “Read More" dengan : Selengkapnya, Baca Selengkapnya, […], dll terserah kamu.

6. Save Template Selesai

Membuat Read More bagian Dua : Pengaturan Pesan

Caranya : Pada waktu posting masukkan kode berikut pada bagian yang ingin di-hidden (tidak ditampilkan) pada postingan :

<span id="fullpost">

</span>

Atau jika ingin kode tersebut otomatis langsung masuk ke dalam postingan kamu, caranya gini :
1. Masuk Setting >> Formating
2. Pada kotak kosong bagian bawah masukkan kode tersebut.
3. Simpan, Selesai

Demikian cara membuat Read More pada blogspot,, Selamat moencoba, semoga bermanfaat bagi yang baru belajar..

Membuat Read More (Baca Selengkapnya)

1 Response to "Membuat Read More (Baca Selengkapnya)"