Komentar
Trik Buat Menu "Read More" (2)
Ini adalah trik membuat read more yang dibuat oleh salah satu guru saya, Bang Kendhin. Lho, sperti apa read more yang satu ini?? PAsti anda sudah penasaran bukan?? Ya iyalah, masa yaiya donk 
, mulan aja jamila, gak jamidong 
. Oke kita langsung ke topik bahasan.
Read More 2 ini adalah Read More yang ketika link Read Morenya diklik, maka artikel penuh akan ditampilkan langsung dibawah artikel utama. Wah, asyik donk, gak perlu load ulang?? Ya, benar sekali. Terus gimana cara buatnya ya?? Oke, kita akan bahas, tapi saya pesan
es jeruk dulu satu 
.
1. Seperti biasanya, masuk ke Blogger dengan ID kamu.
2. Pergi ke Tata Letak -> Edit HTML. Beri centang pada Expand Template Widget.
3. Cari kode <head>. Lalu paste-kan kode ini diatasnya.
<script src='http://kendhin.890m.com/Readmore.js'
type='text/javascript'/>
4. Kalo udah ketemu cari kode ini
<div class='post-header-line-1'/> .
Lalu dibawahnya kan ada kode seperti ini.
<div class='post-body entry-content'>
Ganti kode menjadi seperti ini.
<div class='post-body entry-content' expr:id='"post-" + data:post.id'>
<b:if cond='data:blog.pageType == "item"'>
5. Dibawahnya kan ada kode gini tuh <p><data:post.body/></p>. Nah, tambahkan kode ini dibawahnya
.
<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>
6. Nah simpan template kamu. Lalu pergi ke Settings -> Formatting.
7. Isikan kode ini pada kotak kosong Post Template.
<span id="fullpost">
</span>
8. Lalu simpan.
Nantinya ketikkan artikel yang ingin ditampilkan diatas kode <span id="fullpost">
</span>. Lalu ketikkan tulisan yang akan ditampilkan saat read more diklik diantara kode <span id="fullpost"> dan </span>. Gimana?? Gampang to? Gitu aja kok repot.
, mulan aja jamila, gak jamidong . Oke kita langsung ke topik bahasan. Read More 2 ini adalah Read More yang ketika link Read Morenya diklik, maka artikel penuh akan ditampilkan langsung dibawah artikel utama. Wah, asyik donk, gak perlu load ulang?? Ya, benar sekali. Terus gimana cara buatnya ya?? Oke, kita akan bahas, tapi saya pesan
es jeruk dulu satu .1. Seperti biasanya, masuk ke Blogger dengan ID kamu.
2. Pergi ke Tata Letak -> Edit HTML. Beri centang pada Expand Template Widget.
3. Cari kode <head>. Lalu paste-kan kode ini diatasnya.
<script src='http://kendhin.890m.com/Readmore.js'
type='text/javascript'/>
4. Kalo udah ketemu cari kode ini
<div class='post-header-line-1'/> .
Lalu dibawahnya kan ada kode seperti ini.
<div class='post-body entry-content'>
Ganti kode menjadi seperti ini.
<div class='post-body entry-content' expr:id='"post-" + data:post.id'>
<b:if cond='data:blog.pageType == "item"'>
5. Dibawahnya kan ada kode gini tuh <p><data:post.body/></p>. Nah, tambahkan kode ini dibawahnya
. <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>
6. Nah simpan template kamu. Lalu pergi ke Settings -> Formatting.
7. Isikan kode ini pada kotak kosong Post Template.
<span id="fullpost">
</span>
8. Lalu simpan.
Nantinya ketikkan artikel yang ingin ditampilkan diatas kode <span id="fullpost">
</span>. Lalu ketikkan tulisan yang akan ditampilkan saat read more diklik diantara kode <span id="fullpost"> dan </span>. Gimana?? Gampang to? Gitu aja kok repot
.
0 comments:
Post a Comment