Tuesday, June 16, 2009

Tutorial Membuat Read More

Tutorial ini bertujuan untuk meringkaskan paparan artikel setiap kali anda membuat posting. Sebuah artikel yang panjang akan banyak memakan ruang di laman utama sesebuah blog dan kadang-kala pengunjung hanya ingin membaca artikel yang diminati sahaja. Dengan tutorial read more ini, anda boleh menjimatkan ruang di laman utama dan pengunjung boleh membaca penuh serta meringkaskan semula artikel anda dengan hanya menekan text Read More atau anda boleh menggantikan dengan perkataan lain seperti Baca Sepenuhnya tanpa menunggu untuk ianya dipaparkan sepenuhnya seperti Tutorial Read More yang lain kerana tutorial ini berkonsepkan JavaScript. Anda boleh rujuk di dalam blog ini untuk [...] Baca Sepenuhnya... yang sedia ada.


Berikut adalah cara-caranya:

1. Login ke ID Blogger atau terus ke Dashboard

2. Kemudian Pilih Layout dan terus ke tab Edit HTML

3. Tandakan Expand Template Widget

4. Copy code dibawah ini kemudian Paste di atas code </head>

<script src='http://ady.netii.net/Readmore.js' type='text/javascript'>
</script>


5. Setelah selesai langkah langkah 4, cari code dibawah ini pula
<div class='post-body'>

6. Kemudian gantikan code di atas dengan code dibawah ini

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

7. Seterusnya anda akan menjumpai code seperti ini bawah pada code di atas tadi
<p><data:post.body/></p>

8. Gantikan code tersebut dengan code dibawah ini

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


9. Kesemua code mesti kelihatan seperti di bawah 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>


10. Apabila selesai memasukkan kesemua code di atas SAVE TEMPLATE.

11. Langkah seterusnya anda perlu ke Menu Settings kemudian pilih tab menu Formatting.

12. Pada tab menu formatting masukkan code di bawah ini dalam kotak Post Template

<span id="fullpost">


</span>


11. Setiap kali anda membuat posting, code di atas akan tampil automatik. Mulakan dengan Edit HTML dan bukannya dari Compose. Tuliskan artikel yang ingin dipaparkan sebelum code <span id="fullpost"> dan selebihnya selepas code tadi. code yang anda tulis selepas <span id="fullpost"> akan di sorokan untuk bacaan lanjut dan di akhir artikel letakkan code </span>


Ok dah settle... Selamat Mencuba

10 comments:

CIKGU NAMAN said...

ady..mcm mana nk tukar colour tulisan readmore??

tqa.awesome said...

salam bro,,
sy punye template mmg dah tersedia dgn read more,,

cuma yg sy nk tuka skrg ,,
bile tekan read more,,
dy xkn view kat page yg laen,,

mcm br0 nye,,
best la,,!
klik view more je tros kluar kat bawah,,
xyah susah2 tggu loading~

cmne nk buat ek?
sbb view more sy mmg dah di setting kat template ni..

tolong~

enasan said...

saye dh try...pesal tekan selanjutner tue xkuar2 lak story kat bwh tue...


tolong2 hik3

intanurulfateha said...

.abg ady!
.help!
.kite klik selanjutnye pun, die x kuar2
.knp ek? :(

minTanG_teLip2 said...

mAcam cucAh jep neh . .adUyai~

sdura said...

hai di, saya nak minta tolong, kenapa ye saya dah try bnyk kali ikut step by step masukkan html code tapi everytime saya save templete, ada msg kelura something like "unable to chg' ada error xml dan bla bla bla.....apa dan kenapa ye...please help me

KedaiGambarKami, Kluang, Johor said...

salam ady..catlina ni..sy dah try buat utk blogshop sy tapi tak menjadi pun..hhu mcmane ye?sy boleh save template lepas edit tu, tapi memang tak manjadi lah, takde error pada kod, if ada, mesti takleh simapn code tu kan?

Unknown said...

bro, sy tak dapat buat la tutorial nie

Unknown said...

bro, sy tak dapat buat la tutorial nie

Unknown said...

bro, sy tak dapat buat la tutorial nie