Cara Membuat Read More Keren Versi 2
24 Desember 2007
Leave a Comment
Cara Membuat Read More Keren Versi 2 - Gimana? Keren Pastinya,, ok langsung saja simak langkah Cara Membuat Read More Keren Versi 2 dibawah ini :
1. Login ke Blogger
2. Pilih Layout --> Edit HTML
3. Kamu mau memback-up template kamu dulu nggak?, kalo iya kilik tulisan Download Template lalu simpan.
4. JBeri tanda centang pada kotak yang bertuliskan Expand Template Widget
5. Kopi kode berikut ini dan taruh tepat diatas kode </head>
6. Sudah? sudah belum? ditanya kok diam aja gimana sih ? :x
7. Kalo sudah cari kode dibawah ini
(letaknya kira-kira di bagian tengah kebawah. yak terus..terus..Nha disitu ketemu kan kodenya?)
8. Nha dibawahnya kan ada kode gini <div class='post-body entry-content'> Nha ganti kode tersebut menjadi seperti ini:
9.Terus dibawahnya kan kan ada kode gini <p><data:post.body/></p>
10. Tembahkan kode ini dibawahnya.
11. jadi seluruh kodenya akan menjadi seperti ini :
12. Tulisan 'Selengkapnya' dan 'Ringkasan' bisa diganti dengan apa aja kata yang kamu suka.
13. Lalu simpan template.
14. Pilih menu Setting -->> Formatting
15. Di bagian bawah ada kotak yang disampingnya ada tulisan "Post Template", dan isikan kode dibawah ini ke dalamnya lalu simpan setting.
selesai....
Ohya, kalo memposting pilih yang "Edit Html", letakkan abstraksi posting yg akan ditampilkan di halaman muka di atas kode <span class="fullpost"> sementara sisanya yaitu keseluruhan posting letakkan di antara kode <span id="fullpost"> dan </span>
Trus bagaimana bagi yang sudah pakai 'read more' yang lama dan pingin ganti dengan 'read more' yang baru ini?
gini caranya:
'Read more' yang lama kan kodenya seperti ini :
<div class='post-header-line-1'/>
<div class='post-body entry-conten'>
<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>
<p><data:post.body/></p>
<a expr:href='data:post.url'>Read More......</a>
</b:if>
hapus text yang berwarna biru, lalu ikuti langkah-langkah diatas.
oh ya jangan lupa ikuti langkah berikut ini
1. Pilih menu Setting -->> Formatting
2. 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>
bedanya apa sama read more yang dulu? perhatikan text yang berwarna merah, kalo dulu kan tulisannya "class" sekarang ganti menjadi "id".
Gimana? Sudah bisa belum?
Pinter.... anak siapa siiihhh??? duh lutunya :$
1. Login ke Blogger
2. Pilih Layout --> Edit HTML
3. Kamu mau memback-up template kamu dulu nggak?, kalo iya kilik tulisan Download Template lalu simpan.
4. JBeri tanda centang pada kotak yang bertuliskan Expand Template Widget
5. Kopi kode berikut ini dan taruh tepat diatas kode </head>
<script src='http://kendhin.890m.com/Readmore.js'
type='text/javascript'/>
type='text/javascript'/>
6. Sudah? sudah belum? ditanya kok diam aja gimana sih ? :x
7. Kalo sudah cari kode dibawah ini
<div class='post-header-line-1'/>
(letaknya kira-kira di bagian tengah kebawah. yak terus..terus..Nha disitu ketemu kan kodenya?)
8. Nha dibawahnya kan ada kode gini <div class='post-body entry-content'> Nha ganti kode tersebut menjadi seperti ini:
<div class='post-body entry-content' expr:id='"post-" + data:post.id'>
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:blog.pageType == "item"'>
9.Terus dibawahnya kan kan ada kode gini <p><data:post.body/></p>
10. Tembahkan 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>
<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>
11. jadi seluruh kodenya akan menjadi seperti 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>
<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>
12. Tulisan 'Selengkapnya' dan 'Ringkasan' bisa diganti dengan apa aja kata yang kamu suka.
13. Lalu simpan template.
14. Pilih menu Setting -->> Formatting
15. 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>
</span>
selesai....
Ohya, kalo memposting pilih yang "Edit Html", letakkan abstraksi posting yg akan ditampilkan di halaman muka di atas kode <span class="fullpost"> sementara sisanya yaitu keseluruhan posting letakkan di antara kode <span id="fullpost"> dan </span>
Trus bagaimana bagi yang sudah pakai 'read more' yang lama dan pingin ganti dengan 'read more' yang baru ini?
gini caranya:
'Read more' yang lama kan kodenya seperti ini :
<div class='post-header-line-1'/>
<div class='post-body entry-conten'>
<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>
<p><data:post.body/></p>
<a expr:href='data:post.url'>Read More......</a>
</b:if>
hapus text yang berwarna biru, lalu ikuti langkah-langkah diatas.
oh ya jangan lupa ikuti langkah berikut ini
1. Pilih menu Setting -->> Formatting
2. 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>
bedanya apa sama read more yang dulu? perhatikan text yang berwarna merah, kalo dulu kan tulisannya "class" sekarang ganti menjadi "id".
Gimana? Sudah bisa belum?
Pinter.... anak siapa siiihhh??? duh lutunya :$
Postingan Menarik Lainnya :
Read More
Trik Blogger
- List Dofollow Backlink .EDU & .GOV High PR
- Cara Menampilkan Status Off & Online Yahoo Messenger
- Mengganti "Older Posts" Dengan Angka
- TIps Merawat Ponsel, HP Agar Tetap Awet
- Cara Mudah Pasang Widget WOWZIO
- Membuat Related Post / Artikel atau PostingTerkait Pada Blogger Dilengkapi Dengan Scroll
- Buat Kalender
- Pasang file .swf / flash di Blogger
- Membuat Scroll To Top pada Blogger
- Menghilangkan Navbar Blogger
- Memproteksi Blog dari kegiatan pembajakan artikel dan source code
- Membuat read more.. pada posting blog
- Setting Domain Blogspot di co.cc
- Cara Pasang Flash di Blogspot
- Highlight pada Script/Kode di Postingan
- Tips Mengedit HTML Blogspot
- Cara Menghilangkan Tanda Tang dan Obeng
- Pasang Widget Translator di Blogspot
- Cara Menampilkan / Pasang Emoticon di Kotak Komentar
- Highlight Author Comment
- Menampilkan Recent Comments (Komentar Terbaru)
- Cara Membuat Menu Vertikal (Vertical)
- Cara Membuat Menu Tab View Dengan HTML di Blog
- Mengganti Kotak Komentar Haloscan menjadi Commentbox Blogspot
- Membuat Kotak Komentar Blogger di Bawah Postingan
Blogging
- List Dofollow Backlink .EDU & .GOV High PR
- Cara Membuat Blog Gratis Dan Mudah
- Index
- Menjadikan Blog sebagai Ladang Penghasil Uang
- Google Panda Adalah Eliminasi Blog Tidak Bermutu
- Memaksimalkan Posisi Di Mesin Pencari Google
- Membuat Spoiler Gambar Di Blog
- Template Blogger Gaya Facebook
- Template Blogger Gaya Twitter
- Membuat Visitor Online Tampak Banyak
- Cara Membuat Blogspot
- Membuat Iklan PPC Berjajar
- Membuat Auto Search Engine Content di Blogger
- Menjadi Nomor 1 Di Mesin Pencari Google
- Cara Meletakkan Tombol Facebook Share Dalam Postingan Blog
- Cara Dapatkan Link Favicon
- Top 15 Most Popular Social Bookmarking Websites
- Membuat Blogger Versi Mobile
- Cara Menampilkan Status Off & Online Yahoo Messenger
- Menambah Backlink Dengan Berkomentar
- Menambah Backlink Dengan Berkomentar
- Mengganti "Older Posts" Dengan Angka
- Share List Backlink Forum PR0 - PR9
- TIps Merawat Ponsel, HP Agar Tetap Awet
- Cara Mudah Pasang Widget WOWZIO
0 komentar »
Leave your response!