Mengganti Link Read More Dengan Gambar

Sebelumnya saya telah jelaskan pada postingan terdahulu bagaimana membuat read more atau baca selengkapnya pada blogger. Jika anda ingin membacanya kembali silakan klik link ini Cara Membuat Read More Blogger, karena pada postingan tersebut ada keterkaitan dengan postingan yang akan saya sajikan kali ini. Baiklah, jika kita lihat biasanya di penghujung pemotongan artikel suatu blog dapat anda temukan link yang bertuliskan read more atau baca selengkapnya. Sebagai contoh coba anda lihat link read more pada blog saya yang ini. Pada blog tersebut ada link yang bertuliskan baca selengkapnya, tapi di sampingnya juga terdapat sebuah gambar icon read more. Saya akan jelaskan saja cara mengganti tulisan link read more dengan gambar dan untuk selanjutnya terserah anda, apakah tulisan read more benar-benar mau diganti atau hanya ditambahkan gambar icon di samping tulisan tersebut. 

Berikut penjelasan singkat untuk mengganti link read more dengan gambar atau icon pada blogger:

1. Seperti biasa Log in terlebih dahulu ke account blogger anda, kemudian pilih menu Design > Edit HTML, jangan lupa untuk centang Expand Widget Templates dan temukan kode yang ditandai di bawah ini:

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

2. Bagaimana? Sudah dapat? Ganti tulisan Read More... dengan kode ini:

<img border="0" src="http://urlgambarreadmorebloggeranda.com"/ >

Atau ganti tulisan yang ditandai berwarna merah di atas dengan url gambar read more anda. Anda juga dapat gunakan gambar yang telah saya sediakan berikut, silakan dipilih salah satu:

<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFhvTskA2hup-zaQPlX1ikYB2z1S91p8TGiOp8oM9TssU-nIOt2U9amqeAMxMOv35312VES1XJV3KGRu6go24-aUScpefSSCaiGmU82rSmJ7WUEKCFzAHsVL2_48dJxYwQsZmAK-W3U0s/s1600/readmore.gif"/ >
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOi-t6S9m0sff03PRxC2MKoKu-5bIRuD5bM_dUTpD5alKMsG8Y87AvVHj3JtraIymt3RFek1bFLFRxIoPXpY9oFWhZf-T_4fMU6tlCTVfTHRQzKUi9VBP9l3-8vE1R5pDIMsNoIozHpI8/s1600/more+button.gif"/ >
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipIFVfqXDIkh9zx2WUR9Z1F3fRhXbDjQighk8DxjmHtUnBW8mbMVaBvrpbh_R_B9kQ9BKGIOCKgwKPMvbR6ZsYOUGzPTagsqpe5ldeEfcPumpwgO6A2vBH9z3DofLf5RVqXEMjX36ATSg/s1600/readmore.png"/ >
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiEgK8OT01HLqPUHPgbBMfKvtREAQLePNj4TxZ4WR17EwXhe9WscbLNGAEtPs9YkzymsyA8S7rnKpz7daMBOJH_h0fwWdsh8A4byQaFyfDQMjk2MFoazn96_7OkHaoOpUEs4PTojRxWfU/s1600/read+more+arrow.png"/ >

3. Langkah akhir tinggal klik Save Template dan lihat hasilnya.

Cara Memenggal Artikel Blogger

Secara default, artikel atau postingan blogger ditampilkan secara keseluruhan di halaman homepage. Hal ini dapat mengganggu kenyamanan pembaca apabila artikel yang ditampilkan cukup panjang. Apalagi jika kita menampilkan jumlah postingan yang cukup banyak sekaligus di halaman homepage blog. Untuk mengatasinya kita dapat memotongnya, atau mempersingkatnya, atau lebih akrab dalam dunia blog dikatakan membuat read more blogger. Selain itu dengan membuat read more pada blogger ini akan membuat pembaca semakin penasaran karena belum selesai mereka membaca postingan anda tapi malah dipotong. Baiklah, simak saja langsung penjelasannya.

Caranya ikuti langkah berikut: 
1. Seperti biasa login ke account blogger, kemudian pilih menu Design > Edit HTML, jangan lupa untuk centang Expand Widget Templates dan carilah kode berwarna merah berikut: 

<data:post.body/>

Biasanya kode tersebut dapat anda temukan tepat di bawah kode:

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

2. Setelah dapat, ganti hanya kode berwarna merah di atas sehingga menjadi seperti ini:

<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>
<a expr:href='data:post.url'>Read More...</a>
</b:if>

Berikut screenshotnya jika anda masih bingung:

Untuk tulisan Read More... dapat anda ubahsesuaikan sendiri, misalnya menjadi Baca Selengkapnya.

5. Save Template hasil pengeditan.

6. Langkah selanjutnya setelah mengedit HTML, kemudian pilih menu Setting lalu pilih Formatting.

7. Masukkan kode berikut pada kotak Post Template:

<span class="fullpost">

</span>

8. Klik Save Settings.

Terakhir adalah hal penting agar fungsi read more blogger dapat berjalan dengan baik yaitu pada saat anda akan mulai menulis artikel, letakkan paragraf yang akan tampil dengan menyisipkan kode <span class="fullpost"> pada paragraf yang akan dipotong dan kode </span> di akhir paragraf tersebut yang akan dipotong. Simpan hasil pengeditan dan lihat hasilnya. Sekarang artikel blog anda sudah dipenggal.