Enable snippets in blogger's SOHO theme then take them to the next level.
Google blogger’s SOHO theme only allows snippets for the Featured Post gadget. Here is how to enable them for the Posts gadget then take snippet functionality to the next level.
First, just the facts for experienced blogger theme tweakers (all others scroll down!)
Follow the instructions at Irsah in Designs blog to enable snippets in the Posts widget but, add this XHTML code instead of their example: <b:else/>
<b:include name='headerByline'/>
</b:if>
<b:include data='post' name='postTitle'/>
<b:comment> Displays post snippets </b:comment>
<div class='snippet-container r-snippetized'>
<b:eval expr='snippet(data:post.body, { length: 300 })'/>
</div>
</b:if>
<b:include data='post' name='postFooter'/>
<div style="display: none;">
This post has a REALLY long snippet to demonstrate the fading snippet infrastructure on the soho blogger theme.
</div>
<!--more-->
Add the following Group tag to your theme's HTML (make sure you are inside the "*/"):
<Group description="Widths" selector="#main, html[dir=rtl] .sidebar-container, html[dir=ltr] .sidebar-container">
<Variable name="sidebar.width" description="Sidebar width" type="length"
min="100px" max="1000px" default="284px" value="284px"/>
<Variable name="content.width" description="Content width" type="length"
min="660px" max="2400px" default="922px" value="922px"/>
<Variable name="content.margin" description="Content margin" type="length"
min="0px" max="1000px" default="117px" value="117px"/>
</Group>
<Group description="Snippets">
<Variable name="snippet.text.font" description="Snippet text" type="font" default="$(garamond20)" value="normal 400 20px EB Garamond, serif"/>
<Variable name="snippet.text.color" description="Snippet text color" type="color" default="#000" value="#000000"/>
</Group>
*/
.snippet-container,.snippet-fade{
font:$(snippet.text.font);
color:$(snippet.text.color);
line-height:$(snippet.text.font.size * 1.7)
}
.snippet-container{
max-height:$(snippet.text.font.size * 1.7 * 7);
overflow:hidden
}
.snippet-container,.snippet-fade{
font:$(snippet.text.font);
line-height:$(snippet.text.font.size * 1.7)
}
.snippet-container{
max-height:$(snippet.text.font.size * 1.7 * 12)
}
Why the above tricks work.
SOHO is one of the four new wonderfully responsive themes in the Google blogger theme library, but the designer only allowed snippets (little preview text for the associated post) in the Featured Post gadget. Snippets are deliberately limited in function by the blogger preprocessor as most HTML is stripped from the text by the snippet() function to make sure no formatting codes that would break the blog home page leak through. But even with such limitations they are still useful and the SOHO theme has a lot of CSS (cascading style sheet) infrastructure already in place for the Featured Post gadget. Here is a way to tap into that existing infrastructure for the regular Posts gadget. After that we’ll take snippets to the next level.
This post by Irsah in Designs shows how to add one line of blogger XHTML preprocessor code to the Post gadget to enable snippets for all posts. It works but…it leaves out all the wonderful snippet CSS infrastructure the SOHO theme designer put in for snippets. That CSS code makes sure the snippet text behaves itself in the post screen thumbnail area. We’ll take the b:eval statement he added:
<b:eval expr='snippet(data:post.body, { length: 300 })'/>
but wrap it inside a div tag that assigns two critical CSS classes: snippet-container and r-snippetized to make sure all the CSS infrastructure from the Featured Post gadget gets applied to the Post gadget as well. The code to add to the Post gadget is highlighted in yellow. Note, finding this code in the Post gadget can be tricky. In the blogger "theme" page pick "edit HTML" then "Jump to widget" and pick Blog1. The Blog1 gadget is huge, you'll have to scroll down until you see this includable:
then click on the little black triangle to expand the includable. Then you'll be able to find this code. Add the yellow highlighted lines:
<b:else/>
<b:include name='headerByline'/>
</b:if>
<b:include data='post' name='postTitle'/>
<b:comment> Displays post snippets </b:comment>
<div class='snippet-container r-snippetized'>
<b:eval expr='snippet(data:post.body, { length: 300 })'/>
</div>
</b:if>
<b:include data='post' name='postFooter'/>
Viola! The first 300 characters of your post will now appear as a snippet like this:
But I don’t want a newspaper lede snippet.
In a typical newspaper story the first paragraph is the “lede” which summaries the story and gives the main idea. What if you want to “bury the lede” i.e. make another paragraph besides the first the lede but you want THAT paragraph to be the snippet? You’re out of luck, snippets have to be the first characters of the post. And many times the snippet on a post is not a newspaper lede at all. It’s a tease or a promo telling you why you should click the link and go to the article (you won’t believe what so-and-so looks like NOW!) You can write that snippet as the first paragraph but when the user clicks on it instead of seeing the first real paragraph of the post they see the same snippet again but now it is taking up the most valuable space on the screen and it’s totally useless because the user has already clicked the link. What they want to see is the first paragraph of the post.
Let’s fix that.
The amazing disappearing snippet!
The biggest complaint about blogger snippets is that the snippet() function strips out all but the simplest of HTML tags to protect the blog home page from being broken. Let’s use that to our advantage.
The blogger post editor has two editing modes: COMPOSE and HTML. After writing a post select HTML, scroll to the top of the post then cut and paste this HTML:
<div style="display: none;">
This post has a REALLY long snippet to demonstrate the fading snippet infrastructure on the soho blogger theme.
</div>
<!--more-->
You now have an amazing disappearing snippet!
When the snippet text is retrieved by blogger’s snippet() function it will strip out the “display:none” styling and the snippet will happily appear in the post thumbnail as shown in the above example but... when the user clicks on the link to the post the tag is processed by the user’s browser and completely disappears just like this:
Now your posts can have the most screaming teases you can think of (“If you’re over 30 you MUST READ THIS!”) and when the reader is hooked and clicks…the first thing they see is that brilliant opening paragraph you wrote.
Note how I am hard coding the page break (< !- - more - >) into my HTML. You could just as easily use your mouse to select the page break icon in the post editor’s menu and insert it yourself with a mouse click. It's the one that looks like a page torn in half next to the smiley face icon:
In COMPOSE mode the page break will show up as line of dashes.
However you do it, inserting a page break is important. If you don’t, and if your snippet is less than 300 characters the snippet() function will start reaching into the first characters of your blog post text until it hits the max character limit.
Pretty cool huh? But let’s not stop there. Let’s elevate the lowly, much maligned blogger snippet up another level to being a true design element of your blog.
Snippets as a blog design element.
Blogger’s major strength is the ease of use of its web based tools many of which are WYSIWYG (what you see is what you get). With a little work you can turn snippets into a true design element of your blog.
Blogger has an “advanced” theme customizer tool with a very simple to use interface. If you choose “theme” you’ll see the “customize” button at the bottom. If you add correctly formatted blogger XHTML group item code to the SOHO theme’s other group items then snippet customization becomes easy and powerful.
Here’s how. Instead of clicking the “customize” button click the “edit HTML” button. Go to the top of the blog and find the start of the
<Group description="Widths" selector="#main, html[dir=rtl] .sidebar-container, html[dir=ltr] .sidebar-container">
<Variable name="sidebar.width" description="Sidebar width" type="length"
min="100px" max="1000px" default="284px" value="284px"/>
<Variable name="content.width" description="Content width" type="length"
min="660px" max="2400px" default="922px" value="922px"/>
<Variable name="content.margin" description="Content margin" type="length"
min="0px" max="1000px" default="117px" value="117px"/>
</Group>
<Group description="Snippets">
<Variable name="snippet.text.font" description="Snippet text" type="font" default="$(garamond20)" value="normal 400 20px EB Garamond, serif"/>
<Variable name="snippet.text.color" description="Snippet text color" type="color" default="#000" value="#000000"/>
</Group>
*/
.snippet-container,.snippet-fade{
font:$(post.text.font.small);
line-height:$(post.text.font.small.size * 1.7)
}
.snippet-container{
max-height:$(post.text.font.small.size * 1.7 * 7);
overflow:hidden
}.snippet-container,.snippet-fade{
font:$(snippet.text.font);
color:$(snippet.text.color);
line-height:$(snippet.text.font.size * 1.7)
}
.snippet-container{
max-height:$(snippet.text.font.size * 1.7 * 7);
overflow:hidden
}
.snippet-container,.snippet-fade{
font:$(post.text.font.large);
line-height:$(post.text.font.large.size * 1.7)
}
.snippet-container{
max-height:$(post.text.font.large.size * 1.7 * 12)
}
.snippet-container,.snippet-fade{
font:$(snippet.text.font);
line-height:$(snippet.text.font.size * 1.7)
}
.snippet-container{
max-height:$(snippet.text.font.size * 1.7 * 12)
}
Comments
Post a Comment