'READ MORE' Text in Magazine Dynamic Views Template | CutieCoding

Estimated Reading Time:
We are talking about Blogger's dynamic templates again.

Though it's been a few years since dynamic views templates have been out in the Blogger platform, there are many core features of blogger that just don't work with dynamic views templates. So, even though they are so pretty and easy on the eyes and user-friendly, they also don't support a lot of customization.


Thankfully, there are many hacks, workarounds, jugaad, to keep the goodness of dynamic views templates and yet, customize it to your heart's content.

Now, a taken-for-granted feature in Blogger is the addition of the post page link text of 'Read More' after each post's summary. Unfortunately, this feature does not pan out for the dynamic views templates. Pout.

Here's a whatchumacallit workaround to adding a text after your post summary - for the Magazine template of dynamic views. Feel free to change the actual text you want it to say. We like 'Keep reading'. And, please do keep reading. :-)

ADDING 'READ MORE' TEXT IN BLOGGER'S MAGAZINE DYNAMIC TEMPLATE

THE TL;DR Version

  1. Log in to Blogger.com.
  2. Click on the blog you want to edit. The one that uses a dynamic views template.
  3. Go to ‘Template’ and click on ‘Customize’ under the ‘Live on Blog’ frame.
  4. Then, move to ‘Advanced’ on the left panel and ‘Add CSS’.
  5. Paste the code below at the end of any other CSS code you might have there.
  6. Press ‘Apply to Blog’.
  7. Done-zel Washington!

/* ADD 'KEEP READING' AFTER LEAD STORY SUMMARY */
.magazine #lead .item .story:after, .ss{
content: "Keep Reading" !important;
color: rgba(145,221,40,1) !important;
position: relative !important;
float: right;
background-color: #ffffff;
padding: 2px;
}

/* ADD 'KEEP READING' AFTER FEATURE STORY SUMMARY */
.magazine #feature .item:after, .ss{
content: "Keep Reading" !important;
color: rgba(145,221,40,1) !important;
position: relative !important;
float: left !important;
}

/* ADD 'KEEP READING' AFTER FOLD STORY SUMMARY */
.magazine #fold .item .story:after, .ss{
content: "Keep Reading" !important;
color: rgba(145,221,40,1) !important;
position: relative !important;
margin: 0.2em !important;
float: right;
background-color: #ffffff;
padding: 2px;
}


The Lengthy Version

Some stuff to know about the Magazine dynamic template.

The first article summary that you see when the page loads is called the 'lead' article. The one right under that section with 4 posts in a row (by default - comment if you wanna know how to play around with the number of posts you want in that row) is called the 'Feature' section. And, as you may know, in web design jargon, if you have to scroll down to read the rest of the page after it's loaded onto your screen, the 'rest of the page' is called 'Below the Fold' - so you unfolded the page by scrolling down. Get it? So, the rest of the articles are called 'Fold' articles, in short. We need to know these details so that we control where the text shows up for each of the posts as they organically change positions when you add more posts to your blog.


This is how the posts will look.

LEAD:


FEATURE:


BELOW THE FOLD:



Hope this helps some folks. Let me know if you in the comments below.


Ray out. Peace!

Comments

Popular Posts