Thursday, May 7, 2009

Membuat Read More untuk Template klasik

Selamat bertemu kembali para blogger semua, Artikel Panduan Belajar Blog saya kali ini adalah mengenai Read More.
PERHATIAN !! Artikel ini dikhususkan bagi anda yang masih menggunakan template klasik, tapi jika anda sudah menggunakan template baru (xml/beta), silahkan baca petunjuk membuat read more di artikel saya : Cara mudah membuat “Read More”
Sebenarnya apa yg dimaksud dengan "membuat Read More" maksudnya ? Begini, sebenarnya saya kurang setuju dengan judul tersebut, ada baiknya seperti ini :"Menu Selengkapnya", tapi berhubung kode HTML dibuat dalam bahasa Inggris, maka dibuat dengan istilah "Read More".
Kita mulai pembahasannya. Bagi anda yang baru mulai membuat blog, mungkin belum mengetahui informasi ini dan mudah-mudahan dengan membaca artikel ini dapat menambah pengetahuan kita tentang apa yang namanya nge-blog.
Sobat mungkin melihat bahwa artikel-artikel 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...", ini di sebut trik atau kamuflase posting.
Bagi anda yang baru posting artikel hanya satu atau dua artikel saja mungkin menganggap tidak perlu menyingkat artikel, namun jika nanti artikel anda sudah terlalu panjang, maka mungkin saja anda ingin membuat menu seperti ini.
Untuk membuat menu Read more kita harus menambahkan beberapa kode HTML ke dalam template blog kita. Tapi untuk postingan kali ini, saya khususkan untuk blogger yang memakai template klasik saja, untuk yang memakai template baru silahkan baca artikel saya tentang Cara mudah membuat “Read More”.
Silahkan ikuti langkah-langkah berikut :
  • Login ke blogger.com dengan id anda
  • Klik menu bertuliskan Template
  • Klik menu Edit HTML
  • jangan lupa Copy seluruh kode template lalu paste pada notepad dan kemudian simpan, ini dimaksudkan untuk membuat back up data apabila terjadi kesalahan dalam template setelah kita rubah, tapi 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 </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>
Untuk mempercepat pencarian kode <$BlogItemBody$>, 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 kita 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
Oke, sesudah beberapa tahap diatas 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 anda 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 berikan contoh, misal artikelnya begini :
Ini adalah sebuah artikel bermanfaat mengenai Bisnis Online yg perlu anda baca dan praktekkan.
<div class="fullpost">
Bisnis ini bukan MLM atau Money Game, tapi merupakan Bisnis legal tanpa adanya penipuan.
</div>
Hasilnya yang akan tampak pada blog kita adalah seperti ini :
Ini adalah sebuah artikel bermanfaat mengenai Bisnis Online yg perlu anda baca dan praktekkan.
Read more…
sedangkan kata-kata :
Bisnis ini bukan MLM atau Money Game, tapi merupakan Bisnis legal tanpa adanya penipuan. Akan muncul bila anda mengklik Read more nya.
Bagaimana ? sudah jelas ?. bila belum silahkan di tanyakan pada pada kolom komentar.
Sedikit informasi, kata Read more! sebenarnya bisa kita ganti sesuai dengan keinginan kita, misalkan kita rubah menjadi Baca lanjutannya..., Selengkapnya.., atau apa saja yang penting kata tersebut bisa memberi tahu kepada para pengunjung bahwa artikel kita itu 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 anda yang suka posting pada menu compose, kode ini sering ada masalah di karenakan bertabrakan dengan perintah lain yang juga memakai kode Span.
Oke, sampai disini pembahasan Belajar Blog tentang “Membuat Read More untuk Template klasik”, semoga bermanfaat.
Tetap kunjungi Tentang Komputer dan Internet, dan nantikan informasi menarik berikutnya.
Terimakasih

1 comment:

  1. makasih infonya mas... cara membuat readmore trus judul postingan di samping read more gimana yak....

    ReplyDelete