Hakimtea™

Membuat readmore atau menyingkat tulisan di blog, maksudnya memberikan tanda “Read More…” Atau “Baca Selengkapnya…” atau cukup “Selengkapnya…” di bawah tulisan kita yang dipersingkat. Agar tulisan yang panjang tidak seluruhnya tampil biar tidak memakan tempat.

To the point saja, di bawah ini merupakan langkah-langkah cara menyingkat tulisan atau memasang readmore di Blogger baru (layout template):

• Klik layout -> template -> edit HTML. Lalu beri tanda ceklis pada “Expand Widget Templates”.
• Karena masing-masing struktur template berbeda maka pada kotak Edit Template cari salah satu kode berikut:

<div class='post-header-line-1'/>
atau <div class='post-header-line'>
atau <div class='post-body entry-content'>

Untuk mencari kode tersebut, jika Anda menggunakan browser firefox cara mencarinya cukup mudah tinggal copy salah satu kode yang akan dicari tersebut, tekan CTRL + F di tempat pencarian (di edit html blog Anda) lalu paste kode yang akan dicari di area Find: yang akan muncul setelah menekan CTRL + F dan otomatis kode yang Anda cari jika sesuai akan langsung ditemukan. Jika belum menggunakan firefox silahkan download dulu disini.

• Kalau sudah ketemu; Tahap pertama (ada dua tahap) kita copy-paste kode berikut,

<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>

Paste dibawah salah satu kode berikut yang ada pada template blog Anda,

<div class='post-header-line-1'/>
atau <div class='post-header-line'>
atau <div class='post-body entry-content'>

• Tahap kedua, copy kode berikut,

<b:if cond='data:blog.pageType != "item"'><br />
<a expr:href='data:post.url'>Read more...</a>
</b:if>
</b:if>

Paste dibawah kode <p><data:post.body/></p>

• Kalo petunjuk di atas sudah dilakukan, maka hasilnya akan seperti ini: (perhatikan warna biru sebagai kode tambahan)

<div class='post-body entry-content'>

<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>

<b:if cond=’data:blog.pageType != "item"’><br/>
<a expr:href=’data:post.url’>Read moreâ�¦</a>
</b:if>
</b:if>

<div style='clear: both;'/> <!-- clear for photos floats -->

• Jika sudah klik SAVE TEMPLATE.
• Dari menu TEMPLATE kita pindah menu; klik Settings (Pengaturan) >Formatting (Format). Dibagian bawah ada tulisan Post Template (Template Posting), isi kotak dipinggirnya dengan kode berikut:

<span class="fullpost">

</span>

Klik SAVE (Simpan Pengaturan).

• Terakhir, setiap akan mempublish postingan, klik Edit HTML dan sisipkan kode tersebut diantara postingan yang akan ditampilkan dan disembunyikan. Contoh,

Ini merupakan paragraf pertama isi postingan Anda. <span class="fullpost"> dan ini merupakan paragraf selanjutnya postingan Anda yang tidak akan terlihat kecuali link read more di klik oleh pengunjung blog Anda.</span>

• Kode </span> tersebut disimpan paling akhir tulisan (postingan) Anda!.

Silahkan dicoba!
________________

Masih pake template classic…?!? Klik disini cara membuat readmore untuk template classic.

PS: Saat akan mempublish postingan usahakan tidak ada tag </span> lain selain </span> readmore berikut <span class="fullpost"> dan </span>, jika ada akan mengakibatkan terjadi kecelakaan dahsyat readmore tidak berfungsi dengan baik. Caranya edit postingan pada edit html jangan di Compose.

Popularity: 3% [?]

• Memotong Postingan Yang Terlalu Panjang (Membuat Readmore di Blogger Lama, Classic Template)
Jum'at pagi yang cerah ceria ini saya jalan-jalan bersama neng google, bergandengan tangan dan saling tersenyum *apaaaa seeeeh*. Hanya kita
• Memasang Widget Bookmark & Share Addthis
Salah satu alasan kenapa kita memasang widget bookmark & share adalah sebagai salah satu upaya untuk meningkatkan traffic (pengunjung). Widget
• Membuat Widget Kotak Blogroll Hemat Tempat
Ternyata banyak juga yang bertanya mengenai blogroll yang saya gunakan karena mungkin hemat tempat. Dan mungkin karena sadar segalanya sekarang
• Membuat Banner dan Logo Blog Tanpa Menguasai Photoshop
Kalau tips terdahulu tentang membuat banner blog menggunakan program Adobe Photoshop CS dan Image Ready yang cukup jelimet jika memang
• Membuat Menu Pull Down di Blogger
Membuat menu Pull Down itu nggak terlalu susah, manfaatnya bila kita membuat link jadi ga makan tempat tapi banyakan para