One of the features I implemented for Pillar on the Rock a few months ago is a means of showing different content on the main page than on the post pages. Oftentimes, we have introductory or editorial content that's simply extraneous in the context of our magazine-like landing page. People are not interested in reading an introduction to each post; they want to see whether the article itself grabs their attention or not. (Similarly, what's the point in having a great first sentence if it's buried below a bunch of other content?) At the time, we were shifting from showing entire articles on the front page to showing snippets. I took the opportunity to implement a small, easy fix that allows us to hide any content in a post from the front page while still displaying it normally on the post page.
Before you implement any of the following, make sure you backup a copy of your full Blogger template (Design→Edit HTML→Expand Widget Templates, then after the reload, choose Download Full Template). Now, you're going to need a couple pieces of CSS, and then some HTML implementation in Blogger's post-generating XML code. We'll start with the CSS. You can update this one of two ways. If you're using a new Blogger template, the CSS can be customized in Design→Template Designer→Advanced→Add CSS. If you're using a classic template, the CSS is available in the <head> section. Either way, you'll want to add some code like the following (the particular name of the class is not important; that you can remember it and it's descriptive of what you're wanting to do with it is important).
We're going to add a CSS "class" that we can apply to our content. (If you're unfamiliar with CSS, W3C Schools' tutorial is a great place to start. It'll explain concepts like ids, classes, and how CSS works in general.) Here's the class:
.hidden-content {
// any styling you want applied to this content on your post pages
}
You could actually ignore that entirely, but if you want to do anything special with the content on your post pages, you should add the styling to that class here.
Next, on the Edit HTML tab, run a search for "Blog1" (the name of the blog widget element). Scroll down (or just run another search) until you find the following code:
<div class='post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
Here, we are going to insert some code to tell Blogger what to do in the particular case that we are not on the post page, which Blogger identifies by setting the pageType to item—that's the section highlighted in yellow below.
<div class='post-body entry-content'>
<data:post.body/>
<b:if cond='data:blog.pageType != "item"'>
<style type='text/css'>
.hidden-content {
display: none;
}
</style>
</b:if>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
Aside: Those of you familiar with Blogger's templates may wonder why I didn't use pageType == index rather than pageType != item. The answer is that if you do that, archive pages (those accessed by searching by label or date) will all still display the content. Obviously you'll need to decide whether that makes sense in your case. For me, I only wanted the content to appear on the post pages.
Now, save your template, and you're done with the template changes. Now, any time you want to hide text on the front page but show in on the post-page, you simply need to wrap it in an element that has the class article-hiddne-content. For example, if you want to hide a whole section of text, you might do the following in your post (of course you'll have to be using the Edit HTML tab of the post creator):
<div class='hidden-content'> Donec fringilla lobortis metus eu sollicitudin. Nam eros quam, venenatis ut ultrices sit amet, tincidunt ac nisl. Phasellus varius ante ut nibh mattis dapibus rutrum purus pellentesque. Morbi congue risus et metus pellentesque vel pulvinar leo sagittis. Duis sapien diam, volutpat sed pharetra sit amet, consectetur vel sapien. </div> Donec dictum sapien at ipsum suscipit id condimentum turpis tristique. Nam bibendum molestie libero, sed imperdiet quam pharetra non. Maecenas bibendum nunc ut libero congue volutpat. Vivamus eu ante lorem, eu sodales risus. Mauris ultricies gravida interdum. Praesent eu tortor nibh, vitae facilisis orci. Duis et justo eu libero tempus viverra. Nulla.Alternately, you could hide anything else just as easily:
- Images:
<img src='image_url' class='hidden-content'/> - Links:
<a href='target_url' class='hidden-content'/>[link content]</a> - Paragraphs:
<p class='hidden-content'>[paragraph text]</p> - Spans:
<span class='hidden-content'>[span text]</span>
It's that simple! Of course, you can apply the same technique to accomplish substantially more sophisticated behavior as well. In my case, I not only wanted to hide some content on the front page, I wanted to change certain styles when on the front page (e.g. I didn't want my drop-cap first-paragraph effect to appear anywhere except the post-page, so I reset the styling for it to match ordinary text). All that requires is adding other styling elements inside the <style type='text/css'>...</style> block we created—those styles will only be applied when you're on a post-page, because Blogger won't even create that code for other kinds of pages.
I didn't know that it was possible. I should probably try it sometime. Thanks for sharing.
ReplyDeleteweb design Perth
not working :(
ReplyDeleteI imagine if you're using any of Blogger's new templates, things may have changed substantially. Note that this post is almost three years old; lots has happened since then.
Deletethe above code is not working..innovatebloggers
ReplyDelete