Blogspot: Cara edit read more 'jump break' di blog

Blogger.com-Tutorial hari ini adalah tentang tautan jump break "read more / baca selengkapnya" di Blogspot. Saya akan membahas cara menambahkannya ke blog Anda, mengubah teks, menambahkan judul entri, menambahkan gambar, dan menyesuaikan tampilan.

Tautan "read more" tidak benar-benar menonjol dan memberi tahu orang lain bahwa ada lebih banyak pos yang menjadi alasan mengapa kebanyakan orang ingin mengubahnya. Ada banyak cara untuk menyesuaikan ini jadi cobalah pasangan dan lihat apa yang Anda sukai.

MANFAAT INSERT JUMP BREAK LINK DI POSTINGAN

Saat menulis posting di Blogger, klik sedikit halaman yang rusak untuk memasukkan tautan lompat "read more / baca lebih lanjut". Contohnya seperti tulisan "continue reading" dibawah ini.

BAGAIMANA MENGUBAH TEKS JUMP LINK

Pergi ke Layout > Tata Letak > Gadget Posting Blog > Edit > Pilih Halaman Utama dan ubah Teks Tautan Halaman Posting.

Anda dapat mengubah teks secara manual di HTML Anda juga. Untuk melakukan ini, buka Tema > Edit HTML > Cari jump-link dan temukan kode berikut

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

Ubah <data:post.jumpText/> ke apa pun yang Anda inginkan untuk tampil seperti Baca Lebih Lanjut atau Read more misalnya. Simpan template Anda.

BAGAIMANA MENAMPILKAN JUDUL POST DALAM TEKS JUMP LINK

Untuk menambahkan judul posting setelah membaca lebih banyak teks, buka Tema > Edit HTML > Format Template. Cari tautan langsung dan temukan kode berikut

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

Tambahkan <data:post.title/> setelah <data:post.jumpText/> sehingga terlihat seperti

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

Simpan template Anda

HAPUS AUTO-JUMP UNTUK SETELAH JUMP-BREAK

Setelah mengklik "baca lebih lanjut", halaman akan dimuat ulang dan melompat ke garis setelah jump-break. Jika Anda ingin menghapus ini sehingga memuat posting biasanya, pergi ke Tema > Edit HTML > Cari untuk jump-link dan temukan kode berikut

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

Hapus + &quot;#more&quot; jadi Anda pergi dengan kode berikut ...

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url' expr:title='data:post.title'>
<data:post.jumpText/>
</a>
</div>
</b:if>

Simpan template Anda.

TAMBAHKAN GAMBAR, ICON ATAU TOMBOL BUKAN BACA LEBIH LANJUT

Ada beberapa cara untuk melakukan ini, tetapi ini adalah cara yang sangat sederhana. Buka Tema > Edit HTML > Cari jump-link dan temukan kode berikut

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

Ganti <data:post.jumpText/> dengan <img src='DIRECT IMG URL' /> sehingga terlihat seperti ini

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'>
<img src='DIRECT IMG URL' />
</a>
</div>
</b:if>

Sekarang ganti DIRECT IMG URL dengan link dari gambar yang ingin Anda gunakan dan simpan template Anda.

CARA MENGGUNAKAN LINK "READ MORE" DENGAN CSS

Untuk mempertahankan tautan tetapi membuatnya sesuai dengan desain blog Anda, buka Tema > Edit HTML dan temukan ]]></ b:skin>, jika Anda kesulitan menemukan tag b:skin, baca postingan ini.

Tambahkan kode-kode berikut di atas ]]></ b:skin> dan tambahkan style Anda di antara tanda kurung.

.jump-link {
/* Style Entire Jump Link */
}
.jump-link a {
/* Style Jump Link Text Link */
}
.jump-link a:hover {
/* Style Jump Link Text Link On Hover Over */
}
For example, you could use something like the following (or from our post on how to style a link to look like a button)
.jump-link {
text-align: right; /* align right of post - can also use left or center */
background: #333333; /* change background colour for full width of jump link */
}
.jump-link a {
background: #333333; /* change background colour for just the text part */
color: #eeeeee; /* change text colour */
padding: 5px; /* change spacing around text */
border-radius: 5px; /* change radius of background */
font-size: 12px; /* change font size */
}
.jump-link a:hover {
background: #eeeeee; /* change background colour on hover */
color: #333333; /* change text colour on hover */
text-decoration: none; /* no text underline on hover */
}

yang akan membuatnya terlihat mirip dengan yang berikut

TIPS: Pastikan Anda tidak kehilangan tanda titik dua, titik koma, atau tanda kurung di CSS Anda! Kesalahan apa pun akan menghentikan browser membacanya dengan benar.