Membuat Readmore Versi 2

{ Posted on 19.57 by Faruq Blog }
Tags : ,
Nah di posting sebelumnya khan saya sudah memposting cara bagaimana membuat readmore di blog. Mungkin ada yang belum tau apa sih maksud Readmore itu? trus fungsinya buat apa? Nah kurang lebihnya seperti ini neh, Readmore itu fungsinya kalo posting yang kita buat itu terlalu panjang dan kita hanya ingin yang ditampilkan abstraksinya saja kemudian di bawahnya akan ada tulisan readmore yang bila kita klik akan menampilkan isi keseluruhan dari isi posting kita. Jadi akan menghemat tempat dan tidak membuat loading blog kita menjadi lama.

Di Readmore versi pertama jika kita mengklik tulisan readmore, maka posting kita tersebut akan ditampilkan di jendela baru, dan akan meloading ulang halaman website. Mungkin hal ini akan membuat kesal bagi para pembaca yang mempunyai akses internet yang kurang cepat dan ingin buru-buru.hehehehehe... Nah, Inilah yang membedakan dengan Readmore versi 2 kali ini. Di Readmore versi 2, ketika readmore di klik, keseluruhan artikel akan muncul tepat dibawah abstraksi dan tidak muncul dijendela baru. Hal ini tentu akan menghemat waktu dan tentunya gak bikin kesel bukan?

Terus, bagi yang ingin tau gimana cara buatnya. Ini neh langkah-langkahnya..

1. Login ke Blogger kamu, kemudian pilih Layout-->Edit HTML
2. Centang Expand Widgets Template
3. Copy code berikut di atas code </head>

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

4. Kalo sudah cari kode berikut:

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

Biar gampang carinya, tekan ctrl+f di keyboard, nah nanti akan muncul search tool bar. Kamu copy kode diatas di kotak find..

5. Kalo sudah ketemu, Di bawahnya khan da code <div class='post-body entry-content'>
Nah, ganti code tersebut dengan:

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

6. Trus di bawahnya lagi ada code <p><data:post.body/></p> kamu tambahin dibawahnya dengan kode berikut:

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

7. Jadi seluruh kodenya kurang lebih 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);'>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. Kamu bisa mengganti tulisan Selengkapnya.. dan Ringkasan.. sesuai dengan keinginan kamu.
9. Simpan template kamu.
10. Pindah ke menu Setting-->Formating
11. Di situ khan ada kotak Post Template, nah kamu copy kode berikut ke dalamnya.

<span id="fullpost">


</span>


12. Terus klik Simpan

Cara Pemakaian:

Pas kamu mau posting, pilih tab Edit HTML dan jangan Compose. Terus letakkan abstraksi kamu di atas code <span id="fullpost"> dan sisanya di antara code <span id="fullpost"> dan </span>

Mudah bukan? selamat mencoba ya....

No Response to "Membuat Readmore Versi 2"

Posting Komentar

Langganan: Posting Komentar (Atom)