Tips Membuat Readmore (2)

Membuat ReadMore dimana fungsinya adalah memperpendek/memotong isi posting artikel kita yang biasanya mempunyai beberapa paragraf dengan penjelasan panjang banget tapi untuk kali ini saya ingin menambahkan untuk tampilan lain lagi. Yang mana untuk sesi ini hampir seperti roll, tinggal diklik langsung muncul kelanjutannya tanpa harus menunggu reload ulang untuk menampilkan seluruh posting.


Contohnya :

Ini adalah awal suatu artikel yang saya potong karena terlalu panjang kalo postingan muncul semua, dengan ini akan saya potong berita ini sampai disini. [+/-] Selengkapnya...

Ini adalah awal suatu artikel yang saya potong karena terlalu panjang kalo postingan muncul semua, dengan ini akan saya potong berita ini sampai disini. Selanjunya ini adalah sisa postingan yang akan ditampilkan kemudian dan sementara akan disembunyikan dahulu dan hanya muncul pada saat klik [+/-] Ringkasan...

Langkahnya sbb :
1. Login ke blogger
2. Layout + Edit HTML + centang " Expand Widget Templates "
3. Cari kode --> <div class='post-header-line-1'/> dan <div class='post-body entry-content'> kemudian tambahkan kode berikut ini :

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

4. Cari kode ini --> <p><data:post.body/></p> setelah ketemu tambahkan dibawahnya kode berikut ini :

<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...</a></p>
</span>
<script type='text/javascript'>checkFull("post-" + "<data:post.id/>")</script>
</b:if>

5. Kemudian upload file readmore.js ini simpan ke server anda.
6. Kemudian Readmore.js tersebut tempatkan diatasnya --> </head> dengan ketentuan kode sbb :

<script src='http://blogger_anda/readmore.js' type='text/javascript'/>
</head>

7. Untuk penerapannya sbb :

Ini adalah awal suatu artikel yang saya potong karena terlalu panjang kalo postingan muncul semua, dengan ini akan saya potong berita ini sampai disini. <span id="fullpost"> Selanjunya ini adalah sisa postingan yang akan ditampilkan kemudian dan sementara akan disembunyikan dahulu dan hanya muncul pada saat klik [+/-] Ringkasan...</span>

8. Save Template


Source : http://dhuwuh.blogspot.com/2008/08/tips-membuat-readmore-2.html

Related Posts by Categories :