Membuat Read More versi Baru

Pada postingan kali ini, akan mengulas bagaimana cara pasang read more atau baca selengkapnya versi baru. Fasilitas read more ini dibuat oleh Ramani dan Hans. Di awal tutorialnya, Ramani menulis:

"Your blog's main page usually shows the entire content of each post. If your posts are usually more than 2 paragraphs, then your visitor will find it difficult to quickly find the topic of interest to him because he needs to scroll down a lot. This is where expandable post summaries helped in the old Blogger. This hack serves the same purpose for the new Blogger and more! That is, main page will show only post summaries and when you click "Read more", the full post appears in the main page itself (Peekaboo view)!!"

kelebihannya adalah pembaca tidak perlu me-loading ketika mengklik link Read more, karena keseluruhan artikel bisa terbuka sampai akhir. Selain itu untuk artikel yang pendek, tulisan readmore nya bisa di hapus sehingga tidak mengganggu pemandangan.

Oke, kita langsung saja ke "TKP", dan perlu diingat bahwa fasilitas ini hanya untuk templet new blogger (xml), bukan untuk templet kalsik. Langkah-langkhanya adalah sebagai berikut :

1. Sig in di blogger dengan id sobat.

2. Klik menu layout

3. Klik menu Edit HTML

4. Klik tulisan Download Template lengkap, silahkan save dulu template sobat, ini untuk mencegah resiko apabila terjadi kesalahan dalam melakukan kesalahan dalam proses editing template

5. Klik kotak kecil di samping tulisan Expand Template Widget, sekali lagi jangan lupa untuk memberi tanda centang dulu yah.

6. Tunggu beberapa saat sampai proses selesai

7. Copy kode berikut, lalu paste tepat di atas kode

</head>

<script type='text/javascript'

src='http://nurwahidin2.fileave.com/JavaScript/New%20Version%20of%20Read%20More.js'/>

8. Tambahkan kode berikut pada kode template sobat, yang berwarna hitam adalah kode asli dari kode template dan yang berwarna merah adalah kode yang harus di tambahkan, sedangkan yang berwarna biru bisa anda rubah sesuai keinginan :

<h3 class='post-title'>

<b:if cond='data:post.url'>

<a expr:href='data:post.url'><data:post.title/></a>

<b:else/>

<data:post.title/>

</b:if>

</h3>

</b:if>

<div class='post-header-line-1'/>

<div class='post-body' 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);'>[+/-] 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 saja...</a></p>

</span>

<script type='text/javascript'>checkFull("post-" + "<data:post.id/>")</script>

</b:if>

<div style='clear: both;'/> <!--clear for photos floats-->

</div>

</div>

Langkah selanjutnya : 

1. Klik menu Pengaturan

2. Klik menu Format

3. Copy kode berikut lalu paste pada kotak kosong yang berada di samping tulisan Template posting.

<span id="fullpost">

</span>

4.Klik tombol Simpan Setting

5. Selesai.

CARA POSTING ARTIKEL

Pada saat berada pada menu posting, pilih tombol yang Edit HTML jangan pilih yang tombol Compose, maka akan secara otomatis terlihat kode tadi di atas yaitu :

artikel yang mau di tampilkan di muka (ringkasannya)

<span id="fullpost">

sisa keseluruhan artikel

</span>

Artikel yang akan ditampilkan di postingan harus berada di atas

<span id="fullpost">

, sedangkan artikel yang disembunyikan (sisanya) ditaruh di bawah kode barusan, dan jangan lupa ditutup dengan kode

</span>

Selamat mencoba...