Tuesday, May 08, 2007

Read More, buat Mas Komandan

Cara membuat READ MORE dalam postingan blog ini, sebenarnya sudah banyak diulas dalam tutorial yang terdapat di berbagai blog, seperti punya mas joni, atau Blogger Indonesia A. Fatih Syuhud Weblog. Tapi karena Mas Komandan meminta saya menuliskannya, maka saya kutip saja postingan yang ada di blog Refleksi dan Blog Tutorial dan menuliskannya mentah-mentah di bawah ini. Mudah-mudahan Mas Komandan berkenan dan bisa menikmatinya.
Untuk mas Joni dan mas AF Syuhud, terimakasih banyak ya... :)



Berikut prosesnya:

1. Buka template --> edit HTML
2. Kasih tanda tik/cek menu "expand widget template"
3. Cari kode berikut di TEMPLATE blog Anda:


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


4. Kalau sudah ketemu, letakkan kode berikut DI BAWAH kode html di atas:


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

<style>.fullpost{display:inline;}</style>

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

<b:else/>

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



5. Di Bawah kode di atas ada kode html sbb:

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



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

</div>


6. Nah, di antara kode <p><data:post.body/></p> dan kode <div style='clear: both;'/> <!-- clear for photos floats -->
</div>


pasang kode html ini:
<a expr:href='data:post.url'>Read More......</a>

</b:if>


7. Jadi, susunan kode html di template setelah ditambah dg kode READ MORE akan menjadi seperti ini (yg warna biru adalah kode tambahan untuk READ MORE, sedang kode warna hitam adalah kode asli template):


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

<div class='post-body'>

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

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

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


8. Klik SETTINGS, terus klik FORMATTING. Di paling bawah ada kotak kosong di samping menu POST TEMPLATE. Isi kotak kosong tsb dg kode berikut:


<span class="fullpost">



</span>


Jangan lupa klik SAVE apabila sudah dipasang.


9. Klik SAVE. Selesai.***

CARA MEMPOSTING

Ketika memposting, klik EDIT HTML. Maka, secara otomatis akan tampak kode

<span class="fullpost">



</span>


Letakkan posting yg akan ditampilkan di halaman muka di atas kode sementara sisanya (yakni keseluruhan entry), letakkan di antara kode
<span class="fullpost"> dan </span>.

Catatan Penting:

(A) Artikel yg diposting sebelum pemasangan kode READ MORE di atas akan tetap tampil penuh di halaman muka, Anda bisa mengeditnya dg cara sbb:

1. Klik menu EDIT POSTS
2. Klik EDIT di artikel yg akan diedit.
3. Pasang kode <span class="fullpost">
di bawah paragraf yg akan ditampilkan. Dan pasang kode </span>
di akhir artikel.

Ingat kode hanya ada SATU kode <span class="fullpost"> dan </span>. Apabila terdapat lebih dari satu, dan biasanya numpuk di bagian paling bawah artikel, maka dibuang saja.

(B) Bagi pengguna blogger beta/baru tapi memakai template klasik/lama, maka sistem READ MORE memakai sistem panduan yg lama, lihat tutorialnya di sini.

[Update 7/2/07]: Read more di blogger beta tidak perlu pasang kode di antara [style] dan [/style]. Ini berbeda dg READ MORE di blogger lama.

Selamat menikmati Blogger Baru dg READ MORE!

3 comments:

Mas Komandan said...

Trims Bang, -sang Pemula.

NiLA Obsidian said...

hehehe...makasih makasih...dah niat dari dulu belom kesampean....belom ada keberanian ngotak ngatik nya secara eike gaptek getoh.....

Harisubaidillah said...

mas.. makasih atas tips membuat read morenya... sebelumnya salam kenal yah.. jangan lupa mapir-mampir