Membuat Readmore Versi ke 2

by Muhammad Aan , at 5:02:00 PM , have 4 comments
Membuat Readmore Versi Kedua : Antara satu blogger dengan blogger lainnya menyebut readmore versi ini dengan sebutan yang berbeda-beda, ada yang menyebut dengan readmore versi baru dan tidak sedikit pula yang menyebutnya dengan readmore versi Kedua. Saya sendiri lebih suka menyebutnya dengan readmore versi kedua. Saya sebut demikian karena memang sebelumnya pernah diulas mengenai pembuatan yang dulu ini dan selain itu, tidak tertutup kemungkinan ada tips readmore yang lain lagi sehingga lebih tepat disebut versi kedua dari pada versi baru.Kalau readmore versi dua ini lebih agak rumit dibandingkan readmore yang edisi yang lalu.

Apapun namanya, yang jelas tips readmore kali ini berbeda dengan tips readmore terdahulu. Jika pada tips readmore yang terdahulu, ketika kita mengklik Readmore versi duluuntuk membuka postingan secara utuh maka diperlukan waktu beberapa lama karena harus me-loading ulang postingan tersebut. Dan akan menjadi parah lagi apabila blognya termasuk blog yang berat di mana hal ini dapat membuat pengunjung tidak nyaman & akan menjadi lebih fatal jika kemudian pengunjung menjadi malas untuk melanjutkannya. Sedangkan pada versi yang kedua ini, jika kita mengklik “link readmore” maka postingan secara keseluruhan akan terpampang di bawahnya dengan seketika. Selain “link readmore”, tersedia juga “link summary” di mana jika kita mengkliknya maka postingan akan menjadi pendek (berupa ringkasan) lagi.


Pertama, login ke http://blogger.com hingga masuk Dasbor >> Tata Letak (layout) >> Edit HTML
Kedua, centangi Expand Template Widget

Ketiga, pasang kode berikut ini di atas kode </head >

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

Keempat, temukan kode di bawah ini.
<div class='post-body entry-content' >

Kelima, sisipkan kode berikut ini
expr:id='"post-" + data:post.id' >
<b:if cond='data:blog.pageType == "item"'

pada kode di atas sehingga menjadi seperti di bawah ini.
<div class='post-body entry-content' expr:id='"post-" + data:post.id' >
<b:if cond='data:blog.pageType == "item"' >



Keenam, temukan kode berikut ini yang letaknya di bawah kode tadi.
<p > <data:post.body/ > </p >

Ketujuh, tambahkan kode berikut ini di bawah kode tersebut.
<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 >

Catatan
Teks “readmore” dan “summary” dapat kita ganti sesuai keinginan/selera masing-masing, misalnya menjadi “Baca selengkapnya” dan “ringkasan”.Seperti punya saya baca selengkapnya

Kedelapan, secara keseluruhan akan menjadi seperti di bawah ini, di mana kode yang berwarna merah adalah kode yang baru saja kita tambahkan.

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

Kesembilan, simpan template
Kesepuluh, ketika melakukan pempostingan, letakkan teks/tulisan yang akan disembunyikan di antara kode <span id="fullpost"> dan </span>

Sebagai contoh adalah sebagai berikut.
Antara satu blogger dengan blogger lainnya menyebut readmore versi ini dengan sebutan yang berbeda-beda, ada yang menyebut dengan readmore versi baru dan tidak sedikit pula yang menyebutnya dengan readmore versi Kedua. <span id="fullpost"> saya sendiri lebih suka menyebutnya dengan readmore versi kedua. </span>
dan edisi yang lalu

Muhammad Aan
Membuat Readmore Versi ke 2 - written by Muhammad Aan , published at 5:02:00 PM, categorized as Blogger , Tips , Trik . And have 4 comments
4 comments Add a comment
Sora
wah.. thx mas aan.. ne yg q tunggu tunggu whhwhw

:))
Reply Delete
theo
wah code data:post.body tempat ku gak ketemu nih ... !
Reply Delete
Lala
Aku udah bisa buat read more versi ini, cuma masalahnya "read more" kadang bisa di klik, kadang macet. JS nya mungkin bandwidth exceeded :( Cara nyimpen JS sendiri gimana sob, biar ga nebeng orang lain?
Reply Delete
Cancel Reply
GetID
Copyright ©2013 Blog Mas Aan
Designed by Damzaky - Powered by Blogger