Cara Menyembunyikan Sebagian Postingan Atau "Baca Selengkapnya"

Para blogger pemula pasti ingin postingan yang ditampilkan di beranda tampak ringkas dan rapi.
cara yang mudah adalah dengan memakai "span".

Apakah "span" itu ???

"span" adalah salah satu kode HTML untuk menyembunyikan suatu kata / kalimat. Sesuai dengan kegunaannya, "span" digunakan untuk menyembunyikan postingan sesuai dengan keinginan blogger.

sekarang akan kami tunjukkan cara bagaimana menyembunyikan  postingan dengan menggunakan "span".

Langkah pertama : Kita harus masuk  Edit HTML  pada menu blogger, kemudian cari kode </head>.
untuk lebih mudah mencarinya, tekan Ctrl + A kemudian Ctrl + F,  kemudian ketik </head>, lalu di next terus sampai ketemu </head> yang dimaksud.

Langkah kedua : Setelah ketemu kode </head>, masukkan kode dibawah ini diatas kode </head> yang dimaksud.

--------------------------------------------------------------------------------------

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

---------------------------------------------------------------------------------------------------------

Langkah ketiga : Setelah kode di atas dimasukkan di atas kode </head>,  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>

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>Baca Selengkapnya...</b></a>
</span>
<script type='text/javascript'>
checkFull("post-" + "<data:post.id/>");
</script>
</b:if>

------------------------------------------------------------------------------------------------

Jika Langkah pertama sampai ketiga sudah selesai, maka selanjutnya adalah masuk ke menu posting, kemudian masuk Edit HTML, kemudian masukkan  kode dibawah ini. (letakkan ditengah antara posting yang akana dipotong sampai akhir posting.) 

Contoh ada dibawah ini :

Isi artikel yang ditampilkan 

<span id="fullpost"> 

Isi artikel yang mau disembunyikan 

</span>

Beres dehhh....

Silahkan mencoba..........