Belajar Cara Membuat Read More ala Peek-a-Boo Pada Blogger
By admin • Aug 15th, 2008 • Category: Trik and Tips Blogging“Read More” ala Peek-a-Boo ini memang agak berbeda dengan “Read more” biasanya… Karena, ketika diklik “Read more” maka blog akan melakukan loading halaman untuk membuka posting tersebut selengkapnya. Akan tetapi untuk “Read more” ala Peek a Boo yang ini jika kita mengklik “Read more” tersebut, maka keseluruhan artikel akan terpampang dibawahnya, jadi tidak perlu meload ke halaman yang lain, contohnya seperti dalam blog kepunyaan saya ini. Maaf Blog tersebut sering Eror.
Sebenarnya tulisan ini adalah untuk konsumsi sendiri. Siapa tahu saya kelupaan. Akan tetapi apabila ada diantara anda para “KOMUNITAS BLOGGER” yang merasa butuh dengan tulisan ini, anda bisa mengikuti langkah-langkah “Cara Membuat Read More ala Peek-a-Boo” dibawah ini : Sambil “Belajar” bersama-sama ya…
1. Masuk ke Blogger atau Kontrol Panel Blog anda
2. Pilih Setting –> Template –> Edit HTML
3. Beri tanda centang pada kotak yang bertuliskan Expand Template Widget
4. Copi kode berikut ini dan letakkan diatas kode </head> dan bawah kode ]]></b:skin> kode tersebut letaknya ada di bagian tengah-tengah kode HTML yang lainnya, kalau anda kesulitan mencari kode tersebut silakan memakai fasilitas Find pada browser mozilla anda dengan menekan menu Edit –> Find in this page…
<script src=’http://www.geocities.com/kendhin_x/blog/Readmore.js’ type=’text/javascript’/>
5. Kalo sudah cari kode dibawah ini, kalau tidak ketemu gunakan cara di point 4
<div class=”post-header-line-1″>
6. Dibawah kode tersebut terdapat kode seperti ini <div class=”post-body entry-content”> Sekarang ganti kode tersebut dengan kode dibawah ini :
<div class=’post-body entry-content’ expr:id=’"post-" + data:post.id’>
<b:if cond=’data:blog.pageType == "item"’>
7. Kalau sudah silakan tambahkan kode ini dibawahnya. Tepat dibawah kode <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>
8. Dan nanti hasil akhir kode akan seperti terlihat dibawah 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>
9. Tulisan ‘Selengkapnya’ dan ‘Ringkasan’ bisa diganti sesuai dengan keinginan.
10. Lalu simpan template.
11. Pilih menu Setting –>> Formatting
12. Di bagian bawah ada kotak yang disampingnya ada tulisan “Post Template”, dan isikan kode dibawah ini ke dalamnya lalu simpan setting.
<span id=”fullpost”>
</span>
13. Sekarang pekerjaan sudah selesai
Cara pemakaian :
Ketika melakukan penulisan posting headline atau kepala posting berada diatas kode ini <span class=”fullpost”> sementara sisanya yaitu keseluruhan posting letakkan di antara kode <span id=”fullpost”> dan </span>
Contoh :
New Komunitas Jatra, Sang Alternatif Education For Future Adalah Sebuah Media Da’wah Islam Daerah Jatra<span id=”fullpost”>Tiada Kemuliaan Tanpa Islam, Taiada Islam Tanpa Syariah, Tiada Syariah Tanpa Daulah Al Khilafah. Bersatu, Bergerak, Tegakkan Ideologi Islam</span>
Sehingga nanti tulisan yang akan muncul adalah sebagai berikut:
New Komunitas Jatra, Sang Alternatif Education For Future Adalah Sebuah Media Da’wah Islam Daerah Jatra
[+/-] Selengkapnya…
Selamat mencoba Semoga Sukses selalu. jika anda merasa kesulitan, silahkan hubungi kami di alifnurrohman@gmail.com
View this Post in: English Chinese(S) Chinese(T) French Arabic Bulgarian Croatian Czech Danish Dutch Finnish German Greek Hindi Italian Japanese Korean Norwegian Polish Portuguese Romanian Russian Spanish Swedish
admin is Alternative Education For Future
Email this author | All posts by admin

