May 15, 2020

Blogger: Read More to the Top of Posts

It is sometimes necessary for fellow Blogger to make 'read more' hyper links bring visitors to the top of posts. It recently came to my attention again that whenever I click a "Read More" hyperlink at Home page, it brought me to a line of text where the jump link was placed, and I didn't like it.

People might not read the content of an article located before the jump link yet, or forgot already of what they just read when they were already at the full posts area, and that would make them scroll up to the top of pages. It's just a waste of time.

Besides, from 'the publisher's point of view, near the top of pages normally at least there's an ad, probably the most valuable one with the highest bid, that publisher does not want to miss it. And hence, the 'read more' link default setting is not what the reader and the publisher want it to be.

Blogger Read More to the Top of Posts

As for WordPress I have made an article rather long ago on how to deal with the issue. You can check it out here. You don't need to understand Indonesian language to know how to do the trick in WordPress.

Meanwhile Blogger Themes, the default ones, have been evolving over time, and hence there are different ways to modify 'read more' hyperlinks in order to make them bring visitors to the top of every posts.

Follow the steps below to modify 'read more' hyperlink to satisfy your need:
  1. Login to Blogger, and don't forget to back up your theme first, before making any changes. Don't rely on ctrl-Z or command-Z, as your screen may freeze at any point of time.
  2. Click Theme > Edit HTML
  3. If you use a theme similar to Picture Window, find (Ctrl-F / Command-F)

    <b:if cond='data:post.hasJumpLink'>

    Below the code, look for + "#more", delete it and the code should become:

    <a expr:href='data:post.url + "#more"' expr:title='data:post.title'><data:post.jumpText/></a>

    Save, and that's it.
  4. If you use a theme similar to Contempo, find (Ctrl-F / Command-F)

    <b:includable id='postFooterJumpLink'>

    Below the code, look for fragment "more" , delete it and the code should become:

    <a expr:href='data:post.hasJumpLink ? data:post.url : data:post.url' expr:title='data:post.title'>

    Save.

Check your work by opening home page, and click the 'read more' hyperlink to see the results.

Label: Blogger, Theme, Tutorial
Bagikan ke: WhatsApp, Email. Print!.

aroengbinang, seorang penyusur jalan.
Traktir BA secangkir kopi? Scan via 'Bayar' GoPay.