Cara membuat 'Baca selengkapnya' (Read More)

Hallo Sahabat, apa kabar? Moga baik-baik aza. Kali ini saya akan mencoba menjelaskan bagaimana cara membuat <Read More> atau baca selengkapnya dalam blog. 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.

Tidaklah sulit membuat <baca selengkapnya> namun diperlukan konsentrasi. 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.

Kesatu, 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.

Itulah yang dapat saya sampaikan semoga anda dapat mengaplikasikannya. Good Luck!

tak ada gading yang tak retak.

SALAM DARI AYAH IBUNYA :
1. DENIS ZAKIA MUHAMMAD (A'DENIS)
2. DENITA RIZKA HUMAIRA (NENG AIRA)
3. DEVANKA MUHAMMAD RAFFASYA (DE AKA)

=============== Good luck ============

Sumber: http://eltelu.blogspot.com