Monday, October 5, 2015

"Read More" In Dynamic Template Magazine View

Some blog owners, who publish their blogs using a dynamic template, prefer the "Magazine" view.

A few owners observe that there's a problem with the "Read More" function, in the "Magazine" post summary display.
How do I let my readers know that there's more to read? There's no caption to indicate "Read more ..."!
This is an odd omission, too.

With Dynamic Templates involving 7 different views, though, it's not difficult to imagine 1 or 2 details dropping through the cracks - and we are here.

It's not difficult, fortunately, to add a "Read More" caption to the summary display, in Magazine view.

It's all done, using CSS. There are 3 sections of the Magazine display.
  1. The "lead", or first post.
  2. The "feature", or the other posts above the fold. You see these posts below the lead, and before you scroll.
  3. The "fold", or all of the posts below the fold. You see these posts, as you scroll.


That gives us 3 CSS rules, to add to the template. You add them, as one would hope, using the "Add CSS" wizard in the "Advanced" section of the Template Designer. Remember, as always, to make a blank line, before each rule, when you paste.

Lead - The first (most recent) post.


#lead .summary:after {
content: "Read more >>";
color: #2d25ce !important;
clear: both;
display: block;
position: relative;
left: 0;
top: 5px;
}


Feature - Everything visible, below the Lead post, before you start scrolling.


#feature .item:after {
content: "Read more >>";
color: #2d25ce !important;
clear: both;
display: block;
position: relative;
left: 0;
top: 5px;
}


Fold - Everything visible, after you start scrolling.


#fold .item:after {
content: "Read more >>";
color: #2d25ce !important;
clear: both;
display: block;
position: relative;
left: 0;
top: 5px;
}


You may change "content" (the caption), and "color" (the text colour), to suit your preference.

What you see, above, is the code that I added to this blog. If you wish, you may examine the results.
The Real Blogger Status - Magazine View
You may also view this blog, using a dynamic template, by clicking "Dynamic", in the link bar at the top of the screen.

This tweak, originally provided by Yoboy, was necessitated by never ending Blogger revisions.

No comments:

Post a Comment