Blogspot: Cara Edit Read More 'Jump Break' Di Blog

Blogger.com-Tutorial hari ini yaitu perihal 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

Tutorial hari ini yaitu perihal tautan jump break Blogspot: Cara edit read more 'jump break' di blog

Saat menulis posting di Blogger, klik sedikit halaman yang rusak untuk memasukkan tautan lompat "read more / baca lebih lanjut". Contohnya ibarat goresan pena "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 sanggup mengubah teks secara manual di HTML Anda juga. Untuk melaksanakan ini, buka Tema > Edit HTML > Cari jump-link dan temukan isyarat berikut

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

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

BAGAIMANA MENAMPILKAN JUDUL POST DALAM TEKS JUMP LINK

Untuk menambahkan judul posting sesudah membaca lebih banyak teks, buka Tema > Edit HTML > Format Template. Cari tautan pribadi dan temukan isyarat berikut

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

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

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

Simpan template Anda

Baca Juga

HAPUS AUTO-JUMP UNTUK SETELAH JUMP-BREAK

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

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

Hapus + "#more" jadi Anda pergi dengan isyarat 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 melaksanakan ini, tetapi ini yaitu cara yang sangat sederhana. Buka Tema > Edit HTML > Cari jump-link dan temukan isyarat berikut

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

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

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"' 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>, kalau 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 ibarat 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.