Bikin Readmore Versi Baru (Peekaboo Posts)

Kursus blog punya Blogger Hack baru nih, namanya readmore with peekaboo posts with special effect. Ngerti ga...?? Intinya Blogger Hack kali ini adalah Cara bikin readmore versi baru. Kenapa disebut versi baru, karena sebelumnya kursus blog pernah menulis juga tentang cara buat readmore (ringkasan artikel). yang mana, readmore yang pertama mempunyai perbedaan dengan readmore kali ini. Perbedaanya, terletak ketika kita mengklik kata readmore.

Di readmore yang lama, kalo kata readmore di klik maka akan terbuka halaman baru sesuai url postingan tersebut. Nah...di readmore yang versi baru ini, kalo kita klik readmore maka seluruh artikel / postingan kita akan tampil pada halaman itu juga, alias url-nya tetap dan juga artikel tersebut bisa di ringkas kembali dengan meng-klik kata summary only. Ok deh....kalo pengen liat contohnya sekaligus merasakannya silahkan ke hacktest Blog dan klik kata "Read More". Kalo udah liat dan memang pengen pake readmore yang baru ini, silahkan ikuti langkah2nya. Dengan catatan jika anda sudah memakai readmore yang lama, hapus dulu semua kodenya karena tidak akan berjalan. Kalo udah...langsung aja ikutin tutorialnya.

1. Setelah login di blogger langsung aja menuju layout --> edit HTML

2. Seperti biasa, sebelum otak atik template silahkan download dulu template anda

3. Kemudian Kasih tanda centang di kolom expand template widget


4. Selanjutnya silahkan cari tag </head> kemudian copy paste diatasnya semua kode yang ada di halaman ini.

5. Jika sudah selesai copy paste-nya, cari kode ini : <b:includable id='post' var='post'> kemudian perhatikan kode di bawah dan copy paste kode yang berwarna merah saja sesuai dengan posisinya (karena kode yang warna hitam merupakan kode standar blogger).

<b:includable id='post' var='post'>
<div class='post uncustomized-post-template' expr:id='"post-" + data:post.id'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 class='post-title'>
<b:if cond='data:post.url'>

<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</h3>

</b:if>

<div class='post-header-line-1'/>

<div class='post-body'>

<b:if cond='data:blog.pageType == "item"'>

<p><data:post.body/></p>


<b:else/>
<p><data:post.body/></p>
<span id='showlink'>

<p><a href='javascript:void(0);' expr:onclick='"javascript:showFull(\"post-" + data:post.id + "\");"'>Read More...</a></p>
</span>
<span id='hidelink' style='display:none'>
<p><a href='javascript:void(0);' expr:onclick='"javascript:hideFull(\"post-" + data:post.id + "\");"'>Summary only...</a></p>

</span>
<script type='text/javascript'>
checkFull("post-" + "<data:post.id/>");
</script>
</b:if>

<div style='clear: both;'/> <!-- clear for photos floats -->

</div>

6. Selanjutnya, cari kembali tag </head> kemudian copy paste script berikut diatasnya :

<script type='text/javascript' src=
'http://anniyalogam.com/scriptaculous/src/prototype.js'/>
<script type='text/javascript' src=
'http://anniyalogam.com/scriptaculous/src/scriptaculous.js?load=effects'/>
<script type='text/javascript'>
var fade = true;
var peekaboo_bgcolor = '#ffffff';
</script>

7. Selesai (Untuk pemasangan kode), Save Template anda

Sekarang, silahkan menuju ke setting --> formatting. Di bagian paling bawah, pada kotak post template, isikan kode berikut :

<span id="fullpost">

</span>

Nah...ketika posting (bikin artikel), coba klik edit HTML....maka akan tampil kode seperti diatas. Selanjutnya, Letakkan bagian posting yang akan di tampilkan diatas kode

<span id="fullpost">

Sementara sisanya (akan tampil setelah readmore di klik), letakkan di antara kode

<span id="fullpost">

dan

</span>

Selesai deh....

Catatan: Cara tersebut hanya untuk postingan yang baru. Untuk postingan yang lama, silahkan anda edit postingan tersebut, kemudian tambahkan kode

<span id="fullpost">

dan

</span>

Sesuai intruksi diatas.

Jika masih ada kesulitan, silahkan tinggalkan komentar......insyaAllah saya akan membantu anda.

Salam Blogger