Membuat Baca Selanjutnya

Artikel terlalu panjang?? jangan risau, boleh dipendekkan. Baca selanjutnya versi ni lebih mudah dan menyenangkan. Sambungan artikel akan dibuka di halaman yang sama. Nak tengok contoh boleh kesini. Ana sangat suka "read more" versi ini. Ok jom lihat cara membuatnya.

1. Loggin ke Blogger=>"Layout=>Edit Html". Jangan lupa tanda pada kotak "Expand Widget".

2. Cari kode di bawah ini:

</head>

3.Tambahkan kode ini di atasnya :

<script type='text/javascript' src='http://www.geocities.com/almansuqie08/bacaselanjutnya.js' />

4. Seterusnya cari kod ini <div class='post-header-line-1'/>. Dibawahnya akan ada kod seperti ini.

<div class='post-body entry-content'>

5. Gantikannya dengan kod dibawah.

<div class='post-body entry-content' expr:id='"post-" + data:post.id'>
<b:if cond='data:blog.pageType == "item"'>

6. Kemudian dibawahnya ada kod ini.

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

7. Tambah kod berikut tepat dibawahnya.

<b:else/>
<style>#fullpost {display:none;}</style>
<p><data:post.body/></p>
<span id='showlink'>
<p><a expr:onclick='"javascript:showFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>[+/-] Selengkapnya...</a></p>
</span>
<span id='hidelink' style='display:none'>
<p><a expr:onclick='"javascript:hideFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>[+/-] Ringkasan...</a></p>
</span>
<script type='text/javascript'>checkFull("post-" + "<data:post.id/>")</script>
</b:if>

8. Ok kita lihat keseluruhannya kodnya seperti ini.

<div class='post-header-line-1'/>
<div class='post-body entry-content' expr:id='"post-" + data:post.id'>
<b:if cond='data:blog.pageType == "item"'>
<p><data:post.body/></p>

<b:else/>
<style>#fullpost {display:none;}</style>
<p><data:post.body/></p>
<span id='showlink'>
<p><a expr:onclick='"javascript:showFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>[+/-] ReadMore...</a></p>
</span>
<span id='hidelink' style='display:none'>
<p><a expr:onclick='"javascript:hideFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>[+/-] Summary...</a></p>
</span>
<script type='text/javascript'>checkFull("post-" + "<data:post.id/>")</script>
</b:if>

9. Tulisan [+/-]ReadMore... dan [+/-]Summary... boleh digantikan mengikut selera Antum. Dah siap klik butang save.

Tambahan : Untuk meletakkan 'ReadMore' di sebelah kanan posting sila tambahkan kode dibawah sebelum kode ]]></b:skin>

#showlink {
font-size: 12px;
float: right;
margin-right: 20px;
margin-top: 20px;
font-weight: none;
}

#hidelink {
font-size: 12px;
float: right;
margin-right: 20px;
margin-top: 20px;
font-weight: none;
}

Dah siap save yer.. dan lihat hasilnya dengan membuat new post.

Contoh penulisan :

Penulisan bermula disini
<span id="fullpost">
Penulisan baca selanjutnya bermula disini
</span>

Jika Antum berminat untuk membuat baca selanjutnya setiap kali Antum posting, pergi ke "Setting=>Formatting=>Post Template" dan tambahkan kode ini kedalamnya..

<span id="fullpost">

</span>

Tips² Terkait