Sabtu, 24 April 2010
MENAMBAHKAN READ MORE
Sepertinya tidak pernah habisnya postingan mengenai topik ini. Karena banyaknya permintaan dari para blogger sehingga kali ini saya ingin memberikan sebuah cara untuk menambahkan read more pada blogger.
Saya sendiri sudah mencoba banyak cara untuk menambahkan read more pada blogger namun tidak ada yang berhasil atau berhasil tapi tidak memuaskan. Sehingga saya terus mencari cara untuk menambahkan read more yang efektif hingga akhirnya saya menemukan cara ini.
Yang dimaksud dengan tidak berhasil atau berhasil tapi tidak memuaskan adalah karena ada sebagian artikel yang sudah dipasang kode read more namun tetap tampil penuh dan artikel yang tidak ingin dipasang read more malah tetap muncul kata read more-nya meskipun sudah dihapus kodenya.
Nah bagi anda yang sudah pernah memasang kode read more dan menemukan masalah diatas atau Bagi Anda yang belum pernah memasang kode read more pada blogger dan ingin memasangnya. Silahkan ikuti cara-cara dibawah ini:
1. Login ke Blogger. Klik menu Layout lalu klik Edit HTML. Back-up terlebih dahulu template Anda dengan cara klik pada Download Full Template untuk menyimpan file template di komputer Anda.
2. Beri tanda centang pada opsi "Expand Widget Templates" (tunggu beberapa saat hingga proses selesai).
3. Setelah itu, cari kode </head> pada template Anda. Supaya lebih mudah untuk mencarinya, tekan Ctrl+F lalu masukkan kode </head> trus klik Next.
4. Jika sudah ketemu, letakkan kode dibawah ini diatas kode </head>
Catatan:
Bagi para blogger yang sudah pernah memasang kode read more harus dihapus terlebih dahulu kode read more-nya sebelum memasang kode ini.
Kata Read More yang dicetak tebal diatas bisa anda ganti dengan kata lain misalnya Baca Selengkapnya, Selanjutnya, Lanjut membaca, dan lain-lain.
7. Jika sudah selesai, klik tombol Save Template. Kalau muncul "Your changes have been saved" berarti proses pengeditannya berhasil.
8. Kemudian klik Settings, lalu klik Formatting. Cari "Post Template". Kalau sudah ketemu, isi kotak kosong tersebut dengan kode berikut:
Cara memposting supaya muncul Read More pada saat artikel ditampilkan:
Pada saat Anda mau memposting, anda akan tampak 2 baris kode pada bagian Edit HTML kotak posting seperti pada gambar dibawah ini.
Letakkan postingan yang mau ditampilkan diatas kode
Catatan:
Artikel yang sudah diposting sebelum memasang kode Read More akan tetap tampil penuh dihalaman muka. Untuk mengeditnya, Anda bisa menggunakan cara berikut:
1. klik Edit Posts pada menu posting
2. Klik Edit pada artikel yang ingin dipasang Read More
3. Klik mode Edit HTML, lalu pindahkan kode <span id="fullpost"> dibawah postingan yang mau ditampilkan dan letakkan kode </span> diakhir artikel
4. Klik tombol Publish Post, lalu klik (in a new window) untuk melihat hasilnya berhasil atau tidak. Jika tidak, mungkin ada bagian yang terlewatkan atau salah. Coba liat kembali langkah diatas.
Selamat Mencoba. Semoga berhasil...!!
Saya sendiri sudah mencoba banyak cara untuk menambahkan read more pada blogger namun tidak ada yang berhasil atau berhasil tapi tidak memuaskan. Sehingga saya terus mencari cara untuk menambahkan read more yang efektif hingga akhirnya saya menemukan cara ini.
Yang dimaksud dengan tidak berhasil atau berhasil tapi tidak memuaskan adalah karena ada sebagian artikel yang sudah dipasang kode read more namun tetap tampil penuh dan artikel yang tidak ingin dipasang read more malah tetap muncul kata read more-nya meskipun sudah dihapus kodenya.
Nah bagi anda yang sudah pernah memasang kode read more dan menemukan masalah diatas atau Bagi Anda yang belum pernah memasang kode read more pada blogger dan ingin memasangnya. Silahkan ikuti cara-cara dibawah ini:
1. Login ke Blogger. Klik menu Layout lalu klik Edit HTML. Back-up terlebih dahulu template Anda dengan cara klik pada Download Full Template untuk menyimpan file template di komputer Anda.
2. Beri tanda centang pada opsi "Expand Widget Templates" (tunggu beberapa saat hingga proses selesai).
3. Setelah itu, cari kode </head> pada template Anda. Supaya lebih mudah untuk mencarinya, tekan Ctrl+F lalu masukkan kode </head> trus klik Next.
4. Jika sudah ketemu, letakkan kode dibawah ini diatas kode </head>
Catatan:
Bagi para blogger yang sudah pernah memasang kode read more harus dihapus terlebih dahulu kode read more-nya sebelum memasang kode ini.
<b:if cond='data:blog.pageType != "item"'>5. Kemudian cari kode
<script type='text/javascript'>
var fade = false;
function showFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
for (var i = 0; i < spans.length; i++) {
if (spans[i].id == "fullpost") {
if (fade) {
spans[i].style.background = peekaboo_bgcolor;
Effect.Appear(spans[i]);
} else spans[i].style.display = 'inline';
}
if (spans[i].id == "showlink")
spans[i].style.display = 'none';
if (spans[i].id == "hidelink")
spans[i].style.display = 'inline';
}
}
function hideFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
for (var i = 0; i < spans.length; i++) {
if (spans[i].id == "fullpost") {
if (fade) {
spans[i].style.background = peekaboo_bgcolor;
Effect.Fade(spans[i]);
} else spans[i].style.display = 'none';
}
if (spans[i].id == "showlink")
spans[i].style.display = 'inline';
if (spans[i].id == "hidelink")
spans[i].style.display = 'none';
}
post.scrollIntoView(true);
}
function checkFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
var found = 0;
for (var i = 0; i < spans.length; i++) {
if (spans[i].id == "fullpost") {
spans[i].style.display = 'none';
found = 1;
}
if ((spans[i].id == "showlink") && (found == 0))
spans[i].style.display = 'none';
}
}
</script>
</b:if>
<div class='post-body'>atau
<p><data:post.body/></p>
<div class='post-body entry-content'>6. Kalau sudah ketemu, hapus kode tersebut lalu ganti dengan kode yang dibawah ini:
<p><data:post.body/></p>
<div class='post-body' expr:id='"post-" + data:post.id' >Catatan:
<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>
<span id='showlink'>
<a expr:href='data:post.url'>Read More...</a>
</span>
<script type='text/javascript'>
checkFull("post-" + "<data:post.id/>");
</script>
</b:if>
Kata Read More yang dicetak tebal diatas bisa anda ganti dengan kata lain misalnya Baca Selengkapnya, Selanjutnya, Lanjut membaca, dan lain-lain.
7. Jika sudah selesai, klik tombol Save Template. Kalau muncul "Your changes have been saved" berarti proses pengeditannya berhasil.
8. Kemudian klik Settings, lalu klik Formatting. Cari "Post Template". Kalau sudah ketemu, isi kotak kosong tersebut dengan kode berikut:
<span id="fullpost">9. Jika sudah, klik tombol Save Settings
</span>
Cara memposting supaya muncul Read More pada saat artikel ditampilkan:
Pada saat Anda mau memposting, anda akan tampak 2 baris kode pada bagian Edit HTML kotak posting seperti pada gambar dibawah ini.
Letakkan postingan yang mau ditampilkan diatas kode
<span id="fullpost">Dan sisanya (yang mau disembunyikan) diantara
<span id="fullpost">dan
</span>Klik Publish Post, lalu klik (in a new window) untuk melihat hasilnya pada halaman baru
Catatan:
Artikel yang sudah diposting sebelum memasang kode Read More akan tetap tampil penuh dihalaman muka. Untuk mengeditnya, Anda bisa menggunakan cara berikut:
1. klik Edit Posts pada menu posting
2. Klik Edit pada artikel yang ingin dipasang Read More
3. Klik mode Edit HTML, lalu pindahkan kode <span id="fullpost"> dibawah postingan yang mau ditampilkan dan letakkan kode </span> diakhir artikel
4. Klik tombol Publish Post, lalu klik (in a new window) untuk melihat hasilnya berhasil atau tidak. Jika tidak, mungkin ada bagian yang terlewatkan atau salah. Coba liat kembali langkah diatas.
Selamat Mencoba. Semoga berhasil...!!
Langganan:
Posting Komentar (Atom)
0 komentar:
Posting Komentar