Cara Membuat ReadMore (Untuk Tema Klasik)

Viyan Pradita Senin, Juli 26, 2010

Membuat Read More/Baca Selengkapnya untuk Template klasik
Sobat mungkin sering melihat bahwa artikel-artikel/postinga saya terlihat hanya berupa judul-judul dengan satu atau dua buah paragrap saja, dan untuk melihat keseluruhan artikel harus meng klik link yang bertuliskan >> "Selengkapnya...", >> "ReadMore..."
Ini sama saja dengan meringkas suatu artikel biar tidak kelihatan terlalu panjang. maka dari itu perlu di gunakan/membuat pengaturan supaya lebih ringkas. hanya bagian/ praragraf awal postingan saja yang di tunjukan, dan untuk membaca keseluhannya tinggal click "ReadMore/Baca Selengkapnya".

kali ini saya akan bahas bagaimana membuat readmor/baca selengkapnya pada template klasik.

Silahkan ikuti langkah-langkah berikut :
  • Silahkan Login ke blogger.com dengan id sobat.
  • Klik menu bertuliskan Template.
  • jangan lupa Copy seluruh kode template milik sobat lalu paste pada notepad dan kemudian simpan, untuk membuat back up data. Ini dimaksudkan apabila terjadi kesalahan dalam template setelah kita utak-utik, ehh otak-atik maksudnya.. hihihi... kita masih punya cadangan data.xml untuk mengembalikannya.
  • Copy kode HTML di bawah, kemudian paste persis di atas kode : </style>

<MainOrArchivePage>

div.fullpost {display:none;}

</MainOrArchivePage>

<ItemPage>

div.fullpost {display:inline;}

</ItemPage>


Untuk mempercepat pencarian kode </style> , silahkan sobat klik menu Edit yang ada pada bar menu browser, kemudian klik Find (on this page)..., lalu tulis </style> trus klik tombol find next, maka secara otomatis akan di bawa ke kode tersebut.
  • langkah selanjutnya adalah, silahkan copy kode berikut lalu paste setelah kode <$BlogItemBody$> :

    <MainOrArchivePage><br/>

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

    </MainOrArchivePage>
Lagi-lagi Untuk mempercepat pencarian kode <$BlogItemBody$>, silahkan sobat klik menu Edit yang ada pada bar menu browser, kemudian klik Find (on this page)..., lalu tulis <$BlogItemBody$> trus klik tombol find next, maka secara otomatis akan di bawa ke kode tersebut.
  • Klik tombol yang bertuliskan SAVE SETTINGS.
  • Langkah selanjutnya adalah klik menu Setting.
  • Klik menu Formatting.
  • Dibagian bawah menu tersebut ada kotak di samping tulisan Post Template, nah isi kotak kosong tersebut dengan kode di bawah ini :

<div class="fullpost">


</div>

Sebenarnya langkah diatas tidak wajib dilakukan, akan tetapi ini di maksudkan agar ketika kita mau posting artikel, kode tersebut akan muncul secara otomatis tanpa harus di tulis dahulu, tentunya ini akan lebih mempermudah dan tidak harus selalu mengingat kode tersebut.
  • kemudian jangan lupa klik tombol Save Settings.
  • Selesai.
Cara Posting Artikel

Nah... sesudah beberapa tahap kita lalui, sekarang kita masuk ke tahap bagaimana cara memposting suatu artikel agar ada menu Readmore nya.
  • Klik menu Posting.
  • klik menu Edit HTML, nah di sana secara otomatis akan tampak kode yang kita simpan tadi, yakni :

<div class="fullpost">


</div>


simpan artikel sobat yang ingin di tampilkan sebelum kode <div class="fullpost">
, kemudian simpan sisa keseluruhan artikel setelah kode <div class="fullpost&
dan sebelum kode </div>

Agar lebih jelas, saya beri contoh, misal artikelnya begini :

Ini adalah contoh tulisan yang di simpan pada awal artikel yang akan selalu muncul pada blog kita, sedangkan tulisan yang lainnya tidak akan muncul.
<div class="fullpost">
dan tulisan yang ini adalah tulisan yang akan muncul ketika para pengunjung meng klik link yang bertuliskan Read more.
</div>

Hasilnya yang akan tampak pada blog kita adalah seperti ini :

Ini adalah contoh tulisan yang di simpan pada awal artikel yang akan selalu muncul pada blog kita, sedangkan tulisan yang lainnya tidak akan muncul.

Read more!

Bagaimana sobat, sudah jelaskan. bila belum jelas silahkan di tanyakan kembali pada komentar.

Sedikit clue, kata Read more! sebenarnya bisa kita ganti sesuai dengan keinginan kita, misalkan kita rubah menjadi Baca selengkapnya..., Selengkapnya.., Lanjutannya... atau apa saja yang penting kata tersebut bisa memberi tahu kepada para pengunjung bahwa artikel kita ada kelanjutannya.

Kode di atas sebenarnya ada alternatif lain, yakni memakai kode Span, jika berminat, ganti semua kode div menjadi Span. Hasilnya akan sama, cuma bagi para sobat yang suka posting pada menu compose, kode ini sering ada masalah di karenakan bertabrakan dengan perintah lain yang memakai kode Span.


Ditulis Oleh :

Artikel Cara Membuat ReadMore (Untuk Tema Klasik) ini dipublish pada hari: Senin, Juli 26, 2010. Semoga artikel ini bermanfaat untuk Anda. Copy paste wajib dengan ijin saya, serta menggunakan link sumber seperti di bawah. Gunakan etika. Saya akan berlakukan DMCA COMPLAINT secara langsung tanpa pemberitahuan atas copas tanpa mengikuti ketentuan yg berlaku.

Tidak ada komentar:

Poskan Komentar

Catatan:
Link hidup dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE</i>
Kode yang panjang bisa menggunakan tag <i rel="pre">KODE PANJANG</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS DI SINI...</i>

web design blogs Bloggers - Meet Millions of Bloggers