Cara Mudah Mengedit dan Mengubah fitur "Read More" di Blogger

Fitur "Read More" atau kebanyakan blogger juga menggunakan "Continue Reading" adalah fitur Blogger yang berguna untuk menyingkat tampilan postingan yang ada di homepage blog Anda.

Banyak blogger memamfaatkan fitur "Read More" dikarenakan dengan adanya fitur ini, halaman homepage dapat menampilkan lebih banyak judul artikel, lalu para pembaca pun tidak perlu meng-scroll jauh kebawah hanya untuk melihat postingan selanjutnya (biasanya ada di tampilan homepage template bawaan blogger).

Namun terkadang di beberapa template, fitur "Read More" ini hampir tidak terlihat karena berbaur dengan snippet (potongan) postingan Anda. Jadi pilihlah template blog yang memiliki tampilan fitur "Read More" menarik dan agak sedikit terpisah dari snippet postingan Anda atau Anda juga bisa mengubah warna dari fitur "Read More" ini agar berbeda dengan warna teks postingan.

Nah bagi Anda yang belum tau cara mengubah tampilan fitur "Read More" di blog, saya akan memberitahukannya untuk Anda. Simak terus postingan ini sampai habis :)

Begini caranya!

Cara Mengedit Fitur "READ MORE" di Blogger

1. Masuk ke dashboard blogger Anda, lalu pilih Template > Edit HTML

2. Klik dimana saja dalam container editor HTML lalu tekan CTRL + F (CMD + F di Mac)

3. Maka akan muncul kotak pencarian lalu ketikkan kode berikut ini :

<div class='jump-link'>

    lalu tekan Enter

4. Maka Anda akan melihat kode seperti dibawah ini :

<div class='jump-link'><a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a></div>

Cara Merubah Tulisan "READ MORE"

<div class='jump-link'><a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a></div>

teks yang berwarna MERAH diatas dengan kata baru Anda, seperti misalnya "Continue Reading..." atau "Baca Selanjutnya..."

<div class='jump-link'><a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'>Continue Reading...</a></div>

Menggunakan Gambar Sebagai Pengganti Teks "READ MORE"

<div class='jump-link'><a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><img src="http://urltoyourimage.com/yourimage.jpg"></a></div>

Ganti kode asli diatas (warna MERAH) dengan kode HTML gambar yang ingin Anda pakai.

Mempercantik Tulisan "READ MORE"

Jika Anda ingin berkreasi dengan gaya Anda sendiri, Anda bisa melakukannya dengan cara menambahkan kode CSS ke elemen .jump-link

Tekan CTRL + F untuk membuka kotak pencarian di kontainer Edit HTML, lalu ketikkan kode berikut ini :

]]></b:skin>

Kemudian letakkan kode CSS berikut ini tepat diatas kode ]]></b:skin> tadi.

.jump-link {text-align:center;}
.jump-link a {font-size:15px;padding:10px;border: 1px solid #000;background-color:#ccc;color:#000;font-weight:bold;}

Kode .jump-link adalah untuk mengatur letak (posisi) teks, sedangkan kode .jump-link a adalah untuk mengatur pengaturan border, ukuran dan warna teks. Hasil tampilan dari kode diatas adalah seperti dibwah ini :

Anda bisa mengedit style dari "READ MORE" sesuka Anda hanya dengan mengubah kode CSS tersebut.

Saya berharap artikel Cara Mudah Mengedit dan Mengubah fitur "Read More" di Blogger ini dapat membantu dan bermamfaat bagi Anda. Anda hanya perlu berkreasi saja dan mencocokkannya dengan tampilan blog Anda. 

Selamat mencoba :)

Jika artikel ini membantu, tolong di share ya :)