READ MORE SLIDING

Sunday, February 25, 2007

Read More Sliding…mungkin itu kata yang lebih saya suka, karena read more gaya baru ini tidak membutuhkan tenaga lagi untuk membuka posting kita, smile_baringteethtapi ia bekerja sangat halus meluncur atau mendorong sisa posting kita.. dan apabila telah selesai membaca, maka dengan meng- Klik Sumary Onli, buttom di bawah-, maka ia meluncur ke atas sangat halus.smile_yawn

Tapi dalam dunia bloger hack, read more ini, ada yang menyebutnya collabsable post dan ada juga yang menyebutnya Super Peek-A-Boo Post, yang artinya dalam bahasa sunda, mun can lapar tonk waka dahar.smile_secret

Mau pakai istilah yang mana, terserah !
Kalau menurut saya, apalah artinya sebuah nama, kalau akhirnya dan intinya sama…- ssssst… dah jangan di bahas panjang…he..he..he..

Untuk memasang read more ini,- dari pengalaman saya yang selalu gagal selama 2 hari..hehehe .ada beberapa hal yang mesti diperhatikan, terutama yang blognya bermigrasi dari OLD ke BETA ,- atau dari BETA yang sudah terpasang read more, ternyata kode2 read more lama itu harus di bersihkan / di buang dulu.

Baiklah, bagi yang blognya sudah terpasang read more, harus mengikuti prosedurnya dari awal, tapi bagi yang belum terpasang read more dan blog-nya BETA loncat saja keurutan ke 3.

1.Buka Template-> Setting -> Formatting hapus kode ini :

<span class="fullpost">
</span>.

Kemudian Save.

2.Masuk ke -> Edit Html carilah kode-kode ini, - kalau ada hapus semuanya. ( gunakan menu edit-find dari mesin browser kita.)

<MainOrArchivePage>
span.fullpost {display:none;}
</MainOrArchivePage>

<ItemPage>
span.fullpost {display:inline;}
</ItemPage>

Dan kode ini.

<MainOrArchivePage><br />
<a href="<$BlogItemPermalinkURL$>">Read more!</a>
</MainOrArchivePage>

Cari kode-kode ini juga :

<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>

<b:else/>
<style>.fullpost{display:none;}</style>

<a expr:href='data:post.url'>Read More......</a>
</b:if>

Jika menemukan kode-kode di atas, hapus semuanya.

Setelah beres klik Save Template.

3.Langkah ketiga masukan kode read more yang baru, dan yang akan kita pakai kode dari Mr Hans, dengan sebutan Super Peek-A-Boo Post.

Pertama
Masukan kode script ini, sebelum tag </head> :

<script type='text/javascript' src='http://www.anniyalogam.com/widgets/hackosphere.js' />

Kedua
Carilah Kode ini :

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

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

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

</div>

Timpalah atau replace dua baris kode di atas ( yg tengah ), yaitu ;

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

Dengan kode hack ini ;

<div class='post-body' expr:id='"post-" + data:post.id'>
<b:if cond='data:blog.pageType == "item"'>
<p><data:post.body/></p>
<b:else/>
<style>#fullpost {display:none;}</style>
<p><data:post.body/></p>
<span id='showlink'>
<p><a expr:onclick='"javascript:showFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>Read More...</a></p>
</span>
<span id='hidelink' style='display:none'>
<p><a expr:onclick='"javascript:hideFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>Summary only...</a></p>
</span>
<script type='text/javascript'>checkFull("post-" + "<data:post.id/>")</script>
</b:if>

Kemudian klik Save.

6.Buka -> Setting -> Formatting->d paling bawah ada kotak kosong di samping menu POST TEMPLATE. Isi kotak kosong tsb dg kode berikut:

untuk menulis paragraf awal yang akan kita tampilkan
<span id="fullpost">
untuk menulis posting selanjutnya
</span>

Klik Save.

Nb : Jika kode hack nya ngak jalan, ambil saja source kode aslinya di sini.






0 comments: