Cara Membuat Read More Sejajar Dengan Label Atau Waktu Posting Artikel

Apabila kita menggunakan ‘Jump Link’ untuk artikel yang diposting, maka secara default di bawah artikel tersebut akan ditampilkan tautan ‘Baca selengkapnya’. Dimana tautan tersebut akan ditampilkan dalam bentuk teks di bagian sisi kiri, sehingga tidak sedikit pengelola blog yang melakukan kustomisasi untuk bagian ini dengan maksud agar tampilan tautan atau tombol ‘Baca selengkapnya’ menjadi tampak lebih menarik.

Nah, terkait dengan kustomisasi tautan ‘Baca selengkapnya’, dalam artikel ‘Tanya Jawab’ ada seorang sahabat yang menanyakan mengenai cara membuat ‘Read more’ agar sejajar dengan tombol share, label artikel, atau waktu posting artikel seperti yang tampak pada gambar di atas. Sehingga menanggapi pertanyaan tersebut, maka berikut ini adalah uraian untuk melakukan kustomisasi pada tautan ‘Baca selengkapnya’ atau ‘Read more’ agar dapat sejajar dengan tombol share, label artikel, ataupun waktu posting artikel.

Untuk memindah tautan ‘Baca selengkapnya’ agar menjadi seperti yang tampak pada gambar di atas, sebenarnya tidaklah rumit. Karena yang perlu dilakukan hanyalah memindah rangkaian kode jump-link yang terdapat dalam template ke dalam area footer artikel. Sehingga untuk mengerjakannya Anda dapat melakukan langkah-langkah berikut ini secara berurutan.

Pertama, buka editor template dengan cara mengeklik menu ‘Template’ > ‘Edit HTML’ > ‘Lanjutkan’ > ‘Expand Template Widget’.

Kedua, cari rangkaian kode jump-link seperti yang tampak pada rangkaian kode di bawah ini, kemudian pindah ke dalam area class='post-footer' yang terletak beberapa baris di bawahnya.

<b:if cond='data:post.hasJumpLink'>
  <div class='jump-link' style='float:right;'>
    <a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>
  </div>
</b:if>

Sebagai contoh, apabila Anda ingin menempatkan tautan ‘Baca selengkapnya’ sejajar dengan tombol berbagi seperti yang tampak pada gambar di atas, maka rangkaian kode jump-link dapat disipkan pada bagian rangkaian kode berikut ini.

</span> <div class='post-share-buttons goog-inline-block'>
  <b:if cond='data:post.sharePostUrl'>
    <b:include data='post' name='shareButtons'/>
  </b:if>
</div></div>

Nah, di depan </div> yang terakhir tekan tombol enter dan kemudian sisipkan rangkaian kode jump-link sehingga menjadi seperti yang tampak pada rangkaian kode di bawah ini.

</span> <div class='post-share-buttons goog-inline-block'>
  <b:if cond='data:post.sharePostUrl'>
    <b:include data='post' name='shareButtons'/>
  </b:if>
</div>

<b:if cond='data:post.hasJumpLink'>
  <div class='jump-link' style='float:right;'>
    <a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>
  </div>
</b:if>

</div>

Ketiga, simpan template.

Dan selanjutnya agar tampilan tautan ‘Baca selengkapnya’ tampak lebih menarik, maka Anda dapat menambahkan style CSS tertentu pada tautan tersebut atau mengganti kode <data:post.jumpText/> dengan URL gambar tombol ‘Read more’ atau ‘Baca selengkapnya’ sesuai dengan yang Anda suka. Sedangkan untuk mengubah tautan teks ‘Baca selengkapnya’ dengan tautan dalam bentuk gambar, caranya dapat Anda pelajari dengan membuka artikel yang berjudul ‘Membuat Tombol Read More Tanpa Ribet’.

Semoga berguna dan bermanfaat.

Salam.