Cara Membuat Read More

Jumat, 19 Februari 2010

Cara Membuat Read More

Ini adalah salah satu contoh dalam pembahasan mempelajari bahasa XML template Blogger. Walaupun sekarang Blogger telah menyediakan fasilitas readmore, tetapi tidak ada salahnya apabila anda ingin mencoba atau mempelajari bagaimana cara memasang readmore versi lama ini. Begini caranya.

1. Login dulu ke Blogger, lalu klik menu Tata Letak > Edit HTML.

2. Backup dulu yah templatenya...

3. Centang checkbox Expand Template Widget.

4. Cari kode:

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

5. Lalu hapus dan ganti dengan:

<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/>
<a expr:href='data:post.url'>KLIK DISINI UNTUK BACA SELENGKAPNYA</a></p>
</b:if>

6. Simpan template anda.

7. Beralih ke tab Posting, klik menu Edit Entri, lalu edit setiap entri anda. Editlah dengan format:

(bagian artikel yang akan ditampilkan)
<span class="fullpost">
(bagian artikel yang akan disembunyikan)
</span>

8. Terbitkan entri anda.

9. Lihat homepage blog anda. Akan tampil sebagian artikel, lalu bagian lainnya akan terbuka setelah anda mengeklik link dibawah artikel pada homepage. Mau tahu kenapa?

Penjelasan:

Lihat lagi perintahnya.

<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/>
<a expr:href='data:post.url'>KLIK DISINI UNTUK BACA SELENGKAPNYA</a></p>
</b:if>

Artinya: Pada halaman postingan, bagian yang termasuk dalam kelas (class) fullpost, akan ditampilkan. Sedangkan pada halaman selain halaman postingan, bagian yang termasuk dalam kelas (class) fullpost akan disembunyikan (tidak ditampilkan). Lalu dibawah postingan akan tampil link yang menuju ke postingan anda. Mengerti?

Terima kasih, dan semoga bermanfaat.

Apabila anda menyukai postingan ini, anda bisa men-sharenya ke yang lain. Semisal ke Facebook atau Twitter. Silakan klik salah satu pilihan dibawah.

12 komentar:

secangkir teh dan sekerat roti mengatakan...: dasar sekali..!; 19 Februari 2010 pukul 21.00
Franco mengatakan...: saya lbh suka autoreadmore, krn gak ribet.. Keep posting sob :D; 19 Februari 2010 pukul 22.31
Dimas P. Putra mengatakan...: thx nih gan infonya, tp sekarang aku dah make auto readmore...
Lifestyle Inspiration; 20 Februari 2010 pukul 09.09
jopi mengatakan...: mas saya kan membuat menu dropdown pake cara mas yang di blog mas doyok. sebelumnya juga saya membuat menu dropdown dengan javascript sumber nya di sini nih ==> http://tutorial-website.blogspot.com/2009/03/membuat-menu-drop-down-horizontal.html. nah jadi skrng saya punya 2 menu navigasi,tapi yang saya buat pk javascript ada nya di atas header sedangkan yang punya mas tepat di atas judul postingan. jadi kalo di liat agak ganjil. gimana ya nurunin menu yg sy buat pake javascript tersebut agar sejajar tepatnya di atas menu navigasi yang saya buat dgn cara mas? tolong beritahu saya bagian css mana yang harus di edit agar menu tersebut turun. lihat saja kodenya di sumber yang saya sebutkn tadi. kalo mau liat kondisinya liat aja ke blog saya. tolong ya mas; 20 Februari 2010 pukul 13.39
afdil mengatakan...: sharing dikit mas, kalau saya biasanya memakai kode  sebagai pengganti <span class="fullpost">

Trik ini saya dapatkan dengan melihat kode html untuk fitur editor yang baru. Jadi tidak perlu lagi merubah kode template.

cukup dengan menempatkan  sebagai readmorenya.

Salam kenal ya; 20 Februari 2010 pukul 19.58
jopi mengatakan...: mas makasih ya....saya coba dul.sangat membantu...^^; 20 Februari 2010 pukul 19.59
jopi mengatakan...: ia saya belum saya ganti tulisannya sob,soalna saya belum kepikiran mau naro topik apa lagi; 20 Februari 2010 pukul 20.17
jopi mengatakan...: ohhhh di jadinya lebih ke atas yahhh....seppp sepp...thanx berat atas ilmunya.ntar di postingan saya saya beri sedikit credit buat blog mas.^^; 20 Februari 2010 pukul 20.25
jopi mengatakan...: ehh mas saya ada masalah lagi nih,kayaknya struktur HTML..coba buka salah satu postingan saya,terus liat di atas header nya pasti ada tulisan template error.bisa solusinya gag?; 20 Februari 2010 pukul 20.33

Posting Komentar

Apa pandapat anda terhadap artikel ini? Berkomentarlah tanpa rasa malu, ragu dan takut.

Komentar diluar tanggung jawab pemilik blog. Jika anda berkomentar yang berbau pornografi atau sara, maka itu risiko anda sendiri.

Jika anda mengirimkan komentar spam, maka akan saya hapus.

Jika anda tidak ingin komentar anda ditampilkan, silakan kirimkan e-mail di halaman email me.

Jika anda ingin berceloteh bebas, silakan tuju halaman ini.

Anda dapat menggunakan beberapa tag HTML seperti <b>, <i>, <u>, <a>, <strike>, <sub>, <sup>, dan lain-lain. Anda juga dapat menggunakan emoticon Plurk seperti (lmao) (taser) (haha).

Untuk link exchange bisa dilakukan dihalaman ini, sedangkan banner exchange dihalaman ini. Permintaan link exchange dan banner exchange selain dihalaman tersebut tidak akan dilayani.

Emoticon yang dapat digunakan [Tampilkan] [Sembunyikan]

:-))

:-)

:-D

(lol)

:-p

(woot)

;-)

:-o

X-(

:-(

:'-(

:-&

(K)

(angry)

(annoyed)

(wave) | (bye)

B-)

(cozy)

(sick)

(goodluck)

(griltongue)

(mmm)

(hungry)

(music)

(tears)

(tongue)

(unsure)

(highfive)

(dance)

(blush)

(bigeyes)

(funkydance)

(idiot)

(lonely)

(scenic)

(hassle)

(panic)

(okok)

(yahoo)

(cry)

(doh)

(brokenheart)

(drinking)

(girlkiss)

(rofl)

(money)

(rock)

(nottalking)

(party)

(sleeping)

(thinking)

(bringit)

(worship)

(applause)

8-)

(gym)

(heart)

(devil)

(lmao)

(banana_cool)

(banana_rock)

(evilgrin)

(headspin)

(heart_beat)

(ninja)

(haha)

(evilsmirk)

(eyeroll)

(muhaha)

(taser) | (rammi)

(banana_ninja)

(beer)

(coffee)

(fish_hit)

(muscle)

(smileydance)

(fireworks)

(goal)

(bzzz)

(dance_bzz)

(Русский)

(code)

(morning)

Cara menggunakan: ketikkan emoticon yang diinginkan. Untuk yang ada pemisah berupa "|" maka itu adalah alternatif. Seperti (wave) | (bye) maka bisa (wave) bisa (bye)