Cara Menambahkan Read More/Baca Selengkapnya Pada Blogger

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.

<b:if cond='data:blog.pageType != &quot;item&quot;'>

<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 &lt; spans.length; i++) {

if (spans[i].id == &quot;fullpost&quot;) {

if (fade) {

spans[i].style.background = peekaboo_bgcolor;

Effect.Appear(spans[i]);

} else spans[i].style.display = 'inline';

}

if (spans[i].id == &quot;showlink&quot;)

spans[i].style.display = 'none';

if (spans[i].id == &quot;hidelink&quot;)

spans[i].style.display = 'inline';

}

}

function hideFull(id) {

var post = document.getElementById(id);

var spans = post.getElementsByTagName('span');

for (var i = 0; i &lt; spans.length; i++) {

if (spans[i].id == &quot;fullpost&quot;) {

if (fade) {

spans[i].style.background = peekaboo_bgcolor;

Effect.Fade(spans[i]);

} else spans[i].style.display = 'none';

}

if (spans[i].id == &quot;showlink&quot;)

spans[i].style.display = 'inline';

if (spans[i].id == &quot;hidelink&quot;)

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 &lt; spans.length; i++) {

if (spans[i].id == &quot;fullpost&quot;) {

spans[i].style.display = 'none';

found = 1;

}

if ((spans[i].id == &quot;showlink&quot;) &amp;&amp; (found == 0))

spans[i].style.display = 'none';

}

}

</script>

</b:if>

5. Kemudian cari kode

    <div class='post-body'>
    <p><data:post.body/></p>

atau

<div class='post-body entry-content'>
<p><data:post.body/></p>

6. Kalau sudah ketemu, hapus kode tersebut lalu ganti dengan kode yang dibawah ini:

<div class='post-body' expr:id='"post-" + data:post.id' >
<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">

</span>

9. Jika sudah, klik tombol Save Settings

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

Klik Publish Post, lalu klik (in a new window) untuk melihat hasilnya pada halaman baru

Selamat Mencoba. Semoga berhasil...!!

 

  

Related Posts