An Important Update

Dear Followers Of This Blog ...

If you did not use a Blogger / Google account when you Followed this blog, years ago, you are probably not Following now . During the past...

Monday, October 05, 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.

Dude, hit me with a comment!

Sean said...

Thanks for all the tips and articles. Out of interest, do you know how many sites are still using Dynamic Views? Seems a small percentage.

Chuck Croll said...

Hi Sean,

Thanks for the comment.

There's probably more blogs than you think using dynamic templates. What's interesting is the tech skill level of dynamic template users. You do know the original reason for developing dynamic templates?

Dynamic templates are very popular with advanced skill blog owners, because of the continuous scrolling display, which bypasses auto pagination. If you hang around the forums, you'll see some tweaked dynamic templates, that rival many "professional" websites in terms of shininess.

http://blogging.nitecruzr.net/2012/05/dynamic-templates-as-part-of-blogger.html

http://blogging.nitecruzr.net/2012/02/use-dynamic-template-to-display-blog-in.html

Sean said...

Thanks Chuck,

The historical perspective usually makes more sense of things.

Makes me wonder why Blogger didn't make a cast-iron, bare-bones XML template and build Dynamic-views with browser scripting on top of that. It would mitigate a lot of issues:
- browsers with javascript switched off would still get the content
- wouldn't need to support older browsers, just don't initialize Dynamic views
- dynamic views could have fully customized layout

Easier said than done I suppose.

Sean

Chuck Croll said...

Sean,

Actually, they did build a very very basic XML template. The entire "<body>" section is built within the JavaScript, that renders the posts feed into content. And the CSS in the "<header>" section is in a separate file, that we can't see.

It is all there, it just does not show up when we "View Source" in the browser.

In this post, we can see an example of the CSS involved. There is lots more CSS, we just don't get to see it, conveniently, in page source.