(2) How To Make Summaries “After Jump” – Using READ MORE Feature

 

Sampai saat menulis artikel ini, saya memendam kesal pada Blogger sebab hingga kini saya tak bisa akses Posting Editing baik di mode HTML maupun Compose, saya pun gagal menerapkan link READ MORE dari petunjuk Blogger Help atau sebagaimana pada artikel bagian PERTAMA (1) How To Make Summaries “After Jump” – Using READ MORE Feature. Dengan terpaksa saya beralih menggunakan Windows Live Writers untuk Editing Posting dan juga akhirnya saya temukan cara memanfaatkan Read More dari pihak ketiga.                                   Blessing disguise !
Maka jadilah artikel BAGIAN KEDUA tentang READ MORE.

PROSEDUR PENGGUNAAN LINK READ MORE

Prosedur di bawah ini dapat dilakukan dengan Editing Posting Blogger maupun Windows Live Writers seperti yang saya pakai. Saya mendapatkan script link ini FREE maka saya pun ingin berbagi.

Jika Anda ingin memasang link READ MORE di Blog Anda, ikutilah langkah-langkah berikut :

1. Login Blogger masuk ke Dashboard | Rancangan (Design)  | Edit HTML.

Catatan:
#   Bagi para blogger yang sudah pernah memasang kode read more
     harus dihapus terlebih dahulu kodenya sebelum memasang kode ini.

#   Sebab menggunakan Template pihak III, maka berlaku ketentuan
     di bawah ini :
Pemasangan READ MORE Menggunakan Customized Third-Party Template
Untuk mereka yang menggunakan customized third-party template (template pihak ketiga yg disesuaikan), maka Anda harus menambahkan potongan kode untuk membuat Breaks ini bisa bekerja.

Caranya :
Masuklah ke akses Layout (Rancangan) | Edit HTML.

Untuk berjaga-jaga lakukan ini : Penting ! 
Backup terlebih dahulu template anda dengan mengklik link Download Full Template di bagian atas.  Maka akan di-download versi XML dari template blog yang dapat di-upload kelak kapan saja dibutuhkan.

2. Setelah backup template, Beri tanda centang pada "Expand Widget Templates". dan lakukan scan (atau tekan tombol control + F) pada Edit HTML untuk mencari snippet (potongan) berikut :

<data:post.body/>

Setelah Anda tentukan lokasi kode tersebut, lakukan PASTE snippet berikut langsung di bawahnya.

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"'>
<data:post.jumpText/></a>
</div>
</b:if >

3. Setelah itu, cari kode </head> pada template Anda. Supaya mudah
    untuk mencari, tekan Ctrl+F lalu masukkan kode </head>  klik Next.
4. Jika sudah ketemu, letakkan kode dibawah ini diatas kode </head>

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

<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 dan ganti dengan kode 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'><b>Read More...</b></a>
</span>
<script type='text/javascript'>
checkFull("post-" + "<data:post.id/>");
</script>
</b:if>

Catatan:

Kata Read More yang dicetak tebal diatas bisa anda ganti dengan kata lain misalnya, Baca Selengkapnya atau Selanjutnya atau Lanjut membaca.

7. Jika sudah, simpan template anda
Sampai disini proses pengeditan template telah berhasil. Namun fungsi Read More masih belum bekerja. Untuk mengaktifkan fungsi Read More pada artikel-artikel Blog, Anda harus menyelipkan dua baris kode diantara artikel yang mau disembunyikan.

8.  Penerapan Read More Pada artikel yang akan di-Summary (diringkas).

8.1.   Menu Posting|Edit Post. Buka artikel yang mau dipasang Read More
        (Cara ini juga berlaku untuk artikel yang akan dipublikasi).
8.2.   Pilih mode Edit HTML

8.3.    Masukkan kode <span id="fullpost"> diatas artikel yang ingin Anda
         disembunyikan dan kode </span> di akhir artikel. Sehingga posisinya
         menjadi seperti dibawah ini.

                                  Isi artikel yang ditampilkan
                                   <span id="fullpost">
                                  Isi artikel yang mau disembunyikan 
                                   </span>

4. Agar lebih jelas perhatikanlah gambar dibawah ini

5. Kalau sudah, klik tombol Publish Post dan klik lihat hasilnya. 

<Wallaahu a’lamu bis sawwab>
The Quote Inspire Me to ISLAM