Readmore ( Ver. 1 )

Dalam posting kali ini, saya akan mencoba mengumpulkan variasi dari readmore yang saya ambil dari beberapa sumber. Sengaja saya buat sekedar untuk perbendaharaan pengetahuan terkait usaha kita dalam mengoptimalkan blog.

Langkah-langkahnya adalah sebagai berikut :

1. Buka Dashboard | Template | Edit HTML | kemudian tandai Expand Widget Templates.

2. Cari kode </head>, dengan menggunaka Ctrl-F untuk memudahkan pencarian. Setelah ketemu kode tersebut, masukkan kode dibawah ini antara kode ]]><</b:skin> dan </head>

<b:if cond='data:blog.pageType != "item"'>
<script type='text/javascript'>
var fade = false;
function showFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName(&#39;span&#39;);
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 = &#39;inline&#39;;
}
if (spans[i].id == &quot;showlink&quot;)
spans[i].style.display = &#39;none&#39;;
if (spans[i].id == &quot;hidelink&quot;)
spans[i].style.display = &#39;inline&#39;;
}
}
function hideFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName(&#39;span&#39;);
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 = &#39;none&#39;;
}
if (spans[i].id == &quot;showlink&quot;)
spans[i].style.display = &#39;inline&#39;;
if (spans[i].id == &quot;hidelink&quot;)
spans[i].style.display = &#39;none&#39;;
}
post.scrollIntoView(true);
}
function checkFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName(&#39;span&#39;);
var found = 0;
for (var i = 0; i &lt; spans.length; i++) {
if (spans[i].id == &quot;fullpost&quot;) {
spans[i].style.display = &#39;none&#39;;
found = 1;
}
if ((spans[i].id == &quot;showlink&quot;) &amp;&amp; (found == 0))
spans[i].style.display = &#39;none&#39;;
}
}
</script>
</b:if>

3. Setelah itu cari kode <data:post.body/> atau kode keseluruhannya seperti ini.

<div class='post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

Ganti kode di atas dengan kode di bawah 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>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

Kita bisa saja merubah kata " Read More..." dengan icon/ kalimat favorit kita.

4. Setelah itu save tempalate. Kemudian buka Tab Pengaturan | Format, masukan kode di bawah ke dalam kotak sebelah kanan tulisan Template Posting.

<span id="fullpost">
</span>

kemudian save pengaturan.

5. Cara menggunakan readmore dalam pemenggalan artikel yang praktis adalah kita menulis artikel di bagian Edit HTML. Saat membuka posting baru, pasti kode diatas muncul. Bagi pemula, silahkan hapus dulu kode tersebut. Kemudian silahkan ketik semua artikel include dengan image, termasuk memberikan kode Align, Ukuran Font dan lainnya.

Preview/ pra tinjau hasil kerja anda, untuk memperkirakan dimana tempat penggalan kalimat yang pantas. Setelah itu baru pasang kode readmore tersebut. Langkah ini untuk mengantisipasi pemasangan double secara auto.

Cara meletakkan kode tersebut :




Semoga bermanfaat.

Reff terkait : Jaloee