RSS Feed

21 Jul 2010

Cara Membuat Read More pada Template Klasik

Mungkin di antara anda ada yang melihat artikel yang sangat singkat, mungkin hanya sekitar 1 atau 2 paragraph saja. Kemudian untuk melihat isi keseluruhan dari artikel itu, anda harus mengklik tulisan >> Selengkapnya..., ini disebut kamuflase posting. Buat anda yang mempunyai artikel yang lumayan banyak dan panjang mungkin ini salah satu menu sangat diperlukan.
Untuk membuat Read more kita harus menambahkan beberapa kode HTML ke dalam template blog kita. Tutorial kali ini, yaitu untuk blogger yang khusus menggunakan template klasik.
Adapun langkah-langkahnya adalah sebagai berikut:


  • Login ke blogger.com dengan id anda

  • Klik menu bertuliskan Template

  • Klik menu Edit HTML

  • 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 otak-atik, kita masih punya cadangan data 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 anda 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

  • Pada bagian 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 di atas tidak wajib dilakukan, tetapi ini dimaksudkan agar ketika kita akan memposting artikel, kode tersebut akan muncul secara otomatis tanpa harus ditulis dahulu, tentunya ini akan lebih mempermudah dan tidak harus selalu mengingat kode tersebut.
  • Kemudian jangan lupa klik tombol Save Settings
    Cara Posting Artikel
    Oke, 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, di sana secara otomatis akan tampak kode yang kita simpan tadi, yakni:

<div class="fullpost">

</div>



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

Agar lebih jelasnya, saya berikan contoh, misalnya:

Ini adalah tulisan yang disimpan pada awal artikel yang akan selalu muncul pada blog anda, 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 tulisan yang disimpan pada awal artikel yang akan selalu muncul pada blog anda, sedangkan tulisan yang lainnya tidak akan muncul.
Read more!

Kata Rea more tersebut bisa kita ganti sesuai dengan keinginan kita, misalnya kita merubah menjadi Baca selengkapnya..., Selanjutannya... 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, ganti semua kode div menjadi Span. Hasilnya akan sama, cuma bagi para anda yang suka posting pada menu compose, kode ini sering ada masalah di karenakan bertabrakan dengan perintah lain yang memakai kode Span.

0 komentar:

Posting Komentar