Rabu, 12 Mei 2010

Setetes EmbunMembuat Read More pada Blogspot

Akhirnya setelah kurang lebih 3 bulan mengalami ke-vacuum-an dalam dunia blogging, kali ini Setetes Embun dapat kembali ke situs Blogger dengan membawa sedikit bahan untuk di-sharing-kan kepada rekan-rekan Embun semuanya. Baiklah, tanpa berlama-lama lagi, kali ini Embun akan berbagi mengenai tutorial customize blog yakni tentang cara Membuat Read More pada Blogspot alias Blogger. Trik ini juga biasa dikenal dalam dunia blogging sebagai Trik Membuat Menu Selengkapnya pada Blog.

Langsung saja, untuk membuat Read More pada Blog silakan ikuti langkah-langkah berikut :

Tahap Pengaturan
  1. Login ke account Blogger Anda

  2. Klik Tata Letak lalu Edit HTML

  3. Pada Edit HTML, centang kotak bertuliskan Expand Template Widget yang ada pada pojok kanan atas

  4. Cari kode berikut ini :
    <div class='post-body'>

  5. Copy (salin) kode berikut ini dan Paste (letakkan) tepat di bawah kode 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>

  6. Lihat ke bagian bawah dan cari kode lagi yang mirip seperti ini :
    <p><data:post.body/></p>

  7. Copy kode berikut ini dan Letakkan tepat di bawah kode di atas :
    <a expr:href='data:post.url'>Read more.....</a>
    </b:if>

  8. Setelah selesai maka keseluruhan kode akan terlihat seperti di bawah ini :
    <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>

    NB:warna biru menunjukkan kode awal yang ada pada Blogger, sedangkan warna merah menunjukkan kode hasil tambahan modifikasi yang kita lakukan.

  9. Jika Anda ingin mengganti tulisan Read More..... dengan tulisan lain semisal Selengkapnya... seperti pada blog Setetes Embun, silakan rekan-rekan mengganti kode warna hijau sesuai dengan keinginan rekan-rekan.

Tahap Penggunaan
Cara Penggunaan dari menu read more yang telah kita buat tadi adalah dengan cara meletakkan kode HTML di antara tulisan artikel yang tidak ingin kita tampilkan di halaman utama. Kode yang digunakan adalah :
<span class="fullpost">

</span>


Penggunaanya adalah ketika Anda menulis artikel baru pada blog, letakkanlah tulisan yang tidak ingin Anda tampilkan di antara kode di atas. Semisal Anda ingin menulis Artikel :
Hari ini adalah hari yang indah. Di hari yang indah ini aku ingin menghabiskan waktuku untuk jalan-jalan dan keliling kota. Selain itu, aku juga ingin berkunjung ke Setetes Embun.

Jika Anda hanya ingin menampilkan kalimat pertama di halaman awal, dan kalimat-kalimat selanjutnya bisa di baca ketika pengunjung meng-klik Read More..... maka penulisan artikel tersebut adalah sebagai berikut :
Hari ini adalah hari yang indah.
<span class="fullpost">
Di hari yang indah ini aku ingin menghabiskan waktuku untuk jalan-jalan dan keliling kota. Selain itu, aku juga ingin berkunjung ke Setetes Embun.
</span>


Dengan meletakkan tulisan yang tidak ingin Anda tampilkan pada halaman awal di antara kode HTML
<span class="fullpost">

</span>

maka Anda telah mendapatkan artikel bergaya Read More alias Selengkapnya.

Perlu Anda perhatikan bahwa pada intinya, Tahap Pengaturan hanya dilakukan sekali saja. Sedangkan Tahap Penggunaan harus Anda lakukan setiap kali Anda membuat artikel baru. Yang perlu diperhatikan lagi adalah ketika membuat artikel baru, buatlah dengan Mode HTML dan bukan Mode Compose/Tulis.

Demikian posting mengenai sharing tutorial tentang Cara Membuat Read More pada Blog. Semoga bermanfaat dan selamat mencoba. Sampai Jumpa Lagi di posting selanjutnya.

Comments :

17 komentar to “Membuat Read More pada Blogspot”

sekarang blogger udah ada fasilitas readmore sobat. coba buka draft.blogger.com

junian mengatakan...
on 

Memanag benar saudara Junian Triajianto, Setetes Embun memang merencanakan untuk membuat tutorial read more dengan bermacam-macam cara, salah satunya yang telah direncanakan adalah melalui draft.blogger.com, metode lain yang direncanakan adalah dengan tampilan flash. Nantikan saja kehadirannya ... :-)

Radhitya Wawan Yunarko mengatakan...
on 

Q dah pake mas, bisaaaaaaaaaaaa

feekyu mengatakan...
on 

salam kenal

irwan kurniawan mengatakan...
on 

syukron a lot..

Irmanto mengatakan...
on 

mantap infonya kawan. walaupun blogger sudah menyediakan fasilitas readmore akan tetapi menjadi masalah bagi tempate yang hanya punya satu tag= . kalau pake trik ini editing jadi mudah.

maaf kawan. boleh saya tukar link? blog ini sudah tertaut di blog saya. mohon di cek kembali. ditunggu link baliknya. terima kasih sebelumnya.. :)

suranegara mengatakan...
on 

Dah coba n berhasil buat readmore dengan cara manual seperti ini, thanks a lot. Tapi bagi temen-temen yang ada di sini atau pihak embun itu sendiri punya tutorial yang tersedia di blogger, minta pencerahannya ya gan. Maklum, anak pindahan dari si "W" ke blogspot ^^

Yan Adi mengatakan...
on 

mantab dan bagus banget nich blognya, kunjungan balik ya bro di download ebook gratis =p

Download Ebook Gratis | cara-blog | kumpulan bisnis online mengatakan...
on 

makasih infonya sob.

yahaya mengatakan...
on 

makasi sob info nya. sob saya mau bertanya?
saya berusaha memasang meta deskripsi dan meta keyword tapi error terus. bisa minta toturial nya gak>>? mohon bantuaanya

Jurnal Secience mengatakan...
on 

salam hangat sahabat. saya mau bertanya nih tetapi bukan tentang membuat read more. yang saya mau tanyakan mengenai feed burner. begini permasalahannya feed burner yang saya miliki kod gak update ya setiap saya update artikel kod artikel di feed burner saya gak update. mohon bantuannya.

Jurnal Secience mengatakan...
on 

terimakasih mas.. sangat membantu sekali,

Handoyo Putro mengatakan...
on 

Sangat bermanfaat dan berguna sekali untuk pengembangan blog

G-Smart mengatakan...
on 

info yang sangat bermanfaat sob.....

zona aneh mengatakan...
on 

mantap, thk
sangat bermanfaat

hoerrudin mengatakan...
on 

makasih mas saya baru tau nih

aku mengatakan...
on 

kunjungan gan .,.
bagi" motivasi
keberuntungan selalu menghampri kita
hanya saja kita yg trkdng tdk brfkir demikian.,.
si tunggu kunjungan baliknya gan.,

outbound malang mengatakan...
on 

Posting Komentar

Tundukkan tangkai padi dengan komentarmu

 
back to top