“Read more” untuk New Templates pada Blogger

Setiap artikel yang Anda masukkan ke dalam blog, selalu akan ditampilkan seluruhnya di dalam content secara berurutan. Mulai dari artikel terbaru sampai dengan artikel-artikel sebelumnya. Jika setiap artikel yang Anda masukkan hanya beberapa kalimat pendek saja, maka tidak ada masalah. Nah, bagaimana kalau artikel yang Anda masukkan sangat panjang sampai ada beberapa halaman? Tentunya akan memenuhi content blog Anda.

Untuk mengatasi masalah tersebut, sebaiknya Anda membuat penggalan di dalam artikel yang Anda kirim dengan cara memberi link Read more seperti yang ada di beberapa website. Artikel yang ditampilkan di content hanyalah sebagian dari artikel saja sedangkan artikel secara keseluruhan akan ditampilkan jika sudah di klik pada Read more.

Sebenarnya sudah ada banyak panduan tentang pembuatan Read more ini dan banyak juga yang sudah mencobanya tapi banyak juga yang gagal. Beberapa orang yang gagal mengusulkan agar memuat artikel Read more di blog saya. Jika Anda tertarik dengan artikel ini silakan mengikuti panduan berikut.

(1) Login di blogger.com

Langkah pertama adalah buka www.blogger.com melalui browser Anda. Setelah tampil halaman depan blogger.com, isi e-mail dan password Anda kemudian klik Sign In.

(2) Membuka template

Jika proses login berhasil, Anda akan memasuki halaman Panel Kontrol pada blogger.com. Di sini ada beberapa informasi tentang blog Anda mulai dari judul blog Anda, jumlah posting, dan ada beberapa link yang berguna untuk mengatur konfigurasi blog. Pada bagian ini kita klik pada Layout. Tunggu beberapa saat, setelah masuk ke halaman Template, klik Edit HTML.

(3) Mengaktifkan Expand Widget

Beri tanda cek pada Expand Widget Templates. Langkah ke-3 ini hanya berlaku jika template yang Anda gunakan di Blogger adalah New Templates. Jika Expand Widget Templates tidak ada, berarti template yang Anda gunakan adalah Classic Templates. Baca artikel “Read More” untuk Classic Templates pada Blogger.

(4) Mencari kode

Sekarang cari kode di bawah ini pada template blogger.

}
]]></b:skin>
</head>

(5) Menyisipkan kode

Kalau sudah ketemu, di bawah kode ]]></b:skin> sisipkan kode html sebagai berikut :

<style>
<b:if cond=’data:blog.pageType == “item”‘>
span.fullpost {display:inline;}
<b:else/>
span.fullpost {display:none;}
</b:if>
</style>

(6) Susunan kode

Akhirnya susunan kode menjadi seperti berikut. Kode yang berwarna biru adalah kode asli dari blogger, sedangkan yang berwarna merah adalah kode tambahan.

}
]]></b:skin>
<style>
<b:if cond=’data:blog.pageType == “item”‘>
span.fullpost {display:inline;}
<b:else/>
span.fullpost {display:none;}
</b:if>
</style>
</head>

(7) Menyisipkan kode

Nah, sekarang cari kode <p><data:post.body/></p>. Kalau sudah ketemu, Anda sisipkan kode bawah ini diantara <p><data:post.body/> dan </p>.

<b:if cond=’data:blog.pageType != “item”‘>
<a expr:href=’data:post.url’> Read More..</a>
</b:if>

(8) Susunan html

Jadi, susunan kode html di template setelah akan menjadi seperti ini. Yang berwarna biru adalah kode asli template sedangkan yang berwarna merah adalah kode tambahan.

<p><data:post.body/>
<b:if cond=’data:blog.pageType != “item”‘>
<a expr:href=’data:post.url’> Read More..</a>
</b:if>
</p>

(9) Menyimpan template

Jika proses penyisipan kode selesai, klik SIMPAN TEMPLATE untuk menyimpan perubahan yang Anda lakukan.

(10) Mengatur setting

Setelah proses penyisipan kode selesai, Klik PENGATURAN, kemudian klik FORMAT. Di bagian paling bawah ada kotak kosong pada TEMPLATE POSTING. Isi kotak kosong tersebut dengan kode berikut:

<span class=”fullpost”>

</span>

(11) Menyimpan setting

Setelah pengetikan kode selesai, klik SAVE PENGATURAN untuk menyimpan setting. Proses pembuatan READ MORE telah selesai.

(12) Cara memposting
Sekarang bagaimana cara memposting? Ada sedikit perbedaan cara memposting menggunakan READ MORE ini. Pada saat memposting, klik EDIT HTML. Maka, secara otomatis akan tampak kode sebagai berikut :

<span class=”fullpost”>

</span>

(13) Mengedit posting

Letakkan posting yang akan ditampilkan di halaman muka di atas kode <span class=”fullpost”> sedangkan sisanya letakkan di antara kode <span class=”fullpost”> dan </span>.

(14) Mempublish posting

Klik MEMPUBLIKASIKAN POSTING untuk mempublish posting Anda. Jika sudah selesai, buka blog Anda atau jika sudah terbuka klik Refresh dan lihat hasilnya.

Komentar