Membuat Readmore Versi Kedua

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. Tips Trik Blog sendiri lebih suka menyebutnya dengan readmore versi kedua. Saya sebut demikian karena memang sebelumnya pernah diulas mengenai pembuatan readmore ini dan selain itu, tidak tertutup kemungkinan ada tips readmore yang lain lagi sehingga lebih tepat disebut versi kedua dari pada versi baru.

Apapun namanya, yang jelas tips readmore kali ini berbeda dengan tips readmore terdahulu. Jika pada tips readmore yang terdahulu, ketika kita mengklik “link readmore” untuk 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.

Oh iya, postingan tentang readmore ini telah disajikan oleh banyak blog yang ada di seantero dunia. Walaupun sudah tergolong “basi” namun Tips Trik Blog akan tetap mempostingnya kembali, siapa tahu masih ada blogger yang membutuhkannya terutama new blogger. Bagi yang sudah mengetahui tips ini, silakan baca yang lain, ya!!!

Langsung saja, kita menuju kepada langkah-langkah membuat readmore versi kedua tersebut.

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 “selengkapnya” dan “ringkasan”.

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"> Tips Trik Blog sendiri lebih suka menyebutnya dengan readmore versi kedua.</span>

Dengan contoh di atas, ketika kita melakukan publish maka teks/tulisan “Tips Trik Blog sendiri lebih suka menyebutnya dengan readmore versi kedua.” akan disembunyikan dan jika diklik “link readmore”nya maka akan terpampang seluruh tulisan di atas.

Untuk melihat hasilnya, silakan kunjungi Blogging Triks & Tips.

(sumber : Trik Tips Blogging, Blog K.Rohman, Beautiful Beta)

baca juga yang ini

1. Tips Membuat Readmore Bag. Pertama
2. Deklarasi Link Teks
3. Kustomasi Efek dan Warna pada Link Teks
4. Kustomasi warna background
5. Tips Trik Windows XP
6. Tips Trik Komputer
7. Trik Tips Blogging

Artikel Yang Berhubungan