Expandable Read More untuk entri

---

"Expandable Read More" adalah kaedah di mana sesuatu entri itu hanya akan memapaparkan ringkasan (summary) atau awalan untuk entri tersebut. Untuk melihat selebihnya, pelawat akan klik pada 'Read More' untuk memaparkan teks penuh bagi entri tersebut. Berbeza dengan Read More biasa sebelum ini, teks penuh akan dipaparkan tanpa perlu pergi ke halaman entri tersebut namun sebaliknya ia akan dipaparkan pada halaman yang sama.

Berminat untuk letakkan dalam blog anda? Apa yang perlu anda lakukan?





1. Login ke dalam akaun blogger anda



2. Klik pada "Layout" > "Edit HTML" > tandakan pada "expand widget tempate"

3. Tekan Ctrl+F, cari tag </head>. Letakkan kod berikut sebelum tag </head>

Tampal kod dibawah



<script type='text/javascript' src='http://www.anniyalogam.com/widgets/hackosphere.js' />



4. Simpan setting anda dengan menekan butang "Save Template"



5. Tekan kembali Ctrl + F dan cari <b:includable id='post'



6. Perhatikan kawasan kod seperti dalam screenshot di bawah:

7. Perhatikan tulisan yang berwarna merah dibawah ini dan tampalkan dengan teliti

    (Nota: sebahagian template mungkin mempunyai sedikit perbezaan pada kod tapi strukturnya masih sama)

Tampal kod bewarna merah sahaja



<b:includable id='post' var='post'>

<div class='post uncustomized-post-template' expr:id='"post-" + data:post.id'>

<a expr:name='data:post.id'/>

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

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



<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 href='javascript:void(0);' expr:onclick='"javascript:showFull(\"post-" + data:post.id + "\");"'>Read More...</a></p>

</span>

<span id='hidelink' style='display:none'>

<p><a href='javascript:void(0);' expr:onclick='"javascript:hideFull(\"post-" + data:post.id + "\");"'>Summary only...</a></p>

</span>

<script type='text/javascript'>

checkFull("post-" + "<data:post.id/>");

</script>

</b:if>



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

</div>



8. Simpan tetapan template anda ("Save Template")



9. Jika ada ralat (error) semasa save, bermakna ada masalah pada langkah 7



10. Pergi balik pada "Settings" > "Formatting" > cari bahagian "Post Template"



11. Isikan kotak berkenaan dengan kod dibawah:

Tampal kod berikut



Tulis ringkasan entri anda di sini

<span class="fullpost">

Tulis sambungan entri anda selebihnya di sini

</span>



12. Simpan setting anda dengan menekan butang "Save Settings"



13. Post atau Edit setiap entri anda seperti berikut format berikut:

Itu sahaja!! (^^,) Jika ada masalah mengenai tutorial ini, sila kemukakan pada ruangan komen. Selamat mencuba!!

Delicious

Digg

StumbleUpon

Reddit

Subscribe to RSS Feed